Yahoo!ウィジェットの作り方と注意点 (1) - Hello World!

【目次】

(1) http://d.hatena.ne.jp/n_shuyo/20070413/widgets : Hello World! [本稿]
(2) http://d.hatena.ne.jp/n_shuyo/20070416/widgets : 設定画面の作成
(3) http://d.hatena.ne.jp/n_shuyo/20070418/widgets : はまりどころ(文字化け＆二重入力)

また、Yahoo! Widgets で作った Twitterクライアント「Twiggee」を会社 blog の方に掲載してみた。ソースは特別に配布してはいないが、後述の「ウィジェットコンバーター」でさっくり展開できるので、よろしければ参考にしてもらえたりすると嬉しいかも。

Yahoo! Widgets で Hello World!

Yahoo! Widgets は Windows/Mac に対応したデスクトップ・ウィジェット（ミニアプリ）を開発・配布するための環境である。

Yahoo!ウィジェット: http://widgets.yahoo.co.jp/

今回手を出してみたところ、思ってたよりずっと作りやすかった*1のと、マッシュアップ的アプリを作ってみようとしたら高確率でつまづくだろう点がいくつかあることがわかったので、そのあたりを含めて紹介してみたい。
ただし Mac を持っていないので、今回書いた内容が Mac 版にも当てはまるのかどうかはわからない。あしからず。

最初に、簡単に Yahoo! Widgets の気に入ったところ・いまいちなところをまとめておく。

気に入ったところ
- JavaScript
- インスペクト機能を持つコンソール(FireBugみたいなもん)
- 設定用の画面や保存処理などを一切作る必要がない(タグ書くだけ)
いまいちなところ
- 日本語のJSONデータを取りに行くと化ける(XMLは大丈夫っぽい)
- テキストエリアに日本語を入力するとき、入力した文字列が二重になってしまうことがある(回避方法あり)
- 多国語化について特に手段が用意されていない
- .kon ファイルが XML である必然性がない ( いっそ YAML とかの方が喜ばれるんじゃないかな？ )
- 旧称(Konfabulator)がいたるところに残っていて、Yahoo! Widgets から入った人は混乱するんじゃないの？

まず。
Yahoo! Widgets で開発する場合、Yahoo! Widgets 本体を入手するのはもちろんだが、「ウィジェットコンバーター」も必要なので、併せて下記ページからダウンロードしておく。

Yahoo!ウィジェット - 開発ツール: http://widgets.yahoo.co.jp/workshop/

ウィジェット版とコマンドライン版があるが、まあ頻繁に使うわけではないので CUI 命の人でもウィジェット版の方で事足りると思う。
Yahoo! Widgets がインストールされている状態で「ウィジェットコンバーター.widget」を開くと、下記のような画面が出るので、「ここにファイルをドラッグ」に「ウィジェットコンバーター.widget」自身をドラッグしてみる。

「変換する形式」に「フォルダ」を選んで「変換」をクリックすると、「ウィジェットコンバーター.widget」の中身が展開され確認できるようになる。
パッケージの構成はとても簡単で、こんな感じ。

アプリ名/
- Contents/
  - *.kon
  - *.js (あれば)
  - 適当なディレクトリ/素材ファイル(画像など)

この中で必須ファイルは *.kon だけである。
拡張子を見て Yahoo! Widgets エンジンが勝手に探してくれるので、.kon の前のファイル名はなんでもいい。
これが配布用のパッケージ構成なわけだが、開発するのにいちいちこのパッケージを作る必要はなく、*.kon ファイルを直接開くだけでアプリケーションは動作する。
実際、ウィジェット・コンバーターを展開して出来た Converter.kon をダブルクリックするとウィジェット・コンバーターが起動することを確認できるだろう。

さて、 *.kon ファイルは XML で記述されていて、そのフォーマットや詳細はチュートリアルやリファレンスなどを参照してもらいたいのだが、ここでは例によっての "Hello World!" でもやっておこう。

<?xml version="1.0" encoding="UTF-8"?>
<widget version="0.1" minimumVersion="3.0" debug="on">
  <window name="mainWindow" title="タイトル" width="320" height="240" visible="true">
    <text name="myText" data="Hello World!" hOffset="0" vOffset="30"
          size="18" color="#000000" bgColor="#ffffff" bgOpacity="255" />
  </window>
  <action trigger="onLoad">
    // 外部 js ファイルがある場合は、ここで読み込み指定
    // include("main.js");
  </action>
</widget>

上記の内容で hello.kon を作って（もちろん文字コードは UTF-8 で）、これを開けば（ちょっとした警告画面を挟んで）白地に黒の "Hello World!" が画面のどこかに表示されるだろう。
また、それと一緒に "Konfablator: hello" というウィンドウも開いたはず。これが Yahoo! Widgets のコンソールで、の debug="on" の時に表示される。

このコンソールは、グローバルオブジェクトのインスペクト (/dump) や、式の実行（関数の定義などもOK)ができる、十分強力なデバッグツールだ。
例えば、上の hello.kon でコンソールに "/dump myText" と入力すると、次のように表示される。

Object "myText":
    myText[name]: myText
    myText[hOffset]: 0
    myText[vOffset]: 20
    myText[height]: 21
    myText[width]: 99
    myText[zOrder]: 1
    myText[opacity]: 255
    myText[alignment]: left
    myText[tracking]: opacity
    myText[onMouseDown]: null
    myText[onMouseUp]: null
    myText[onMouseEnter]: null
    myText[onMouseExit]: null
    myText[onKeyDown]: null
    myText[onKeyUp]: null
    myText[onDragEnter]: null
    myText[onDragExit]: null
    myText[onMouseMove]: null
    myText[onDragDrop]: null
    myText[data]: Hello World!
    myText[text]: Hello World!
    myText[tooltip]: 
    myText[color]: #000000
    myText[colour]: #000000
    myText[font]: Arial
    myText[size]: 18
    myText[style]: none
    myText[scrolling]: off
    myText[bgOpacity]: 255
    myText[bgColor]: #FFFFFF
    myText[bgColour]: #FFFFFF
    myText[hAlign]: left
    myText[contextMenuItems]: 
    myText[onMultiClick]: null
    myText[onContextMenu]: null
    myText[window]: [object Window]
    myText[truncation]: none
    myText[visible]: 1
    myText[shadow]: null
    myText[superview]: [object Root]

color のプロパティが #000000 であることがわかる。
そこでコンソールに myText.color="#FF0000" と打てば文字が赤くなるし、 myText.size=30 と打てば文字が大きくなる。
あと Break Point があればほぼ完璧だったが、まあこれでも十分役に立つ。
ちなみにソースを変更した場合はコンソールの "Reload" ボタンで更新が有効になる。これもシンプル＆スムーズでいい感じだ。

話を少し戻して、サンプルなどを参考に *.kon を作るときに注意しなければならない点を述べておく。

サンプルのソースは古いバージョンの Yahoo! Widgets エンジンに対応するように書かれている。
一方、一部の新しい機能はに minimumVersion="3.0" と記述しなければ使えない。
そこでサンプルをベースにしつつ minimumVersion="3.0" と記述すると、画面に何も出ないという現象が発生する。

3.0 未満では、ウィンドウに表示したい画像やテキストがあった場合、ノードとやノードは同じレベルに併記されていてよかった。つまり以下のような感じ。

  <window name="hoge" ... />
  <image name="poge" ... />
  <text name="boge" ... />

これがどうやら 3.0 では、ウィンドウ上に表示したい項目（ Yahoo! Widgets の用語では "view" ) はノードの中に書く必要がある。つまり以下のような感じ。

  <window name="hoge" ... >
    <image name="poge" ... />
    <text name="boge" ... />
  </window>

後者の方が自然なので変更自体に文句はないが、知らないとはまるので（つーか、はまった）憶えておこう。

*1:昔、まだ "Konfabulator" という名前だった頃に少し触ってみたけど、いろいろややこしい感じがしたのですぐやめてしまった経験有り