Yahoo!ウィジェットエンジン すべてを自由自在に ウィジェット作成方法
1. はじめに このチュートリアルでは、XML と JavaScript を使用して簡単なウィジェットを作成したり、 それを Yahoo!ウィジェットギャラリーに投稿したりするための方法について記述していきます。 まず必要となるツール、Macintosh と Windows それぞれの環境でのウィジェットのパッケージ 方法を取りあげ、XML の書き方の概要を説明してから Yahoo!ウィジェットエンジンで使われる JavaScript を学び、最後にウィジェットを Yahoo!ウィジェットギャラリーに投稿する際の手順 を説明します。
このチュートリアルにおいて、JavaScript のすべてについて説明することはできません。この チュートリアルを読んだ後、JavaScript に関する書籍などを読むことで、実際に掘り下げて配 列や”for”/”while”のループ、正規表現、その他を使用した、さらに高度なウィジェットを作成す ることができます。
このチュートリアルに出てくる3種類のボックスについて説明します。 これは説明/指示ボックスです。緑のボックス内に文章があったら、その指示に従ってください。
これはコードボックスです。使用できる 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のファイルの情報を読み込みます。
指定したファイルのエンコーディングは実際に使用しているエンコーディングと一致し なくてはなりません。例えば、encoding="UTF-8"と書いているが、実際に使用している エンコーディングがShift_JISなどを使用して差異がある場合、ウィジェットは文字化けす るか、もっと悪い場合は、エラーが発生し、まったくロードされないかもしれません。最 も使用に適したエンコーディングはUnicodeのUTF-8やUTF-16です。お使いのテキストエデ ィタのヘルプなどを参考にして、サポートされているエンコーディングをご確認くださ い。別のウィジェットからテキストをコピーした場合は、そのエンコードが自分の使おう としているものであることを確認してください。 以下の例では、その他のXMLタグがいくつか見られます。注意して見ると、次の行では<widget> タグを使ってYahoo!ウィジェットエンジンにウィジェットのコードの開始を伝えています。 <widget>タグでは、XML属性、もしくは、XML要素を使用して、このウィジェットが必要とす るYahoo!ウィジェットエンジンの最小バージョンや、このウィジェット自体のバージョンを Yahoo!ウィジェットエンジンに伝えることができます。.konファイルのいちばん最後にも
Yahoo!ウィジェット
ウィジェット作成方法
-6-
タグがあり、このXMLタグはウィジェットのコードが最終行であることをYahoo!ウィ ジェットエンジンに伝えます。
<widget version="1.6.7" minimumVersion="3.1"> [...] XML タグには、開始タグと終了タグがあります。例えば
タグ(開始タグ)があった場合、これに対応する タグ(終了タグ)で閉じなければなりません。以下ように、XML タグは以下のように入れ子にすることも できます(HTML でも XML でもこれは必要です) 。
<widget>
<src>Images/My Great Image.png 74 85% あるいは、属性を特定するのに次のような書き方をすることで、XML タグを“/>”で終了させることもできます。
<widget>
フォーマットを混ぜたり対応させたりすることもできます(この場合”/>”は使えません) 。
<widget>
74 85% 開始したタグは必ず正しく閉じる必要があることに注意してください。 ウィジェットを動かしたときに分かりに くいエラーが出ることがあります。XML タグに 1 文字でもタイプミスがあれば、Yahoo!ウィジェットエンジンは 正しくそのコードを処理できません。
Yahoo!ウィジェット
ウィジェット作成方法
-7-
ウィジェットのタグの種類はそれほど多くありません。 あるタグは別のタグの中に入れ子にす ることができます。例えば
タグの中には通常<src>タグがあり、その画像の位置が書か れています。また別の例ではタグ中にはやタグがあり、テキストオブジェ クトに使用するフォントや表示したい文字列のデータが書かれています。ウィジェットでよく使 用するタグの例をいくつか以下に挙げます。
: XML宣言。XMLのバージョンとエン コーディングを伝える。 <widget>: 必須タグ。Widgetコードの開始 <debug>:デバッグウィンドウの表示/非表示。設定により、詳細情報の表示も可能。 : ウィジェットのバージョンを定義 <minimumVersion>: ウィジェットが動作するのに必要なYahoo!ウィジェットエンジンの最小 のバージョンを定義。 <window>: 必須タグ。表示するウィジェットの大きさを定義。 ウィンドウの表示領域外には、 何も表示されません。 : ウィンドウ名を定義。JavaScriptでの操作に使用する。 : ウィンドウのタイトルを定義。Ctrl+右クリックでウィジェット名を表示する のに使用。ウィジェット名として、ユーザーが参照する。 : ウィンドウの高さをピクセルで定義。 <width>: ウィンドウ幅をピクセルで定義。 : ウィジェットを表示するかどうかをブール値(1か0、trueかfalseも代わり に使える)で定義。ウィジェットを表示前にデータを取ってきたり、ウィジ ェットの初期化処理を実行する必要があるときに便利です。 : ウィジェット内での画像の使用を定義。 : 画像の名前を定義。JavaScriptでの操作に使用する。 :画像のオフセット値(ウィンドウ左上端から水平方向)をピクセルで定義。 : 画像のオフセット値(ウィンドウ左上端から垂直方向)をピクセルで定義。 : 画像の配置・回転のための基本となるX軸座標をピクセルで 定義。デフォルトは0(画像左側) : 画像の配置・回転のための基本となるY座標をピクセルで定 義。デフォルトは0(画像上端) : 画像を回転させる角度を定義。 : 0∼255の値を使って画像の透過度を定義。百分率の値も使用可。 : イメージオブジェクト内でマウスボタンが押されたときに実行 される動作を定義するのに使用。 : イメージオブジェクト内でマウスボタンを離したときに実行される 動作を定義。OnMouseDownの動作より優先する。 : ウィジェット内のテキスト使用を定義。
Yahoo!ウィジェット
ウィジェット作成方法
-8-
: テキスト名を定義。JavaScriptでの操作に使用する。 : テキストの内容を定義 :テキストのオフセット値(ウィンドウ左上端から水平方向)をピクセルで 定義。タグの影響を受ける。 :テキストのオフセット値(ウィンドウ左上端から垂直方向)をピクセルで 定義。上端ではなく、テキストのベースラインからのオフセットとなる。 : "left", "center", "right"の値を使用し、テキストをどの位置から書き始め るかを定義する。 : 文字色を16進値で定義 (例:黒 #000000、 紫 #8000FF、 白 #FFFFFF) : テキスト内で使用するフォントを定義。 <size>: フォントサイズをポイントで指定 : 0∼255の値を使って画像の透過度を定義。百分率の値も使用可。 : テキストオブジェクト内でマウスボタンが押されたときに実行 される動作を定義するのに使用。 : テキストオブジェクト内でマウスボタンを離したときに実行される 動作を定義。OnMouseDownの動作より優先する。