yoshiweb.NET-blog



HOME > blog > Dashboard アプリケーション「ウィジェット」作り方 - Mac OS 10.4 Tiger
« CherryOS 開発終了 | ゴキ出現 »

Dashboard アプリケーション「ウィジェット」作り方 - Mac OS 10.4 Tiger

先月末に発売された、Mac OS 10.4 Tigre で話題のデスクトップアプリケーション
Dashboard (ダッシュボード)のアプリケーション、ウィジェット( Widget )作り方です。
自作ウィジェット ダウンロード
1.ウィジェットを作るためのフォルダを用意します。(例:sampleフォルダ)
2.ウィジェット一覧に表示されるアイコン画像を作成します。
  ファイル形式は PNG です。(例:Icon.png)
3.ウィジェットの背景となる画像を用意します。
  ファイル形式は PNG です。(例:Default.png)
4.ウィジェット本体となる HTML を作成します。cssも使えます。Safariで確認しながら作ると作業がし易いと思います。(例:sample.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<title>sample</title>
<style type="text/css">
<!--
body{
    margin : 0 ;
}
.test{
    position: absolute;
    left: 80px; top: 10px;
    font-family : sans-serif ;
    color : #FFFFFF ;
}
-->
</style>
</head>
<body><img src="Default.png" width="200" height="60" /><div class="test">テストっす。</div></body>
</html>

5.ウィジェットの名称や表示サイズなど各種設定を記述した XML ファイルを作成します。(例:Info.plist)
MainHTML : メインとなる HTML へのパス(例:sample.html)
Width : 横幅(例:200)
Height : 縦幅(例:60)
CFBundleName : ウィジェットの名称(例:sample)
CFBundleIdentifier : 識別子。逆順ドメイン。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>MainHTML</key><string>sample.html</string>
    <key>Width</key><integer>200</integer>
    <key>Height</key><integer>60</integer>
    <key>CFBundleName</key><string>sample</string>
    <key>CFBundleIdentifier</key><string>net.yoshiweb.widget.sample</string>
</dict>
</plist>

6.フォルダのファイル名の後ろにに拡張子「.wdgt」を追加すると(例:sample.wdgt )
  勝手に Tiger がフォルダをウィジェットとして認識してくれるようになります。

あとは、ライブラリの Widgetsフォルダ に入れれば他のウィジェットと同様に使うことができると思います。

作成データ と ウィジェット一式 - ダウンロード

アップル - Dashboard
Dashboard における Widget の開発
Dashboard プログラミングガイド

<追記>前に作ったサンプルがダサかったので作り直しました。

投稿者 yoshiweb - Tool - 2005/05/18 - 04:26:37 - Permalink
このエントリーをはてなブックマークに追加
タグ:

Comments

コメントしてください

コメントを書く

※ スパム対策のためコメント内の URL は全角で書いてください。あとで半角に変換します。