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

[森川拓男，ITmedia]

　なお、「Private Methods」部の冒頭部分には、周期の計算を行う部分がある（リスト6）。

リスト6■JavaScriptファイル「MechanismGadget.js」、「Private Methods」部の冒頭部分

〜前略〜
	    var rightNow = new Date();
	    var ret01Date = new Date(year, (month-1), date, 23,59,59,0);
	    var ret02Date = new Date(year, (month-1), date, 23,59,59,0);
	    var ret03Date = new Date(year, (month-1), date, 23,59,59,0);
	    var ret04Date = new Date(year, (month-1), date, 23,59,59,0);
	    ret01Date.setTime(ret01Date.getTime() + (86400000*6));
	    ret02Date.setTime(ret02Date.getTime() + (86400000*((cycle/2)-3)));
	    ret03Date.setTime(ret03Date.getTime() + (86400000*(cycle/2)));
	    ret04Date.setTime(ret04Date.getTime() + (86400000*cycle));
〜後略〜

　そして、それを受けて計算結果から表示される周期ごとのアドバイス画像を表示させる設定がされている（リスト7）。

リスト7■JavaScriptファイル「MechanismGadget.js」の画面表示指定部

〜前略〜
	// 画面作成（月経期/result01）
	function pageResult01(year, month, date, cycle)
	{
	    m_el.innerHTML = 
	    "<div id='Container'>" +
	    "<div id='Main'>" +
	    "<table width='0' border='0' cellspacing='0' cellpadding='0'><tr>" +
	    "<td id='Left'><img src='" + getAbsoluteUrl("images/message01.gif") + "' alt='' />" +
	    schedulDate(year, month, date, cycle) + 
	    "<img src='" + getAbsoluteUrl("images/result_img01.gif") + "' alt='' />" +
	    "</td>" +
	    "<td id='Right'>" +
        createCalender("RestComment") +
	    "<input type='image' id='btn_Back' src='" + getAbsoluteUrl("images/b_back.gif") + "'></td>" +
	    "</tr></table>" +
	    "</div>" +
	    "</div>";
	    
	    // コメントのスタイルを設定
	    var div_RestComment = document.getElementById("RestComment");
	    div_RestComment.className = "RestComment";
	}
〜後略〜

　これらリスト2〜7で触れたメインプログラムは、前述のようにマニフェストファイル「gadget.xml」から呼び出され、表示装飾を定義するのがスタイルシートファイルである「MechanismGadget.css」だ。

　このように、LiveガジェットはWebページと同じようなスタイルで構成されている。

「女性周期でダイエット」は応用可能なアイデアの1つ

　「女性周期でダイエット(Monthly Cycle Diet for woman)」は、前述したように実にシンプルな動作のLiveガジェットになっている。ソースだけでは理解できなくても、実際の動作と照らし合わせることで理解度は高まるはずだ。

　女性の生理（月経）周期を計算設定することがポイントであり、現在はいったいどの周期にあるのかを表示するのが、このLiveガジェットの目的である。この周期（サイクル）の処理を利用すれば、別の事例にも応用することが可能だ。この仕組み自体は単純なものなので、ぜひ挑戦してほしい。