Yahoo!ウィジェットエンジン

Yahoo!ウィジェットエンジン
すべてを自由自在に
ウィジェット作成方法
1. はじめに
このチュートリアルでは、XML と JavaScript を使用して簡単なウィジェットを作成したり、
それを Yahoo!ウィジェットギャラリーに投稿したりするための方法について記述していきます。
まず必要となるツール、Macintosh と Windows それぞれの環境でのウィジェットのパッケージ
方法を取りあげ、XML の書き方の概要を説明してから Yahoo!ウィジェットエンジンで使われる
JavaScript を学び、最後にウィジェットを Yahoo!ウィジェットギャラリーに投稿する際の手順
を説明します。
このチュートリアルにおいて、JavaScript のすべてについて説明することはできません。この
チュートリアルを読んだ後、JavaScript に関する書籍などを読むことで、実際に掘り下げて配
列や”for”/”while”のループ、正規表現、その他を使用した、さらに高度なウィジェットを作成す
ることができます。
このチュートリアルに出てくる３種類のボックスについて説明します。
これは説明／指示ボックスです。緑のボックス内に文章があったら、その指示に従ってください。
これはコードボックスです。使用できる XML または JavaScript の一部が書いてあります。このボッ
クスが緑のボックスの中にある場合は、適切なタイミングでコードを使用してください。
これは重要な情報であることを現すボックスです。この中には起こりそうな問題を避けるため、従う
べき指示やアドバイスが書かれています。この中にコードボックスがある場合は、自分のコードがボ
ックス内のものと必ず同じになるように特別の注意が必要です。
Yahoo!ウィジェット
ウィジェット作成方法
-1-
2. 必要なツール
2.1. Yahoo!ウィジェットエンジン
ウィジェットを作成するにはまず、Yahoo!ウィジェットエンジンが必要になります。チュート
リアルに入る前に、まずはhttp://widgets.yahoo.co.jp/download/ からダウンロードを行ってくださ
い。
2.2.
テキストエディタ
次に必要になるのがテキストエディタです。Windowsではメモ帳、Macならテキストエディッ
トが使えますが、必ずプレーンテキストだけを使わなければなりません（フォーマット＞標準テ
キストにするを選ぶだけです）。とはいえ、コードの記述を素早く効率よく行うには、使いなれ
たテキストエディタを使用することをお勧めします。テキストエディットの場合、初期設定では
リッチテキスト形式での保存が設定されているので、代わりのテキストエディタを入手したほう
がよいかもしれません。
2.3. イメージエディタ
ウィジェットの作成に当たっては、イメージエディタも重要なツールのひとつとなります。以下
に挙げた市販のイメージエディタの他にも、GIMP（ http://www.gimp.org/ ）という無料のイ
メージエディタも存在します。最もよく使うことになるフォーマット、PNGファイルで保存が
できることが、イメージエディタを選ぶ際の条件となります。
• Photoshop
http://www.adobe.com/jp/products/photoshop/index.html
• Paint Shop Pro
http://www.corel.jp/product/paintshoppro/
• Painter
http://www.corel.jp/product/painterfamily.html
• Macromedia Fireworks
http://www.adobe.com/jp/products/fireworks/
2.4. 参考文献とウィジェット
最後に、参考文献などいくつか補足となるものが必要になります。このチュートリアルはもちろ
んのこと、他にもYahoo!ウィジェットエンジンリファレンスマニュアルも重要な参考文献とな
ります。
（最新のものはいつでも http://widgets.yahoo.co.jp/workshop/ で入手できます。このペ
ージでは、ほかにもウィジェット開発の手助けになるツールやドキュメントを随時公開していく
予定にしています。）JavaScriptに関する書籍も役に立つと思われます。David Flanagan著・
村上列/監訳安藤進/訳の”JavaScript ”は、JavaScriptに関する定番書籍のひとつです。
また、上記の書籍など以外にも、ウェブ上にはJavaScriptに関する様々な情報が存在します。検
Yahoo!ウィジェット
ウィジェット作成方法
-2-
索エンジンで、”JavaScript 資料”などのキーワードで検索してみることをお勧めします。
WindowsとMac上で動作するウィジェットコンバーターがあります。ウィジェットコンバータ
ーは、flat-file形式のウィジェットを作成することが簡単にできます。
（flat-file形式については、
このページ以降に詳細な説明があります。)もちろん、ZIP形式のウィジェットも作成可能です。
また、逆に、ウィジェットをフォルダに展開して、ウィジェットの中身を参照することもできま
す。ウィジェットコンバーターは、ウィジェットギャラリー(http://widgets.yahoo.co.jp/gallery/)
からダウンロードすることができます。
注意：Yahoo! JAPANは第三者のウェブサイトの内容、そのプログラムの内容、動作について一切責任を負
いません。各サイトを訪問し、プログラムは自己責任の元ご利用ください。
Yahoo!ウィジェット
ウィジェット作成方法
-3-
3. ウィジェットの構成要素
まず、ウィジェットには、3つのフォーマットが存在します。現在最も一般的なウィジェットの
フォーマットはZIP形式です（ZIPアーカイブの拡張子を、 .widgetに変更したファイルです）。
これに加えて一般的になりつつあるのがflat-file形式です。flat-file形式は、ウィジェットの起動
時間を短くできるほか、ウィジェット自体にデジタル署名を付加できます。 3つ目のフォーマ
ットはMacにおいて時折使用されていましたが、今はほとんど使用されていません。
ウィジェットの中身を見るには、ウィジェットコンバーターを使ってウィジェットをフォルダ形
式に変換してください。ドラッグアンドドロップで簡単に変換できます。ウィジェットは多くの
場合、単純なzipアーカイブです。この場合は、拡張子を.widgetから .zipに変更して、zipを扱
うことができる圧縮・解凍ツールで展開して、ウィジェットの中身を見ることができます。
Macをお使いの方：
Macでウィジェットの中身が見たければ、コントロールボタンを押しながらファインダー内のウ
ィジェットをクリックし、”Show Package Contents（パッケージの内容を表示）”を選びます。
(flat-file形式のウィジェットは、この方法は使用できません。ウィジェットコンバーターを使用
してください。)
ウィジェットの中身を見てみましょう。すべてのウィジェットに共通してあるの
は”Contents”というフォルダです。このフォルダには.kon ファイルが入っています。通常こ
の中には画像を保存するフォルダも含まれていて、Mac で開発したウィジェットには 1 つ以
上の.js ファイルと Info.plist ファイルが含まれる場合もあります（開発者の選択によ
る）。.scpt ファイルが含まれる場合もあります。
Yahoo!ウィジェット
ウィジェット作成方法
-4-
3.1. 主なファイルタイプ
.kon
ウィジェットのメインコードを含みます。ユーザーがウィジェットをダブルクリックすると、
Yahoo!ウィジェットエンジンはこのファイルを最初に探し、このファイルの中を解析します。
このファイルにはプリファレンス、バージョン情報の表示のための設定、そして、初期画像位置
や、テキストフィールドなどの参照のためのコード（XML：eXtensible Markup Language）
が入っています。.konファイルにはウィジェットの機能を構成しているコードのほとんど（JS：
JavaScript）が含まれますが、とくに複雑なウィジェットの場合、JavaScriptは.jsファイルに
保存されていることもあります。逆にコードをすべて.konファイルに保存することもできます。
.js
このファイルがある場合、ここにはウィジェットを動かすのに必要なJavaScriptのコードのほと
んどが入っています。このファイルにXMLは含まれず、JavaScriptのみが使用されます。複雑
なウィジェットになると、複数存在することもあります。
Info.plist
XMLを利用するもう1つのファイルですが、Mac OS Xがユーザーに表示するウィジェットのバ
ージョン情報を得るのに使われます。このファイルはWindowsでは使われません。Mac OS Xで
も、ウィジェットがクロスプラットフォーム（Windows）のバンドルフォーマットの場合は無
視されます。
.scpt
AppleScriptコマンドを含むAppleScriptのドキュメントです。AppleScriptコマンドの多くが含
まれていることが多く、このファイルがある場合、スクリプトがかなり複雑で、
.jsや.conファイルの複雑さを緩和するためにこのファイルが置かれていると考えられます。この
ファイルがある場合、ウィジェットはMac上でのみ動作する可能性があります。
以上が最も一般的なファイルタイプとなります。
Yahoo!ウィジェット
ウィジェット作成方法
-5-
XML の要点
さあ、始めましょう。
ウィジェットの中身を参照するために、ウィジェットコンバーターを使用して、ウィジェットを
展開してください。Yahoo!オフィシャルウィジェットは、すべてflat-file形式を使用しています。
ウィジェットコンバーターにウィジェットをドラッグアンドドロップして、変換する形式にフォ
ルダを選び、変換ボタンを押します。すると、ウィジェットと同じ場所にフォルダができます。
マイドキュメントの”My Widgets”フォルダにある”CPU ポータル.widget”を見ていきましょう。
テキストエディタで、CPU ポータル.widget/Contents/CPU.kon を開いてください。
HTMLに詳しい方であれば、XMLの記述方法がHTMLのそれによく似ていることが分かるでし
ょう。ただし、XMLでは大文字・小文字は、厳格に区別されるので注意が必要です。CPUポー
タルの中で使われているとおりに、小文字・大文字を区別して同じように書いてください。もし、
あなたがXMLにあまり詳しくなくても大丈夫です。これから説明していきます.
まず、XML宣言が書かれているいちばん最初の行から見ていきましょう。XML宣言は、このフ
ァイルがXMLであるということを示します。また、使用しているXMLのバージョンとエンコ
ーディングが書かれています。Yahoo!ウィジェットエンジンは、XML宣言からこのファイルが
XMLであることを理解し、上述のXMLのファイルの情報を読み込みます。
<?xml version="1.0" encoding="UTF-8"?>
指定したファイルのエンコーディングは実際に使用しているエンコーディングと一致し
なくてはなりません。例えば、encoding="UTF-8"と書いているが、実際に使用している
エンコーディングがShift_JISなどを使用して差異がある場合、ウィジェットは文字化けす
るか、もっと悪い場合は、エラーが発生し、まったくロードされないかもしれません。最
も使用に適したエンコーディングはUnicodeのUTF-8やUTF-16です。お使いのテキストエデ
ィタのヘルプなどを参考にして、サポートされているエンコーディングをご確認くださ
い。別のウィジェットからテキストをコピーした場合は、そのエンコードが自分の使おう
としているものであることを確認してください。
以下の例では、その他のXMLタグがいくつか見られます。注意して見ると、次の行では<widget>
タグを使ってYahoo!ウィジェットエンジンにウィジェットのコードの開始を伝えています。
<widget>タグでは、XML属性、もしくは、XML要素を使用して、このウィジェットが必要とす
るYahoo!ウィジェットエンジンの最小バージョンや、このウィジェット自体のバージョンを
Yahoo!ウィジェットエンジンに伝えることができます。.konファイルのいちばん最後にも
Yahoo!ウィジェット
ウィジェット作成方法
-6-
</widget>タグがあり、このXMLタグはウィジェットのコードが最終行であることをYahoo!ウィ
ジェットエンジンに伝えます。
<widget version="1.6.7" minimumVersion="3.1">
[...]
XML タグには、開始タグと終了タグがあります。例えば<image>タグ(開始タグ)があった場合、これに対応する
</widget>
</image>タグ(終了タグ)で閉じなければなりません。以下ように、XML タグは以下のように入れ子にすることも
できます（HTML でも XML でもこれは必要です）
。
<widget>
<image>
<src>Images/My Great Image.png</src>
<hOffset>74</hOffset>
<opacity>85%</opacity>
</image>
</widget>
あるいは、属性を特定するのに次のような書き方をすることで、XML タグを“/>”で終了させることもできます。
<widget>
<image
src="Images/My Great Image.png"
hOffset="74"
opacity="85%"
/>
</widget>
フォーマットを混ぜたり対応させたりすることもできます（この場合”/>”は使えません）
。
<widget>
<image src="Images/My Great Image.png">
<hOffset>74</hOffset>
<opacity>85%</opacity>
</image>
</widget>
開始したタグは必ず正しく閉じる必要があることに注意してください。ウィジェットを動かしたときに分かりに
くいエラーが出ることがあります。XML タグに 1 文字でもタイプミスがあれば、Yahoo!ウィジェットエンジンは
正しくそのコードを処理できません。
Yahoo!ウィジェット
ウィジェット作成方法
-7-
ウィジェットのタグの種類はそれほど多くありません。あるタグは別のタグの中に入れ子にす
ることができます。例えば<image>タグの中には通常<src>タグがあり、その画像の位置が書か
れています。また別の例では<text>タグ中には<font>や<data>タグがあり、テキストオブジェ
クトに使用するフォントや表示したい文字列のデータが書かれています。ウィジェットでよく使
用するタグの例をいくつか以下に挙げます。
<?xml version="1.0" encoding="(自分の.kon fileのエンコード)"?>: XML宣言。XMLのバージョンとエン
コーディングを伝える。
<widget>: 必須タグ。Widgetコードの開始
<debug>:デバッグウィンドウの表示/非表示。設定により、詳細情報の表示も可能。
<version>: ウィジェットのバージョンを定義
<minimumVersion>: ウィジェットが動作するのに必要なYahoo!ウィジェットエンジンの最小
のバージョンを定義。
<window>: 必須タグ。表示するウィジェットの大きさを定義。ウィンドウの表示領域外には、
何も表示されません。
<name>: ウィンドウ名を定義。JavaScriptでの操作に使用する。
<title>: ウィンドウのタイトルを定義。Ctrl+右クリックでウィジェット名を表示する
のに使用。ウィジェット名として、ユーザーが参照する。
<height>: ウィンドウの高さをピクセルで定義。
<width>: ウィンドウ幅をピクセルで定義。
<visible>: ウィジェットを表示するかどうかをブール値（1か0、trueかfalseも代わり
に使える）で定義。ウィジェットを表示前にデータを取ってきたり、ウィジ
ェットの初期化処理を実行する必要があるときに便利です。
<image>: ウィジェット内での画像の使用を定義。
<name>: 画像の名前を定義。JavaScriptでの操作に使用する。
<hOffset>:画像のオフセット値（ウィンドウ左上端から水平方向）をピクセルで定義。
<vOffset>: 画像のオフセット値（ウィンドウ左上端から垂直方向）をピクセルで定義。
<hRegistrationPoint>: 画像の配置・回転のための基本となるX軸座標をピクセルで
定義。デフォルトは0（画像左側）
<vRegistrationPoint>: 画像の配置・回転のための基本となるY座標をピクセルで定
義。デフォルトは0（画像上端）
<rotation>: 画像を回転させる角度を定義。
<opacity>: 0∼255の値を使って画像の透過度を定義。百分率の値も使用可。
<onMouseDown>: イメージオブジェクト内でマウスボタンが押されたときに実行
される動作を定義するのに使用。
<onMouseUp>: イメージオブジェクト内でマウスボタンを離したときに実行される
動作を定義。OnMouseDownの動作より優先する。
<text>: ウィジェット内のテキスト使用を定義。
Yahoo!ウィジェット
ウィジェット作成方法
-8-
<name>: テキスト名を定義。JavaScriptでの操作に使用する。
<data>: テキストの内容を定義
<hOffset>:テキストのオフセット値（ウィンドウ左上端から水平方向）をピクセルで
定義。<alignment>タグの影響を受ける。
<vOffset>:テキストのオフセット値（ウィンドウ左上端から垂直方向）をピクセルで
定義。上端ではなく、テキストのベースラインからのオフセットとなる。
<alignment>: "left", "center", "right"の値を使用し、テキストをどの位置から書き始め
るかを定義する。
<color>: 文字色を16進値で定義
（例：黒 #000000、紫 #8000FF、白 #FFFFFF）
<font>: テキスト内で使用するフォントを定義。
<size>: フォントサイズをポイントで指定
<opacity>: 0∼255の値を使って画像の透過度を定義。百分率の値も使用可。
<onMouseDown>: テキストオブジェクト内でマウスボタンが押されたときに実行
される動作を定義するのに使用。
<onMouseUp>: テキストオブジェクト内でマウスボタンを離したときに実行される
動作を定義。OnMouseDownの動作より優先する。
<textarea>: ウィジェット内でのテキストエリアの使用を定義。
<name>: テキストエリアの名前を定義。あとでJavaScriptでの操作に使用する。
<hOffset>: 画像のオフセット値(ウィンドウ左上端から水平方向)をピクセルで定義。
<alignment>タグの影響を受ける。
<vOffset>: 画像のオフセット値（ウィンドウ左上端から垂直方向）をピクセルで定義。
上端ではなく、テキストのベースラインからのオフセットとなる。
<lines>: 同時に表示する行数を定義するのに使用。
<columns>: スクロールなしで大丈夫なテキスト入力の最大幅を定義。
<color>: テキストカラーを16進値で定義。
（例：黒 #000000、バイオレット #8000FF、白 #FFFFFF）
<font>: 入力時に使用されるフォントを定義。
<bgColor>: テキストエリアの背景色を16進値で定義
（例：黒 #000000、バイオレット #8000FF、白 #FFFFFF）
<bgopacity>: 0∼255の値を使ってテキストエリアの背景色の透過度を定義。百分率
の値も使用可。
<onKeyPress>: キーが押されたときに実行される動作を定義。
<action trigger="(ここにイベントが入る)">: ウィジェットの初期ロード時、アクティブになっ
たとき、コンピュータがスリープから復帰したとき、設定変更されたときなどの
イベント発生時の処理を定義できる。異なるイベントごとに複数回定義が可能。
<about-box>: 画像オブジェクト内の<src>タグと同様だが、これはバージョン情報の表示のた
めのもの。複数回定義すると、バージョン情報も定義された回数分表示される。
Yahoo!ウィジェット
ウィジェット作成方法
-9-
”CPU.kon”をテキストエディタで見ていきます。そこで使われている様々なタグを見て、あ
なたがウィジェットを書くときの参考にしてください。いくつかのコードはすぐに役に立つ
はずです。一通り見終われば”CPU.kon”を閉じます。
ここで挙げたものの他にも、たくさんのタグが存在します。その他のオブジェクト、属性、アク
ショントリガーについて、ウィジェットで表示・実行できるものをもっとよく知りたい場合は
Yahoo!ウィジェットエンジンリファレンスマニュアルを確認してください。
Yahoo!ウィジェット
ウィジェット作成方法
- 10 -
JavaScript入門
どうやってすべてを動かすか？
前にあげた基本的なXMLのリストの中でまず注目するべきものは、すべての基本オブジェクト
に共通する<name>タグです。このタグで指定した名前を使用することで、JavaScriptからオブ
ジェクトの操作が可能になります。
JavaScriptはスクリプト言語として知られていて、実行するために、開発者はコンパイルする必
要がありません。他の数あるプログラミング言語に比べてずっとシンプルなので、一般のユーザ
ーが学ぶには最適の選択と言えます。
JavaScriptをXMLで定義したオブジェクトと一緒に動かすのに、重要となる要素は<name>タ
グだと述べました。<name>タグで指定した名前を使用して、オブジェクトを操作する方法はい
くつかありますが、まずは最も簡単なものから始めましょう。
name.attribute = 255;
これを分解して説明していきます。
・ピリオドの前の部分にオブジェクト名が入ります。これは英字で始まらなければなりませ
ん（小文字が適切です）
。名前に含んでよいのは英数字とアンダーバー（”_”の文字）のみ
となります。以下に並べた名前の一般的な命名方法はすべて使うことができます。作業し
ているオブジェクトを覚えていられるように、オブジェクトには簡単な名前を付けるのが
よいでしょう。

myGreatName79

my_great_name_79

mygreatname79
・上記コードのピリオド後の部分はオブジェクト属性です。”opacity”、”hOffset”、”font”な
どを入れて、ピリオド前で名付けたオブジェクトにそれぞれ属性を設定します。なお、
「Yahoo!ウィジェットエンジンリファレンスマニュアル」には属性の完全なリストが載っ
ています。
・名付けたオブジェクトの属性に対する値を割り当てるために”=”を書きます。
・コードの最後はオブジェクト属性に割り当てる値です。指定できる値には3種類あります。

ブール値−0か1、または、それぞれfalseとtrueで設定することも可能です。こちらの方
が読みやすいでしょう。

定数値(リテラル)−どんな数字も使用可。

文字列−このタイプの値は数字も文字も使用可能。この値を設定するときは、値をクォ
ーテーションマークで囲んでください。
Yahoo!ウィジェット
ウィジェット作成方法
- 11 -
全部理解できなくても焦ってはいけません。ここに挙げる例を見ると、理解しやすいでしょう。
sun.opacity = 145;
main_window.visible = true;
main_window.shadow = 0;
myText.data = "Hello, World!";
weatherinfo.tooltip = "今日は日光浴にいい日だね。";
colorChangedText.color = "#6C189C";
さぁ、次にいきましょう。上の例では、JavaScriptでオブジェクトの属性を変更しています。オ
ブジェクトの名前は、XMLの<name>タグを使ってすでに定義されているものとします。Yahoo!
ウィジェットエンジンが上記のコードを解析した時に、理解した内容を、それぞれ分かりやすく
日本語で書きなおしたものを下記に示します。
イメージオブジェクト”sun”の透過度を145/255または57％程度に変更。定数値使用。
ウィンドウオブジェクト”main_window”を表示する。ブール値使用。
ウィンドウオブジェクト”main_window”が影を表示しないように変更（Macのみ）。ブール値使用。
テキストオブジェクト”myText”を”Hello, World!”と表示するように変更。文字列使用。
テキストオブジェクト”weatherinfo”のツールチップを変更して”今日は日光浴にいい日だね。”と表示させる。文
字列使用。
テキストオブジェクト”colorChangedText”の色をロイヤルバイオレットに変更。文字列(16進フォーマット)使
用。
ご覧のとおり、オブジェクトの属性を変更するのは実際にとても簡単です。変更した内容を
Yahoo!ウィジェットエンジンは、すぐに解析して反映します。
[変数]
変数を定義して、あとから好きなように変数の内容を使用・変更することができます。変数とは
方程式の変数のようなものです。ただし、定数値（47、3.5などの数字）に加えて文字列やブー
ル値もその中に入れることができます。変数には”x”や”y”以外の名前も、もちろん付けられます。
変数もオブジェクトになるので、オブジェクト名と同様の規則が変数名にも当てはまります。
var literalValue = 83.4523;
var booleanValue = true;
var stringValue = "ここから、私の家が見えるよ。";
Yahoo!ウィジェット
ウィジェット作成方法
- 12 -
変数・属性に定数値を設定する場合、必要なら演算式を使うこともできます。もちろんその他の
変数やオブジェクト名も使えます。次の例では最後の行で、変数に文字列を入れる方法を紹介し
ています。
var foo1 = 83.4523 / 2;
var foo2 = (480 / 72) * (foo1 + 472.213);
foo1 = main_window.width + foo2;
textObject.data = "私の気まぐれの数字は " + foo1 / foo2 + ".";
Yahoo!ウィジェットエンジンが、すでに定義して保持しているシステム属性もあります。その
ほとんどは動的なもので、参照されるたびに情報は更新されます。ウィジェット内のシステム属
性とオブジェクト属性の唯一の違いは、システム属性のほとんどは設定不可能で、参照するだけ
と言う点です。しかし例外もあり、例えばsystem.volumeには0∼16の定数値を設定できます。
実際に見てみましょう。
image.opacity = system.cpu.idle * 2.55;
// 不透明度属性は255の中から選ぶ定数値。
// system.cpu.idleが返すのは0∼100の数字なので、その値を
// 2.55倍すれば不透明度の範囲をすべて使用できる。
// ところでこのように一行コメントが入れられるので、
// 説明やメモを入れるのに便利。
system.mute = true;
//コンピュータの音量をミュートにする。
// falseに設定するとミュート前のボリュームレベルに戻る。
Yahoo!ウィジェット
ウィジェット作成方法
- 13 -
はじめてのウィジェット
alert(“Hello, World”);
新しく学んだ知識を使っていきます。初めてのウィジェットを書いてみましょう。ここでは画像
は扱いません。
テキストエディタで”My First Widget.kon”と言う名前の新規ファイルを作り、次のコードを記入して
ください。
<?xml version="1.0" encoding="UTF-8"?>
<widget>
<debug>on</debug>
<window>
<name>main_window</name>
<title>はじめてのウィジェット</title>
<height>30</height>
<width>300</width>
<visible>true</visible>
</window>
<text>
<name>myText</name>
<color>#FF0000</color>
<size>18</size>
<alignment>left</alignment>
<vOffset>25</vOffset>
<hOffset>2</hOffset>
</text>
<timer>
<name>timer</name>
<interval>1</interval>
<ticking>true</ticking>
<onTimerFired>
var cpuLoad = system.cpu.activity;
myText.data = cpuLoad + "% CPU load";
myText.opacity = cpuLoad * 2.55;
</onTimerFired>
</timer>
</widget>
Yahoo!ウィジェット
ウィジェット作成方法
- 14 -
まず、コードのインデントに注目してください。コードの読みやすさを保つために、必ずインデ
ントが必要です。Tabキーを使うのがいちばん簡単でよい方法ですが、スペースでもよいでしょ
う。エディタによってはコードを自動的にインデントするものもあるので、これならtabキーを
何度も打つ時間を省いてコードを書く時間に費やせます。
このコードはタイマーの”interval”タグで設定されたとおり、1秒に1回実行されます。頻度を増
やしたり減らしたりしたければ、変更できます。
次に挙げているのはonTimerFiredタグのコードの簡単な説明です。これなら何が起こっている
かもう少し簡単に見ることができるでしょう。
“cpuLoad”という新しい変数を作成し、現在のCPU使用率を入力する。
“myText”のデータ(表示内容)に、cpuLoad(CPU使用率)と”％ CPU load”を表示するように変更する。
“myText”の不透明度を変更し、cpuLoadの変数の値と同期させる。
“MY First Widget.kon”を保存し、ギアアイコン（Mac）またはタスクトレイアイコン（Windows）で”
ウィジェットを開く”を選択、”My First Widget.kon”を保存したフォルダに行き、それを開きます。
注意点: CPU 使用率が高くない場合、ウィジェットが見えないかもしれません。その時は、ビデオや
音楽を再生したり、もしくは処理が重いアプリケーションを実行して CPU 使用率を高くしてくださ
い。そうすれば、ウィジェットが見えるはずです。
しかしCPU負荷があまり高くない場合、ウィジェットは表示されません。どうやって直したら
よいでしょう。
ここで、 if…else 宣言文の登場です。 if…else 文を書くことで、コードが多少複雑になりま
すが、ゆっくり見ていきましょう。
if (cpuLoad > 80)
{
myText.data = "コンピューターはかなりハードに動いていますよ。";
}
else
{
myText.data = "コンピューターは大して何もしていません。仕事をさせましょう！";
}
Yahoo!ウィジェット
ウィジェット作成方法
- 15 -
上の例のように書く人もいますが、 if…else 文を短くするために、次のように書いてもかまい
ません。
if (cpuLoad > 80) {
myText.data ="コンピューターはかなりハードに動いていますよ。";
} else {
myText.data ="コンピューターは大して何もしていません。仕事をさせましょう！";
}
どのようにても問題ありません。どちらでも好きな方を使ってください。繰り返しになりますが、
コードのインデントはそろえるようにしてください。これもウィジェットが正しく動作するかど
うかとは関係はありませんが、コードを適切にインデントした方が、かなり読みやすくなります。
ともかく、コードを直していきましょう。新しいコードは以下の通りです。
Yahoo!ウィジェット
ウィジェット作成方法
- 16 -
“My First Widget.kon”を次のように変更・保存し、デバッグウィンドウの”Reload”をクリックしてく
ださい。。
<?xml version="1.0" encoding="UTF-8"?>
<widget>
<debug>on</debug>
<window>
<name>main_window</name>
<title>はじめてのウィジェット</title>
<height>30</height>
<width>300</width>
<visible>true</visible>
</window>
<text>
<name>myText</name>
<color>#FF0000</color>
<size>18</size>
<alignment>left</alignment>
<vOffset>25</vOffset>
<hOffset>2</hOffset>
</text>
<timer>
<name>timer</name>
<interval>1</interval>
<ticking>true</ticking>
<onTimerFired>
<![CDATA[
var cpuLoad = system.cpu.activity;
myText.data = cpuLoad + "% CPU load";
if (cpuLoad < 40)
{
myText.opacity = 102;
}
else
{
myText.opacity = cpuLoad * 2.55;
}
]]>
</onTimerFired>
</timer>
</widget>
これでウィジェットをいつも表示するようにはなります。JavaScriptをXMLコメントタグ
(<![CDATA[ … ]] )で囲んだ点に注意してください。”cpuLoad < 40”の記号”<”をYahoo!ウィジ
ェットエンジンのXMLパーサーが、このコードを読んだときに、別のXMLタグが挿入されたと
Yahoo!ウィジェット
ウィジェット作成方法
- 17 -
思ってエラーにしてしまわないようにするために必要です。
最初のバグが直りました。次ぎは、このウィジェットに機能を追加してみましょう
ユーザーによるカスタマイズ機能の追加
今のところ作成中のウィジェットは基本的にテキストのみですが、やはりユーザーが自分の好み
に合わせて何か変更できるといいものです。それをやってみましょう。
プリファレンスは、設定に関連するタグと一緒に<preference>タグをコードに追加するだけで
できます。プリファレンスの追加方法についての詳細については、Yahoo!ウィジェットエンジ
ンリファレンスマニュアルを参照してください。
次にあるのはポップアップメニューのプリファレンスの一例です。ここにあるのは、
continentSelectorと名前が付いたプリファレンス（これをあとからJavaScriptから使用するこ
とができます）、プリファレンスの左側にタイトルが表示されます。プリファレンスでは、プリ
ファレンスの種類(この場合は、ポップアップ)、ポップアップで選択できるオプションのすべて、
プリファレンスを最初に開いたときのデフォルトで選択されているオプション、それとプレファ
レンスの簡単な説明を設定することができます。
<preference>
<name>continentSelector</name>
<title>地域の選択:</title>
<type>popup</type>
<option>Africa</option>
<option>Antarctica</option>
<option>Asia</option>
<option>Australia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
<defaultValue>North America</defaultValue>
<description>メニューから、あなたの地域を選択してください。</description>
</preference>
今つくっているウィジェットに、いくつか異なる種類のプリファレンスを追加してみましょう。
色選択はテキストの表示色に使えます、更新間隔設定も追加すれば、ユーザーがどのくらいの頻
Yahoo!ウィジェット
ウィジェット作成方法
- 18 -
度でウィジェットのCPU使用率を更新したいか決められるようになります。
これを実行するためのコードは以下の通りです。
このコードを Widget タグのどこかに追加します。別のタグの入れ子にしてはいけません。
<preference>
<name>textColorPref</name>
<title>テキストの色:</title>
<type>color</type>
<defaultValue>#FF0000</defaultValue>
<description>テキストの色を選択してください。</description>
</preference>
<preference>
<name>textFontPref</name>
<title>テキストのフォント:</title>
<type>font</type>
<defaultValue>Futura Medium</defaultValue>
<description>テキストで使用するフォントを選択してください。</description>
</preference>
<preference name="timerIntervalPref">
<title>更新する間隔:</title>
<type>slider</type>
<minLength>1</minLength>
<maxLength>15</maxLength>
<ticks>15</ticks>
<tickLabel>1</tickLabel>
<tickLabel>秒数</tickLabel>
<tickLabel>15</tickLabel>
<defaultValue>1</defaultValue>
<description>どのくらいの頻度でCPU使用率の情報を更新するか選択してください。</description>
</preference>
次のようなプリファレンスが出来上がりました：色（デフォルト赤）、フォント（ユーザーがイ
ンストールしたフォントならどれでも使用可）、タイマー間隔（各秒にチェックマークあるので、
ユーザーは選択してラベルをチェックすると設定した間隔が長いか短いか見ることができる）
。
しかしこれで完了ではありません。実際にこれらのプリファレンスをウィジェットにつなぎこん
で、プリファレンス変更時に実際に値を設定できるようにしなくてはなりません。
Yahoo!ウィジェット
ウィジェット作成方法
- 19 -
ここでは関数を使用しましょう。関数を使えばコードをコピー＆ペーストすることなく、複数の
場所で実行できるようになります。以下に例を示します。
function muteVolume()
{
system.mute = true;
}
そして関数を使いたいときは、このようにすればよいのです。
muteVolume();
変数を受け渡し、関数を呼び出したときに使用することもできます（引数といいます）
。関数に
使いたい変数を、カンマで区切って並べるだけなのでとても簡単です。非常に複雑な関数がある
場合、好きなだけたくさんの変数を定義することができますが、以下のサンプルコードでは、引
数は2つにとどめておきましょう。（この場合引数はvolumeToUseとmuteItです。）
function adjustVolume(volumeToUse, muteIt)
{
// 引数で渡された”muteIt”の値を、ここでチェックしています。
if (muteIt)
{
system.mute = muteIt;
}
system.volume = volumeToUse;
}
この関数を呼び出したいときは、受け渡す値をカンマで区切り、Yahoo!ウィジェットエンジン
が変数の境界を判断できるようにしておきます。
adjustVolume(14, false);
// ミュートを設定せず、ボリュームを14（16まで可能）に設定します。
この関数は第二引数のmuteItの値が渡されなくても、問題ないように書かれているため、こん
なことまでできてしまいます。以下の例の場合、渡す値は1つだけなので、カンマはありません。
var addedValue = 8
adjustVolume(6 + addedValue); // ボリュームを14に設定します。ミュートを設定しません。
上の例のように、別の関数から来た変数や出力結果を別の関数に受け渡すことができます。なお、
Yahoo!ウィジェット
ウィジェット作成方法
- 20 -
引数で渡す変数の型については、正しいかどうかを確認してください。例えば、関数が文字列を
受け取ることになっている場合、文字列を渡す必要があります。
Yahoo!ウィジェットエンジンにはJavaScript同様、組み込み関数もたくさんあります。そのほ
とんどは変数をいくつか渡す必要がありますが、その必要のないものもあります。Yahoo!ウィ
ジェットエンジン特有のすべての関数一覧は、Yahoo!ウィジェットエンジンリファレンスマニ
ュアルをご覧ください。
いくつかの例を示します。
alert("家が火事です。", "消防車を呼ぶ", "消防車を呼ばない");
print(unescape("This%20is%20some%20web%2Dready%20text%21"));
beep();
var textToSpeak = "コンピュータが話したがっています。何か言ってあげてください。";
speak(textToSpeak);
closeWidget();
次のコードをファイルの最後、</widget>タグのすぐ上に追加します。
<action trigger="onLoad">
function updateBehavior()
{
myText.font = preferences.textFontPref.value;
myText.color = preferences.textColorPref.value;
timer.interval = preferences.timerIntervalPref.value;
}
updateBehavior();
</action>
<action trigger="onPreferencesChanged">
updateBehavior();
</action>
ファイルを保存し、ウィジェットを再読み込みして新しいプリファレンスを試してください。
このコードを入れると、ウィジェットは起動またはプリファレンスが変更されるたびに、外観や
動作を更新します。
“updateBehavior()”の呼出しをコードに追加した点に注目してください。以前
Yahoo!ウィジェット
ウィジェット作成方法
- 21 -
は”updateBehavior”という関数を定義しただけでした。やはり使いたいときに関数を呼び出す
必要があったわけです。
また、ウィジェットにはすでに赤いテキスト、1秒の更新間隔という値がデフォルトで設定する
ように書かれてあるため、ユーザーが前回設定した変更が反映するため、ウィジェット起動時に
“updateBehavior()”を呼び出しています。
プリファレンスはウィジェットを閉じるときに自動的に保存されます。設定内容を保存する処理
は記述する必要がありません。
Yahoo!ウィジェット
ウィジェット作成方法
- 22 -
作品を共有する
ウィジェットができあがったら、他の人たちがこれを使って楽しめるように、パッケージしまし
ょう。ウィジェットを共有する前に、いくつかステップが残っています。
まず1つ目はデバッグウィンドウを表示しないようにすることです。これは<debug>off</debug>
で設定できます。
実際にウィジェットを開発しているのであれば、.konファイルと一緒にきっと画像や.jsファイル
などを追加したくなるでしょう。でも、こういったファイルを詰め込んだフォルダを配布するだ
けでは、ユーザーはどうしたらよいのか分かりません。ウィジェットファイルとしてパッケージ
化することで、これを解決できます。つまり、フォルダの中のファイルをパッケージ化して1つ
のファイルにするのです。するとユーザーは、このウィジェットのファイルをダブルクリックす
るだけで、ウィジェットを起動できるようになります。
パッケージ化に必要な作業は、すべての画像と.konファイル、その他ウィジェットに利用するも
のすべてを”Contents”フォルダに入れるだけです。
（ ”Contents”フォルダに入れるファイル名に
は全角文字を使わないでください。）そうしたらContentsフォルダを”My Great Widget”のよう
に、自分のウィジェットの名前を付けた別のフォルダに入れます。次にファイル名のあとに拡張
子.widgetを付け加えます。Windowsでは出ませんが、Macだと次のような警告が出ます。
この警告がまさに重要です。このまま”Add”をクリックします。すると、作成したフォルダはウ
ィジェットのアイコンに変わります。Macをお使いの場合はこのように作業します。
ウィジェットのパッケージ化について
ウィジェットをパッケージ化しましょう。
Yahoo!ウィジェット
ウィジェット作成方法
- 23 -
ウィジェットコンバーターは、WindowsとMac上で動作し、あなたが作成したウィジェットを
ZIP形式、flat-file形式のウィジェットにパッケージ化します。また、逆にウィジェットコンバ
ーターは、パッケージ化されたウィジェットをフォルダに展開することもできます。
ZIP形式のウィジェットは、圧縮するため、ウィジェットのサイズが小さくなります。ただし、
ウィジェットの起動時間がflat-file形式のウィジェットと比較して、少し余分にかかります。ま
た、ZIP形式のウィジェットは、デジタル証明書で署名することはできません。
flat-file形式のウィジェットの場合、あなたがデジタル証明書をもっていれば、ウィジェットに
署名できます。署名をすることによって、ウィジェットの作成者があなただということを証明で
きます。また、署名されて動作するウィジェットは、あなたが署名した以降に第三者に勝手に改
変されていないことを、ユーザーに保証することができます。ただしウィジェットのサイズは、
ZIP形式でパッケージ化するよりも少し大きくなります。また、Widget.extractFile()関数のよう
に、flat-file形式の時のみ使用する関数もありますので、注意してください。
変換する形式にフォルダを選択した場合は、ZIP形式やflat-file形式にパッケージ化されたウィ
ジェットをフォルダに展開することができます。
ウィジェットの変換処理は、サイズが大きいものについては数秒かかるものがありますが、ほと
んどの場合は、すぐに完了します。パッケージ化されたウィジェット、もしくはウィジェットに
必要なファイルを含んだフォルダをウィジェットコンバーターの「ここにファイルをドラッグ」
と書かれている部分にドラッグアンドドロップしてください。次に、変換する形式のポップアッ
プメニューから変換したい形式を選択してください。最後に変換ボタンを押下すれば、変換され
たファイルが、変換する前のファイルと同じフォルダ位置に作成されます。
Yahoo!ウィジェット
ウィジェット作成方法
- 24 -
Yahoo!ウィジェットギャラリーに投稿する
これまでのステップに従ってウィジェットが用意できたら、今度はYahoo!ウィジェットギャラ
リーに投稿するために、最後の作業に取り掛かります。
以下のような厳格なルールがあるので、投稿したものが作者に戻ってくることもあります(ほと
んどは常識内のものに過ぎませんが)。
・ウィジェットの機能はウィジェットの説明に記述されたものでなければならない。
・投稿したファイル（.widget）はユーザーがダウンロードできる状態のものでなければな
らない。
・ウィジェットの動作中、デバッグウィンドウを表示してはならない。（エラーによる場合
と<debug>オプションがonに設定されている場合どちらも。
）
・ウィジェットには作者が単独で所有しない著作権物、または使用を許可されていない著作
権物が含まれてはならない。
・ウィジェットにはYahoo!ウィジェットエンジンと共に画像、音声、Info.plistファイルが
含まれてはならない。（よく問題となるのは、Yahoo!ウィジェットエンジンの一部の文字
列がInfo.plistに入っているものや、ギア画像をGetty Imagesのライセンスなしでアバウ
ト・ボックスに使用したものです。）
・ウィジェットには画像､テキスト､音声など、不快となるものは一切含まれてはならない。
（Yahoo! JAPANが下す判断に基づきます。）
・ウィジェットはこのチュートリアルから直接作ったものではないこと。つまりこのチュー
トリアルで説明したものに何の機能も追加されていないウィジェットは受諾できない。
ウィジェットは以下のような特性を持つのが好ましいのですが、判断が厳しくなりすぎないよう
努めています。
・見た目がよいこと（スタイルのために重要）
・役に立つものであること（単なる娯楽目的も可）
・独自の機能を持っていること（ギャラリーにある他のウィジェットと差別化する）
Yahoo! JAPANはいかなる投稿もこれらの基準から大きく外れたものは拒絶する権利を有して
います。
あなたのウィジェットは以上の条件を満たしていますか？もしそうならばウィジェットをギャ
ラリーに投稿するために次にする必要があるのは、Yahoo! JAPAN IDの取得です。
Yahoo!ウィジェット
ウィジェット作成方法
- 25 -
Yahoo! JAPAN IDを取得したら、 http://widgets.yahoo.co.jp/gallery/ に行って”投稿する”をクリ
ックします。必要な情報を入力してウィジェットを投稿します。これですべて完了です！
Yahoo!ウィジェット
ウィジェット作成方法
- 26 -

Download Report