WebページはWebアプリへ――Liveガジェット「目標体重グラフ」レビューWindows Liveが魅せる次世代マッシュアップ(2/4 ページ)

» 2007年02月13日 08時00分 公開
[森川拓男,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.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を呼び出し、プログラム内で使われる各種変数の設定を行っているのだ。

リスト2■JavaScriptファイル「WeightGadget.js」

// ガジェットの名前空間を登録
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.

注目のテーマ