1. ウィジェットの基本構造を確認
Dashcodeを使う前に、まずはDashboardウィジェットを開発するための基礎知識として、その基本的な構造と構成要素について学んでおこう。
ウィジェットはパーツの集合体(パッケージ)
後述するようにDashcodeのテンプレートを利用すれば、誰でも簡単にウィジェットを作成できる。しかし、Dashcodeの登場以前は、ウィジェットを構成する個々のファイルを個別に編集し、最後にひとつのパッケージにまとめることでウィジェットを作成していた。その手順を覚える必要はないが、どのようなファイルから構成されているのかをあらかじめ理解しておけば、Dashcodeでウィジェットを作成する場合にも、作業内容を理解しやすくなり、上達も早くなるはずだ。
実際に既存のウィジェットの上でマウスの右ボタンをクリックしてコンテクストメニューを表示し、「パッケージの内容を表示」を選ぶと、ウィジェットの中身を開いて確認できる。この中には、CSS/HTML/plist/JavaScript/画像(PNG形式)──の5種類のファイルが入っている。それぞれの意味と機能を確認しよう。
ウィジェットの中身
ウィジェットは、「wdgt」という拡張子が付いたパッケージで、基本的に5種類のファイルから構成されている。必要なファイルをひとつのフォルダーに入れ、フォルダー名に拡張子を付加すれば、自動的にウィジェットとして認識されるようになっている。それぞれの持つ役割を確認していこう
(1) HTMLと組み合わせてデザイン情報を構成する「CSS」
CSS(Cascading Style Sheet)は、一般的にウェブページのテキスト情報に関するデザイン的な要素を記録しているが、ウィジェット内部での役割もそれと同じだ。ただし、ウィジェットとしては必ずしもCSSを必要としない。その場合は、CSSを含まないあるいは空のCSSファイルを含むウィジェットになるわけだ。逆に複数のCSSファイルを使うようなウィジェットを作ることも可能
(2) ウィジェットのテキスト要素や構成を決める「HTML」
HTMLは、もちろん一般のウェブページを表現しているHTMLそのものだ。主にウィジェット上のテキスト情報の構成を記録している。これを見れば、ウィジェットは一種のウェブブラウザーであることがわかる
(3) ウィジェットの構成要素を統合する「plist」
「plist」は、「プロパティ」(属性)のリストのこと。ウィジェットに含まれるファイル同士を結びつける設計図、あるいは内部の情報の地図のような役割を果たす。plistはXML形式で保存されている。XMLエディターでも、テキストエディターでも編集できる
(4) ウィジェットの動作ロジックを決定する「JavaScript」
JavaScriptは、言うまでもなくウェブアプリケーションで使用されるスクリプト(プログラミング)言語。ウィジェットの動作と、その背景となるロジックを決定する。例えば、ボタンがクリックされた際にどのような動作を実行するかといったことを記述する
(5) ウィジェットの色、形、模様を決定する「画像」
画像ファイルは、通常PNG形式で記録されている。動作状態のウィジェットの背景などとしてDashboardの画面に表示される。ウィジェットとして最低限必要な画像は、この背景となる「Default.png」と、Dashboardパネルに表示されるアイコン「Icon.png」の2つのファイルだ
(次ページに続く)