 |
 |
| | | | | | | | | | | ||
| | | | |
|
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。
| 1 ウィジェット 2 ウィジェットのデバッグ 3 ファイル構成 4 Info.plist |
5 BlankWidget.html 6 BlankWidget.css 7 BlankWidget.js 8 まとめ |
BlankWidget の内容は、ウィジェットのバンドルそのままです。パッケージにはされていません。BlankWidget.html を Safari で開けば、ウィジェットが表示されます。ここで、フォルダを新規作成して、このサンプルのファイルすべてをそこにコピーします。それから、フォルダの名前を BlankWidget.wdgt に変えます。BlankWidget.wdgt をダブルクリックすると、通常のウィジェットのようにインストールが行われます。こうして、インストールすると、次のような表面だけの何もない画像が表示されます。
 |
Dashcode 以前では、ウィジェットの開発時にはターミナルでさまざまなモードを有効無効にするのが役に立ちます。ここで、ウィジェットのデバッグモードをオンにしてみます。ターミナルで以下のように入力します。
defaults 以下が実際に入力する部分です。これでデバッグモードがオンになったので、ログアウトログイン、または再起動します。
Dashboard を表示させ、BlankWidget を選択したままマウスボタンを離さずに、ファンクションキーを使ってウィジェットを消去します。そうすれば、BlankWidget が通常の画面内に表示されたままになります。このウィジェットを再読み込みするためには、この画面上でウィジェットの上でクリックし、コマンド-R を押します。すると、ぐるぐる回る印が出現しウィジェットの再読み込みを示しています。こうして通常の画面に表示されるようになったウィジェットを元に戻すには、ウィジェットをマウスで選択しマウスボタンを押したまま、逆に、ファンクションキーを使ってウィジェットモードに入ります。通常画面に戻るとウィジェットが消えているのがわかると思います。
この開発モードを抜けるには、ターミナルで以下を入力し、ログイン・ログアウトまたは再起動します。
また、ウィジェットは Safari で見ることもできます。このとき、「Debug」メニューを有効にするのも役に立ちます。これもターミナルから有効にします。。
これで次回 Safari を起動したとき、「Debug」メニューが表示されます。
Mac OS X v10.5 の Dashcode では、こうした手順を踏まなくても、ステップごとのデバッグなどさまざまなことが可能です。
このサンプルは新しくウィジェットを作るときのスケルトンとして使うことができるように考えられたものです。フォルダ内のファイルは、そのまま .wdgt 内のファイル構成を示しています。
 |
Info.plist は、バンドル識別子やウィジェットの表示名、バージョンなどさまざまな設定を収めているファイルです。ここで他の設定とともに、主要 HTML の名前が指定されます。
BlankWidget.html は、主要 HTML です。ブラウザで見ることもできます。このファイルで CSS や Java スクリプトの読み込みを指定します。
BlankWidget.css は、主要 HTML から読み込まれているスタイルシートです。
BlankWidget.js は、主要 HTML から読み込まれている JavaScript 実装ファイルです。
Default.png は、ウィジェットが起動されてから表示されるまでの間に表示されているデフォルトの背景画像です。
Icon.png は、ウィジェットバー内でウィジェットを表すときの画像です。
上で述べたように、この情報プロパティリストファイルで、主要 HTML の名前などが指定され、その情報を使ってウィジェットが読み込まれ、起動されます。そこで、このファイルを最初に見てみます。これは通常の xml ファイルでテキストエディタでも開けます。
CFBundleDisplayName キーの値は、ウィジェットバーと Finder で表示される名前です。これはローカル化可能で、InfoPlist.strings というファイルにこのキーと値の組を置き、ローカル化します。くわしくは HelloWelt サンプルを見てください。
CFBundleIdentifier キーの値は、バンドルの識別子です。これによりウィジェットが他のものと区別されるので重複しない文字列を使う必要があります。インターネット上のドメインは全世界で一意であるので、通常、ドメイン名を逆にした方式が使われます。ここでも、その方式が使われています。
CFBundleName キーの値は、バンドルの名前です。Finder におけるバンドル名から .wdgt を取り除いたものと同じにしなければなりません。
CFBundleShortVersionString キーの値は、バンドルのリリースバージョンです。バージョン番号は、通常、ドットで区切られた 3 個の数字で表されます。一番目は大きな改版、二番目は中間的な改訂、三番目はバグ修正などの細かな更新回数を示しています。
CFBundleVersion キーの値もバージョン番号ですが、これはリリースとは別のビルドされた回数を表すバージョンです。
CloseBoxInsetX と CloseBoxInsetY キーの値は、クローズボックスの位置を示します。
最後の MainHTML キーの値は重要で、これが主要 HTML ファイルを指定します。
それでは、主要 HTML ファイルを見てみます（空行は除去して詰めています）。
骨組み以外何もない状態です。最初に外部スタイルシートを指定しています。このインポートには url() 形式も使えます。つぎにJavaScriptファイルを指定しています。body 本体は背景画像があるだけです。ただし body タグの onload イベントハンドラに、setup() が指定されていることに注意してください。この onload はページや画像が読み込まれた時、完了した時をイベントとして取得し、設定された処理を行います。
このスタイルシートは非常に簡単です。
body 要素内で margin プロパティの値を 0 として指定しているだけです。margin（マージン・余白）は、要素のボックス内の border（境界線）の外側の空間を表します。これに対し、padding（パディング）は、border の内側から内容までの間の空間を表します。
単位がありませんが、0 は単位なしで大丈夫です。スタイルシートでは、状況によって変わる相対単位である px（ピクセル）、em（その要素の（または親要素から継承された）フォントサイズを 1 とし、0.5em などとして使う）、ex（フォントの x-height（アルファベット小文字 x の高さ）を 1 とする単位）や、絶対単位である pt（ポイント、1/72 インチ）、pc（パイカ、12 ポイント、すなわち 1/6 インチ）、cm（センチメートル）、mm（ミリメートル）、in（インチ）が使えます。親要素の % 指定も可能です。ただし、%指定はどの値に対する割合になるかはプロパティによって違います。
JavaScript ファイルを見てみましょう。
何もしていません。戻り値 0 を返しているだけです。
このサンプルは、ウィジェットの骨組みとして利用されることを目的としているため、最低限のファイルを含んでいるだけでウィジェットとしての動作は何も行いません。設定された背景画像がただ表示されるだけになります。
管理人：神吉 秀典 E-mail：