”ウィジェット"はOSX10.4以降でサポートされているダッシュボード用のアプリです。
javascriptで記述されているので、ガシガシサイトを作り込みような人なら誰でも簡単に作れます。
この記事はWidgetを作ろう（その１）の続きです。
さて現在Widgetの”がわ”が出来上がりましたが、づついて中身を作ります。
6.コーディング
HTMLのBODY部分をゴリゴリとコーディングします。（２行だけですが・・・）
<html>
<style type="text/css">
@import "LinkXillion.css";
</style>
<script type="text/javascript" src="LinkXillion.js"></script>
</head>
<body>
<img src="Default.png" />
<span class="Text1" onclick="LinkXillion()">Xillion</span>
</body>
</html>
説明は不要かと思いますが、Default.pngの上に文字を載せます。文字のスタイルはCSSファイルに、onclickで実行する関数はJSファイルにそれぞれ書きませう。
CSSファイル
body {
margin: 0;
}
.Text1 {
font: italic bold 22px "Hiragino Kaku Gothic Pro";
position: absolute;
top: 1px;
left: 8px;
text-shadow: #00f 2px 2px 5px;
color: white;
}
これも説明不要ですね。Default.pngファイルが透明なので実際は文字だけが表示されているのWidgetになります。
jsファイルです。
function LinkXillion() {
widget.openURL("http://www.xillion.net/")
}
このコードは実はちょっと悩んでしまいました。
初めはhtmlにAタグで書いたのですが、dashboradの世界からdesktopのsafariを開けませんでした。
WidgetにAタグは不可ということです。
リンクさせる場合はwidget備わっているopenURLメソッドを使用します。
7.バンドル
これですべての資源の作成が終わりました。いよいよバンドルです。
といっても簡単でフォルダの名称の末尾に.wdgtを追加するだけです。
拡張子をつけるとアイコンが変化します。
できあがったwdgtをダブルクリックすればインストールを行えます。
LinkXillion.wdgt
パッケージの中身をみてね。
