このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第53回

Mac用ウィジェットをHTML/CSSで自作

2011年03月22日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 Mac OS XのDashboardウィジェットは、HTMLファイル、CSSファイル、JavaScriptファイルで構成されています。前回はMac OS Xに付属する「Dashcode」を使って簡単なウィジェットを作りましたが、今回はエディターでコードを書いて「文字表示ウィジェット」と「メモウィジェット」を作ってみましょう。

 ウィジェットを作成する前に、ファイル構成を確認しておきましょう。前回作成したGoogleマップを表示するウィジェットの中身は以下のようになっていました。

【図】fig1-1.png
前回作成したウィジェットの内容。ウィジェット上で右ボタンをクリックし「パッケージの内容を表示」を選択すると表示される

 パッケージに含まれるファイルのうち、ウィジェットの作成に必須のファイルは以下のとおりです。

Default.png
起動時の画面。多くはそのままウィジェット画面として使われる
Icon.png
ウィジェットのアイコン
Info.plist
ウィジェットの情報を持っているプロパティリストファイル
main.html
ベースとなるHTMLファイル。名前はInfo.plist内で指定できるので、main.htmlでなくてもよい

 CSSファイルやJSファイルはHTMLファイル内に書いても動作しますが、基本的には外部ファイルとして読み込んで使用します。

 「Info.plist」は、ウィジェットの動作に必要な情報を定義したファイルで、「プロパティリスト」と呼ばれます。次ページではプロパティリストファイルについて詳しく説明します。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く