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

[森川拓男，ITmedia]

　ここでは日時などの保存値を取得している。ただし、別に複雑な処理をしているわけでなく、ここで取得するのはあくまでも実行しているPCの時間情報だけだ。

リスト3■JavaScriptファイル「MechanismGadget.js」の「initialize Method」部

〜前略〜
		var year = m_module.getPreference("Year");
		var month = m_module.getPreference("Month");
		var date = m_module.getPreference("Date");
		var cycle = m_module.getPreference("Cycle");
〜後略〜

　続くリスト4に挙げた「MechanismGadget.js」の「dispose Method」部は、データのリセット処理を行う部分だ。メイン処理ではないが、これの手順により、一から入力をやり直したい場合などに対応することが可能となっている。

リスト4■JavaScriptファイル「MechanismGadget.js」の「dispose Method」部

	/****************************************	
	** dispose Method
	****************************************/
	this.dispose = function(p_blnUnload)
	{
	    // メンバ変数をnullにする
	    m_this = null;
	    m_el = null;
	    m_args = null;
	    m_module = null;
	    // イベントをデタッチ
	    if(m_btnGo != null)
	    {
	        m_btnGo.detachEvent("onclick", OnGo);
	        m_btnGo = null;
	    }
	    if(m_btnBack != null)
	    {
	        m_btnBack.detachEvent("onclic", OnBack);
	        m_btnBack = null;
	    }
	    // 常にベースオブジェクトの破棄(dispose)を最後に呼び出す。
	    East.GadgetProject.DietGadget.MechanismGadget.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
	}
	East.GadgetProject.DietGadget.MechanismGadget.registerBaseMethod(this, "dispose");

　最後に挙げるリスト5の「Private Methods」部が、本ガジェットのメインプログラム部分だ。最後の月経開始日と月経の平均周期をプルダウンから選択し、現在の状況を表示するものだ。なお、ここでは要所を引用しているため、オリジナルのものはダウンロード後に参照すればよいだろう。

　起動時に表示される月経開始日は、PCでの現在日になっている。平均周期は24日になっているが、プルダウンから20日〜40日の偶数日が選択できるようになっている。

リスト5■JavaScriptファイル「MechanismGadget.js」の「Private Methods」部

	/****************************************
	** Private Methods
	****************************************/
	// 進むボタンクリック
	function OnGo()
	{
	    // 値を取得
	    var year = document.getElementById("ddl_year");
	    var month = document.getElementById("ddl_month");
	    var date = document.getElementById("ddl_date");
	    var cycle = document.getElementById("ddl_cycle");
	    // 結果画面を表示
	    checkMechanism(year.value, month.value, date.value, cycle.value);
	}
〜中略〜
	// "年"ドロップダウンの作成
	function createYearDropDowonList(year)
	{
	    var string = "<select id='ddl_year' size='1'>";
	    for(var i = (year-1); i<=(year+1); i++)
	    {
	        if(i == year)
	            string += "<option selected='selected' value='"+ i + "'>";
	        else
	            string += "<option value='"+ i + "'>";
	        string += i;
	        string += "</option>";
	    }
	    string += "</select>年";
	    return string;
	}
	// "月"ドロップダウンの作成
	function createMonthDropDownList(month)
	{
	    var string = "<select id='ddl_month' size='1'>";
	    for(var i = 1; i<=12; i++)
	    {
            if(i == (month+1))
	            string += "<option selected='selected' value='"+ i + "'>";
	        else
	            string += "<option value='"+ i + "'>";
	        string += i;
	        string += "</option>";
	    }
	    string += "</select>月"; 
	    return string;
	}
	// "日"ドロップダウンの作成
	function createDateDropDownList(date)
	{
	    var string = "<select id='ddl_date' size='1'>";
	    for(var i = 1; i<=31; i++)
	    {
            if(i == date)
	            string += "<option selected='selected' value='"+ i + "'>";
	        else
	            string += "<option value='"+ i + "'>";
            string += i;
	        string += "</option>";
	    }
	    string += "</select>日 <br/>";
	    return string;
	}
	// "平均周期"ドロップダウンの作成
	function createCycleDropDownList()
	{
	    var string = "<select id='ddl_cycle' size='1'>";
	    for(var i = 20; i<=40; i++)
	    {
            if(i == 24)
	            string += "<option selected='selected' value='"+ i + "'>";
	        else
	            string += "<option value='"+ i + "'>";
            string += i;
	        string += "</option>";
	        i++
	    }
	    string += "</select>日  ";
	    return string;
	}
〜以下、略〜