このページの本文へ

Mac用ウィジェットをHTML/CSSで自作 (3/4)

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

文●古籏一浩

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

ウィジェットを手動で作成

 最初に作るプログラムと言えば、文字を表示するものが定番です。ウィジェットで「ASCII.jp」の文字を表示させてみましょう。ここでは説明の都合上、CSSファイルは分離せずに同じHTMLファイル内にスタイルシートを記述しています。

 実際にウィジェットを作成するには「/ユーザ/【ユーザー名】/ライブラリ/Widgets/」内に新規にフォルダを作成します。今回は「Message」という名前のフォルダを新規に作成します。

【図】fig2-1.png

新規のフォルダを作成

 フォルダを作成したら、起動時に表示する画像である「Default.png」画像とアイコン画像「Icon.png」を作成し、フォルダ内に入れます。また、プロパティリストファイルである「Info.plist」とHTMLファイルの「main.html」もフォルダに入れます。

【図】fig2-2.png

ウィジェットの実行に必要な最低限のファイルを用意

 次に、フォルダ名に「.wdgt」という拡張子を追加します。

【図】fig2-3.png

フォルダに.wdgtの拡張子をつける

 すると確認のダイアログが表示されます。ここでは拡張子を追加したいので「追加」ボタンをクリックします。

【図】fig2-4.png

フォルダに.wdgtの拡張子をつける

 するとフォルダのアイコンが変更され、ウィジェットのアイコンになります。

【図】fig2-5.png

アイコンがウィジェットのものになる

 ウィジェットになると通常のフォルダと同じように開けません。フォルダ内を表示するには、アイコンの上で右ボタンをクリックして「パッケージの内容を表示」を選択します。

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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