このLiveガジェットの主な動作は次の通りだ。ソースを見る前に動きを覚えておこう。
<?xml version="1.0"?>
<rss version="2.0" xmlns:binding="http://www.live.com">
<channel>
<!-- ガジェットの名前を指定 -->
<title>目標体重を目指せ</title>
<!-- ガジェットの簡単な説明 -->
<description>目標体重と現在の体重をグラフで可視化します</description>
<!-- ガジェットの既定のロケールを指定 -->
<language>ja</language>
<!-- ガジェットを定義する JavaScript オブジェクトを指定 -->
<binding:type>East.GadgetProject.DietGadget.WeightGadget</binding:type>
<item>
<!-- ガジェットのコードが格納される JavaScript ファイルを指定 -->
<link>WeightGadget.js</link>
</item>
<item>
<!-- ガジェットのスタイルが格納される css ファイルを指定 -->
<link binding:type="css">css/stylesheet.css</link>
</item>
</channel>
</rss>
上記のリスト1で注目すべきは、Liveガジェットの名前やそのガジェットの説明、そして実際に利用するスクリプトとスタイルシート指定が定義されている点だ。このため、マニフェストファイルはこれをテンプレートにして要所を書き換えるだけでほかのLiveガジェットに応用できる。
これを受けて、プログラム本体である「WeightGadget.js」を見てみよう。大きく4分割できることが分かる。
リスト2に引用した冒頭部分では、まずガジェットの名前空間を登録し、次にコンストラクタを定義している。実行されるプログラムコードをクラスとして構成しているが、このクラスをコンストラクタとして定義する必要がある。つまり、ここが“スクリプトを実行するための肝となる部分”である。なお、定義するコンストラクタは、前述した「gadget.xml」内で定義したJavaScriptオブジェクトと同じにする必要がある。そしてinitializeBaseを呼び出し、プログラム内で使われる各種変数の設定を行っているのだ。
// ガジェットの名前空間を登録
registerNamespace("East.GadgetProject.DietGadget.WeightGadget");
// ガジェットのコンストラクタを定義(XMLでの名前に一致する必要あり)
East.GadgetProject.DietGadget.WeightGadget = function(p_elSource, p_args, p_namespace)
{
// まず、initializeBaseを呼び出す
East.GadgetProject.DietGadget.WeightGadget.initializeBase(this, arguments);
// 各種情報の保存
// 自分自身
var m_this = this;
// DOMオブジェクト
var m_el = p_elSource;
// argsオブジェクト
var m_args = p_args;
// モジュールオブジェクト(保存用)
var m_module = p_args.module;
// ボタン
var m_btnSet = null;
var m_btnReg = null;
var m_btnReset = null;
// 配列
var m_map = new Object();
// 配列index
var m_mapInd = new Array();
続くリスト3に挙げる「initialize Method」部では、初期化が行われる。
Copyright © ITmedia, Inc. All Rights Reserved.