周期から現状を知るアイデア――事例で知るLiveガジェット開発：Windows Liveが魅せる次世代マッシュアップ（2/4 ページ）

[森川拓男，ITmedia]

　このLiveガジェットの主な動作は次の通りだ。ソースを見る前に動きを覚えておこう。

最後の月経開始日と月経の平均周期をプルダウンから選択して、「チェック！」をクリックする

いまが「月経期」「卵胞期」「排卵期」「黄体期」の、どの状態なのかを自動的に計算して表示、ダイエットのアドバイスをしてくれる

リスト1■マニフェストファイル「gadget.xml」

<?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.MechanismGadget</binding:type>
    <item>
      <!-- ガジェットのコードが格納される JavaScript ファイルを指定 -->
    <link>MechanismGadget.js</link>
    </item>
    <item>
      <!-- ガジェットのスタイルが格納される css ファイルを指定 -->
    <link binding:type="css">./MechanismGadget.css</link>
    </item>
  </channel>
</rss>

　上記、リスト1の注目点は、Liveガジェットの名前や説明、そして実際に利用するスクリプトとスタイルシート指定を定義しているところだ。このため、マニフェストファイル自体は、これをテンプレートとして要所を書き換えるだけでほかのLiveガジェットに応用することが可能だ。

　これを受けて、プログラム本体である「MechanismGadget.js」を見てみよう。大きく4分割できることが分かる。

　「MechanismGadget.js」をリスト2として引用した冒頭部分では、まずガジェットの名前空間を登録し、次にコンストラクタを定義しているのが分かる。

　実行されるプログラムコードをクラスとして構成しているが、このクラスをコンストラクタとして定義しなければならない。つまり、ここが“スクリプト実行の核となる部分”なのだ。なお、定義するコンストラクタは、前述した「gadget.xml」内で定義したJavaScriptオブジェクトと同じにする必要がある。そしてinitializeBaseを呼び出して、プログラム内で使われる各種変数の設定を行っている。

リスト2■JavaScriptファイル「MechanismGadget.js」冒頭部

// ガジェットの名前空間を登録 
registerNamespace("East.GadgetProject.DietGadget.MechanismGadget");
// ガジェットのコンストラクタを定義(XMLでの名前に一致する必要あり)
East.GadgetProject.DietGadget.MechanismGadget = function(p_elSource, p_args, p_namespace)
{
    // まず、initializeBaseを呼び出す
	East.GadgetProject.DietGadget.MechanismGadget.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_btnGo = null;
	var m_btnBack = null;

　続くリスト3に挙げる「initialize Method」部は、初期化を行うところだ。