So-net無料ブログ作成
検索選択

ウィジェットバンドル内のソース構成 [Dashboardウィジェット]

ウィジェットのリサイズの続きですが、コードを書く段階まできたので、おそらくここのサンプルコードを転記すれば実現できるのだと思われますが、まず、現在のコードがどうなっているのかが全然把握できていないので、ちょっと、コードを眺めてみることにします。

ウィジェットバンドルのルート(と言っていいのかわからないんですが・・)にある関連ソースは「main.html」「main.js」です。

0905_initial_files.png
現在のファイルリスト


「main.js」の方に今回書き始めるイベントの関数が存在するんですが、ここにはイベント処理の関数が並んでいる様です。JavaScript自体がまだ良くわかっていないのと、ソースのスコープとかわかってないことだらけなので、まずこのソースがどのような位置づけにあるのか確認するため、「main.html」から見ることにします。

「main.html」では、下記のJavaScriptコードが読み込まれていました。

AppleAnimator.js(1)
AppleButton.js
AppleInfoButton.js
localizedStrings.js(2)
utilities.js(3)
setup.js
Text.js
InfoButton.js
GlassButton.js
main.js(4)
PopupButton.js(5)
Button.js


(1)のファイルは「file:///System/Library/WidgetResources/AppleClasses/」の様にフルパスで読み込まれています。これは全てのバージョンのMacOS Xに存在しているんですかね。ウィジェットバンドル内には含まれない様ですね。

(2)のファイルは参照パスが書かれていないのですが、ウィジェットバンドルのルートにはソースが存在しません。ん〜、と思って、ファイルリストを眺めていたら「ja.lproj」と言うフォルダがありますね。こちらでも触れましたが、MacOS X のアプリは基本的に文字列はリソースとして各国語毎に分離されています。このフォルダの中を見てみると(2)のファイルが存在していました。日本語のリソースとしてこちらに保存されている様ですが、参照のルールがわかりませんね。「localizedStrong.js」と言うのは固定のファイル名でこのファイルの場合は自動的に各国語のリソースとしてサブフォルダを参照する仕組みになっているのでしょうか・・?後、ウィジェットバンドル内に英語のリソースが存在していません。英語のリソースは必須かと思ってたんですが、もしかしたら、そうでもないのかもしれません。この辺り、追々見ていきたいですね。

(3)(5)のファイルはウィジェットバンドル内「Parts/」フォルダから読み込んでいます。なぜ、2カ所に分かれているのかと思いましたが、(5)の方は単純に後から私が追加したリソース(プルダウンメニューとボタン)のためのファイルですね。中をちゃんとは見てませんが、これらは「main.js」と同様、イベントハンドラを追加していくファイルの様です。

で、(4)が今回、コードを書き足す予定のファイルですね。これもウィジェットバンドルのルートに存在する様です。

ここで、疑問が出てきました。(5)のファイルもイベントハンドラを記述していくファイルだとしたら、ボタンなどなので、こちらでもマウスが押される様なイベントは発生すると思われます。前回のウィンドウリサイズ用のハンドラはDashcode上でイベントを追加しましたが、「main.js」を見たところ、追加したイベントハンドラ(mouseDown)は、特にクラスなどでくくられている訳でもなく、また、オブジェクトとの関連づけは単純に<img>要素内で関数との結びつきが定義されているのみです。ファイル(main.js)との結びつきは読み取れません。これって、「mouseDown」みたいに一般的な関数名でいいんでしょうか? もしかして、オブジェクト毎に区別できる様な名前付けをしないといけないんですかね・・? JavaScriptって、ソースのスコープは全体にフラットなの・・?

ソースを見ていてもわからないので、試しに削除ボタン「delButton」に「mouseDown」イベントを追加しようとしてみましたら、同じ「main.js」の「mouseDown」関数に結びついてしまいました・・・。う〜ん、やっぱり全体的にフラットなんか・・、というか全てグローバルな関数なの??

後、上の方で書いた「(5)のファイルにイベントハンドラを書く様です」って言うのは間違いですね・・・。


う〜ん。良くわからないので、その前提でイベントハンドラの名前を付けることにします。つづく。

ウィジェットのリサイズ Part 2 [Dashboardウィジェット]

前回サンプルの「Resizer」で追加されているオブジェクトを自分のプロジェクトに追加するには、どうすればいいか? と悩んでおりましたが、普通にライブラリのウィンドウなどを眺めていても、該当するオブジェクトはありませんでした。

仕方が無いので、メニューを眺めていたところ、「ファイル」→「ファイルを追加...」と言う項目がありました。

0905_menu_file_add.png
これかな?


先週の記事で読んだサンプルコードを見てみると、リサイズ用のイメージは「/System/Library/WidgetResources/resize.png」にあると言うことがわかっています。と言うことで、上の写真のメニューからこのファイルを追加してみました。すると、Dashcodeのウィンドウの左下にファイルが無事追加されました。

0905_resize_add.png
resize.pngが追加されています


と言うか、いつの間にかこのスペースが「ファイル」と言う項目に変わってました。いつ変わったか、認識してません・・。こちらの記事の通り最初は「ワークフローステップ」という項目だったんですが・・・。追加した時に変わったんかな・・?

ま、それはどうでもいいので、さっそくこの「resize.png」をウィジェットの右下に配置しました。infoボタンは邪魔なので少し左側に動かします。

0905_put_resize_png.png
パーツはそろいました


これで、パーツはひとそろい配置できました。横のパーツリストのところに要素が追加されましたが、「img」と言う名前になっていたので、「resize」に名前を変更しておきました。

0905_rename_img.png
サンプルの「Resizer」に倣った


resizeアイコンを右クリックすると、コンテクストメニューに「イベント」と言うのがあったので、ここから、前回の記事のサンプルコード(HTML)に書かれていた「onmousedown」を選択。

0905_add_mousedown_event.png
いろいろイベントがあります


すると、「ビヘイビアを追加」と言うダイアログが出てきたので、ハンドラの名前を前回のサンプルコード(HTML/JavaScript)に書かれていたハンドラの名前「mouseDown」に設定。

0905_make_mousedown_handler.png
ビヘイビアって・・・


「追加」を押すと、下にソースコードが出てきました。

0905_show_source_view.png
ようやくコード出現!


「ここにコードを挿入」と書かれているので、コードを書いていきましょう!・・・と言うことでつづく。


※「ビヘイビアを追加」は直訳なんですかね・・? 普通に「ハンドラを追加」でいいと思いますが・・・。

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:資格・学び

ウィジェットのリサイズ [Dashboardウィジェット]

前回の記事ではウィジェットのリサイズやり方が良くわからなかったので、Dashboard Programming Topicsの該当箇所を見てみました。

ユーザによるウィジェットのリサイズを実現する方法はだいたい次の通りの様です。

  1. リサイズ用のグラフィックをHTMLファイル上に記述して、
  2. CSSファイルでウィジェットの右下に配置して、
  3. JavaScriptファイルに1.のグラフィックでマウスが押下された時の処理を書く。


サンプルが示されていましたので、一応、こちらに転載します。それぞれ、以下のような感じです。

1. リサイズ用のグラフィックはシステムでデフォルトで用意されている様です。それを指定して、CSS用のidと言うアトリビュートとJavaScript用にonmousedownアトリビュートを設定している様です。

<img id='resize' src='/System/Library/WidgetResources/resize.png' onmousedown='mouseDown(event);'/>


2. CSSファイルに先ほどの<img>要素で指定されたセレクタの定義を書きます。位置は固定値が書かれていますが、これはウィジェットのデフォルトサイズに依存すると思います。最後の定義はあからさまにDashboard専用のキーワードですね。何かわかりませんが、必要になったら調べることにして、ここでは気にしないことにしときます。

#resize {
    position:absolute;
    top: 208px;
    right: 2px;
    -apple-dashboard-region: dashboard-region(control rectangle);
}


3. で、最後にJavaScriptのコードですこれも1.の<img>要素で指定されているmouseDown()関数の中身を記述しています。mouseDown()〜mouseUp()までで一連の動作となっていますね。見てると面白いところもあるんですが、ここでは、そういうものとしておいておきます。

var growboxInset;

function mouseDown(event)
{
    document.addEventListener("mousemove", mouseMove, true);
    document.addEventListener("mouseup", mouseUp, true);
 
    growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};
 
    event.stopPropagation();
    event.preventDefault();
}

 
function mouseMove(event)
{
    var x = event.x + growboxInset.x;
    var y = event.y + growboxInset.y;
 
    document.getElementById("resize").style.top = (y-12);
    window.resizeTo(x,y);
 
    event.stopPropagation();
    event.preventDefault();
}
 
function mouseUp(event)
{
    document.removeEventListener("mousemove", mouseMove, true);
    document.removeEventListener("mouseup", mouseUp, true);
 
    event.stopPropagation();
    event.preventDefault();
}


さて、実現方法はいいんですが、こんな基本的な動作はDashcode内にデフォルトで用意しておいてほしいんですが、無いんでしょうかね・・?

今読んでたページの先頭の方に「Resizer」と言うサンプルプロジェクトが紹介されているので、それをDashcodeで見てみました。すると、どうもリサイズのマーク自体は何かのオブジェクトとして登録されている様です(下の画像では見にくいですが・・)。

0905_resize_icon.png
何かのオブジェクトとして登録されてます


「ライブラリ」のウィンドウでは、このresizeにあたるオブジェクトはありませんでした。でも、サンプルでは、一応Dashcode でそれを構成要素として認識している様なので、何らかの方法で Dashcode にオブジェクトを追加する方法がある。もしくは、手で HTML とかに記述してから Dashcode で読み込むとそれを認識する。のいずれかだと思われます。

・・前者だといいんですけどね。つづく。


【参考】
Resizing Widgets - Dashboard Programming Topics


Dashcode を使ってみる [Dashboardウィジェット]

そろそろ、基本的な項目はおさえられたであろうと思われることと、ようやく読むだけと言う行為に飽きてきたので、Dashcode を使ってみようと思います。既に忘れられているかもしれませんが、目標はメモ帳なので、いきなりそこを目指してみます。

取りあえず、起動。



まずは、テンプレートの選択を促されます。Webアプリケーション用のテンプレートも用意されています。Dashboard用のテンプレートは10種。でも、メモ帳に使えそうなテンプレートは無いので、白紙の「カスタムテンプレート」を選択しました。

0905_first_screen.png
「こんにちは!」はいらない・・


ウィンドウ右側の部分にアプリケーションの見た目が表示されています。アプリケーションの本体とその左上にクローズボタン、右下に「info button」。そして中央上方に「こんにちは!」のラベル(?)が貼られています。そして、ウィンドウ左側の下に「ワークフローステップ」と言うのが表示されています。チュートリアルっぽい内容で、これに従えばいい様です。まず最初に表示されているのが「レイアウトインターフェース(必要)」と言う項目です。「ライブラリの項目をキャンパスにドラッグし、インスペクタで項目のプロパティを変更します。」と書かれています。

アプリケーション本体は「キャンパス」と言う様ですね。まず、キャンパスの「こんにちは!」はいらないので削除。マウスで選択して「delete」キーを押したら消えました。ところで、ウィンドウ左側上方に「front」と「back」と言う項目があります。それぞれ、アプリケーションの表面と裏面に貼付けられている部品が表示される様です。この削除の操作で「front」配下に表示されていた「helloText」と言う項目が消えました。これ、たぶんコードで参照されるクラス名か何かになっている様ですね。

さて、「ライブラリの項目をキャンパスにドラッグ」せよとのことです。メモ帳の構成要素として今思いつくのは下記の通り。



ページをめくるボタンが必要かどうか悩みましたが、プルダウンで選択できるので、取りあえずつけないことにします。後で欲しくなったら、追加することにしましょう。「ライブラリ」のウィンドウはチュートリアルからか、メニューの「ウィンドウ」→「ライブラリを表示」で表示ができます。

0905_library_window.png
部品の選択


部品を貼って、左のアイテムリスト内で名前を変更します。編集領域は「textarea」のまま、プルダウンメニューを「selectMenu」、新規作成ボタンを「newButton」、削除ボタンを「delButton」としました。またここで、「ファイル」→「別名で保存」で「memo.dcproj」と名前を付けて保存しときました。

0905_put_parts.png
見た目は完成


次に「インスペクタ」を表示してみます。こちらもチュートリアルからか、メニューの「ウィンドウ」→「インスペクタを表示」から。まずは「textarea」から。変える必要があるのかどうかがわからない項目は、とりあえずスルーします。ものさしの様なアイコンの項目で「自動サイズ調整」と言う項目がありました。ウィンドウのサイズは自由に変更できる様にしたいので、伸び縮みさせたいところをバネマークにします。

dashcode_inspector.png
実はバネマークの意味がまだ分かってません


ここで、動作を見てみるためにウィンドウ左上の「実行」ボタンを押して、実行してみましたところ、普通にデスクトップ上で実行できました。これは便利ですね。

さて、先ほどの伸び縮みを確認するため、ウィンドウのサイズを変えようとしたところ、ウィンドウのサイズが変えられませんね・・。何か設定が必要そうです。

先ほどの「ワークフローステップ」を眺めてみたところ「属性を設定」とあります。何かウィジェットの設定ができる様です。「ウィジェットの属性」を見てみました。

0905_widget_propaties.png
ない・・


・・・残念ながらそれらしい属性はありませんね。それより「こんにちは!」がリソースとして残ってるみたいです。後、「ウィジェット識別子」と言うのが「名称未設定」になっているので、それも決める必要がありそうです。


・・・う〜ん、つづく。


【参考】
Introduction to Dashcode User Guide

JavaScriptについて [JavaScript]

えらい時間がかかっていますが、Dashboard について、ようやく導入部分の理解が終わった感じがしています。さらに読み進めようとしましたが、そろそろJavaScriptも絡んだ内容が増えてきそうな雰囲気だったので、ひとまず、JavaScriptについて、さらっとは見とこうと思います。JavaScriptについては、以前ちょっとだけ内容を読んだことはあるんですが、コードを書かないので、結局ほとんど頭に残っていない状態です。

なんかいい文書があるかな〜と思って探していましたら、アップルが Mac OS X での開発向けに説明をしてくれている文書がありました。「Introduction to Apple JavaScript Coding Guidelines日本語版)」です。この際なので、これで学習していきたいと思います。ちなみに、日本語版は情報が古そうです。例えば、データ型の説明のところで、型変換のルールが英語版と日本語版で異なっています。たぶん、英語版が最新の動作だと思われるので、こちらを参考にします。(と言うか、JavaScriptの仕様はどこにあるんでしょう??)

ざ〜っと見たところ、この文書ではスクリプトがどこから呼び出されるのか(どこから起動されるのか)が書かれていない様です。Dashcodeを使えば、その辺りは自動で生成されるからと言うことでしょうか? 一応、このサイトが簡潔にまとめられている様なので、ここを参考にしておきます。

JavaScriptは、HTMLソース内の<script>要素内にコードを書く様です。直接HTMLソース内にコードを書くこともできる様ですが、JavaScriptのソースファイル(例えば「test.js」)を外部に持たせる場合は、次の様に読み込む模様です。

<script type="text/javascript" src="test.js"></script>


と言うことで、JavaScript本体の話をザ〜っと流しておきます。


変数と代入

変数の宣言は「var」キーワードを使用して下記の様に行う。宣言を行わないことも可能だが、その場合はグローバル変数になる。また、変数に型は無い。

var foo;
var bar, hoge;


値の代入は例えば、下記の通り。

foo = 5;
hoge = foo;


後者の代入方法は、値がコピーされるのか、同じオブジェクトを指すことになるのかが良くわかりませんね。と言うか、数値はオブジェクトじゃないんですかね・・? 文末のセミコロンは省略可能(でも、なるべく省略するな)とのこと。

初期化していない変数の初期値がわかりませんね。不定値なんでしょうか?また、特に宣言が必要でないとのことなので、スペルミスなどでもエラーは出ないと言うことですね・・。


JavaScriptには下記の5つの基本型(primitive type)があるとのこと。

number数値。整数と浮動小数点数が扱える。
boolean論理値。値は「true」もしくは「false」。
string文字列。
null値なし。
undefinedわからない値。


最後が良くわかりませんね。オブジェクト(構造体とかクラスとか)になるんでしょうか? そういえば、構造体などの型が定義されていませんね。型変換は必要に応じて自由に行われるとのことです。下記の様な感じ。

1var x = 1 + "2";数値1が文字列"1"に変換されて、結果は文字列"12"。
2var x = 1 + parseInt("2", 10);右辺の第2項で文字列"2"を10進数扱いで整数に変換している様です。結果は数値の3。
3 var message = "Hello World";
var firstCharacter = message.charAt(0);
2行めの文で文字列messageがオブジェクト化されて結果は"H"になる(のか?)。


2行目の文で、parseInt()の第2引数は基数を表しているが、省略された場合はCと同じルールで第1引数を解釈し、「0x」で始まる場合は16進数、「0」で始まる場合は8進数、他は10進数と扱うとのこと。

基本型は必要に応じてオブジェクト化されるとのことです。3行目の文では、文字列messageがオブジェクト化されてメンバ関数のcharAt()が実行される様です。現状、charAt()の仕様は知らないです・・。

条件文

Cと同様、条件文の結果に応じて、処理を分岐させる為に使用する。条件文の値はboolean型のtrueとfalse。trueは数値の1が、falseは数値の0が割り当てられているとのこと。条件文で使用される演算子は下記の通り。

==両辺の値が等しい場合にtrueを返す。評価前に異なる型の値を変換する。
===両辺の値が等しく、型も同じであった場合にtrueを返す。
!=両辺の値が等しくない場合にtrueを返す。評価前に異なる型の値を変換する。
!==両辺の値が等しくないか、同じ型でない場合にtrueを返す。
<左辺値が右辺値よりも小さい場合にtrueを返す。
<=左辺値が右辺値以下の場合にtrueを返す。
>左辺値が右辺値よりも大きい場合にtrueを返す。
>=左辺値が右辺値以上の場合にtrueを返す。


ここでは、if文とswitch文が紹介されています。条件文がこれだけなのかはここだけでは、良くわかりません。また、if文にelse ifに相当するものがあるのかどうかはここでは不明です。JavaScriptは大元の資料としてどこを見ればいいのかが良くわかっていないのですが、ここによると「else if」もありますね。それをふまえて、サンプルコードに手を加えると下記の様な感じでしょうか。

if (variable1 == valuable2)
{
    // code to execute when this statement is true
}
else if (variable1 == valuable3)
{
    // code to execute when this statement is true
}
else {
    // code to execute when this statement is false
}


また、switch文については、下記の様なサンプルが示されていました。

switch ( variable ){
    case 1: // code to execute when variable equals 1
            break;
    case 2: // code to execute when variable equals 2
            break;
    default: // code to execute when variable equals something other than the cases
             break;
}


いずれもC言語のの構文に似てますね。


ループ文

ループ文には「while」「do...while」「for」の三つが用意されている様です。いずれもC言語と同様の様なので、さらっと、載っていたサンプルコードを紹介しておきます。

while ( variable == true )
{
     // code to execute while variable is true
}


do
{
    // code to execute while variable is true
}
while ( variable == true );


for ( var i = 0; i < variable; ++i )
{
    // code to execute within this loop
}



関数

関数もまあ大体C言語と同じに見えるんですが、初めて見る形式もありました。また、こちらをちらっと見たところ、かなり複雑なこともできる様ですが、詳しくはおいおい見たくなったら見ることにします。

ここでは、まず通常の形式の例から。

function myFunction ( variableOne, variableTwo )
{
    // code to execute within this function

    return variableOne;
}


要点を列挙します。

  • 「function」で宣言を開始し、続いて関数名(myFunction)、引数(variableOne、variableTwo)と続く。
  • 関数はJavaScriptコードのどこでも宣言、使用が可能。
  • 引数について、基本型は値渡し、オブジェクトは参照渡し。
  • 関数の戻り値は「return」で返す。「retun」を省略した場合は暗黙に「undefined」が返される。


と、ここまでは普通に理解できましたが、次の様な宣言もできる様です。

var myFunctionVariable = function ( variable )
{
    // code to execute within this function
}


function myFunction ( myFunctionVariable )
{
    myFunctionVariable( "aString" );
}


まずは最初の宣言。「myFunctionVariable」と言う変数に関数の定義を代入しています。ここでは、関数に名前は付けられていませんが、こちらによるとつけても問題なさそうです。

で、2つ目の宣言で、最初の宣言で定義した関数を呼び出すのに変数を利用しています。C言語で言えば、関数ポインタの利用でしょうか。呼び出し側で適宜呼び出し先を入れ替えたい時に使うのかもしれませんが、どこまで必要か今は不明です。まあ、C言語でも関数ポインタを使うときがあるので、同じ様な用途かもしくはもっとすばらしい用途が秘められているのかもしれません・・。


その他の特徴

C言語同様の演算子のうち2つがここで挙げられています。これは存在するものの一部とのことなので、他にもある様です。

条件演算子表記は<条件> ? <真の場合の値> : <偽の場合の値>で、C言語と同じ用法とのこと。
コンマ演算子「,」で区切って複数の文を並べることで一つの文と見なす。「,」で区切られた各文は左から順に実行され、右端の値を返す。とのことです。


条件演算子はよく使ってましたが、コンマ演算子の方は深く考えたことが無かったので、なるほどと言う感じですね。


以上、長くなりましたがザ〜っと概要を眺めてみました。続いて、オブジェクト指向の話パフォーマンスとかの話が書かれている様ですが、またそのうち読むことにします。


【参考】
Introduction to Apple JavaScript Coding Guidelines日本語版
Leopard Reference Library: Scripting & Automation JavaScript
Apple Developer Documentation 日本語版
Introduction to WebKit DOM Programming Topics ←役に立つ情報があるらしい。
JavaScript講座 [Smart]
Core JavaScript 1.5 Reference - mozilla

ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。