0

yahooウィジェット基本の覚書

yahooウィジェットの制作のポイントを何点かメモ。
同時にvista sidevar gadgetも作って混乱することもあったので。

基本的にyahoo, vista, google, AIRの中では一番初心者向きの気がします。
言語はXMLとjavascriptとすこーしのCSSです。

■デザイン
cssでレイアウトを組むのでなくXMLに左から○○px上から○○pxにテキストやイメージを置くといった感じです。
下記の例だと左から100px上から200pxにlogo.gifの左上がくるように配置します。
css脳になってしまってる人には少しやりにくいかもです。
<image>
<name>demo</name>
<src>Resources/logo.gif</src>
<hOffset>100</hOffset>
<vOffset>200</vOffset>
</image>

cssで下記のように書くのと同じです。
hoge {
position:absolute;
background-image:url(Resources/logo.gif);
left: 100px;
top: 200px;
}

■XMLの動的書き換え
javascriptを使ってXMLの要素の中を変更することができます。
さっきのXMLに少し手を加えます。
下記の例では、この画像をクリックすると画像がlogo2.gifに変更されます。
<image>
<name>demo</name>
<src>Resources/logo.gif</src>
<hOffset>100</hOffset>
<vOffset>200</vOffset>
<onclick>
demo.src = "Resources/logo2.gif";
</onclick>
</image>

javascriptだとこんな感じでしょうか。
document.getElementById("demo").src="logo2.gif" mce_src="logo2.gif";
yahooウィジェットではこの「name」がHTMLがIDのような役割を果たします。
ですので、同じkonファイルで同じnameは使えません。

■デバッグ
XMLでデバッグモードをonにしておけばコンソール画面がでます。
<debug>on</debug>

javascript内で下記のように入力すると変数や配列の中身を表示してくれます。
もちろんシンタックスエラーも表示します。
print(hoge);
log(hoge);

■設定画面
他のガジェット同様あらかじめ設定画面を使った設定の保存がし易くなってます。
XMLではこんな感じ。
これだけ保存ボタンも生成され自動できに保存されます。
明示的に保存するスクリプトを書かなくて良いわけです。

<preference name="color">
<title>色変更</title>
<type>popup</type>
<option>青</option>
<optionValue>青</optionValue>
<option>赤</option>
<optionValue>赤</optionValue>
</preference>

popupはHTMLのプルダウンと同じ意味です。

呼び出しも簡単。
保存されたデータはjavascript内でこのようにして取り出します。
foo = preferences.color.value;

■配布用ファイル作成
.konファイルとwidget.xmlと他ファイルをcontentsフォルダに入れる。
それを任意のフォルダ(sample)に入れる。

ウィジェットコンバーターにそのフォルダをドラッグ&ドロップするとsample.widgetが生成されます。

ちなみにこのウィジェットコンバーターは逆にwidgetファイルをフォルダに戻すことも可能です。
これでほかの人が作ったスクリプトをみて勉強できるというわけ。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です