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

[森川拓男，ITmedia]

リスト5■

	/****************************************
	** Private Methods
	****************************************/
	
	// セットボタンクリック
	function OnSetting()
	{
		var selectYear = document.getElementById("cmb_Year").value;
		var selectMonth = document.getElementById("cmb_Month").value;
		var selectDay = document.getElementById("cmb_Day").value;
〜中略〜
	
	// 登録ボタンをクリック
	function OnReg()
	{
		var inpWeight = document.getElementById("text_Inp").value;
		var resYear = document.getElementById("cmb_afYear").value;
〜中略〜
				//点削除
				removeGraph(resYear + resMonth + resDay);
				// 点描画
				drawGraph(height, width, resYear + resMonth + resDay);
				
〜以下、略〜

　さらにこのファイルの後半部分では、グラフ描画のための設定が見られる（リスト6）。このような記述には、それなりのノウハウが必要となってくるが、ソース公開されているため、気軽に編集をしてどのように動作が変化するのかを確認してみるとよい。

リスト6■

	// 初期グラフ作成
	function incGraph()
	{
		var incMap = m_module.getPreference("Map");
		var incIndex = m_module.getPreference("MapInd");
				
		if ((incIndex == "") || (incIndex == null))
		{
			return;
		}
		for (indCount = 0; indCount < incIndex.length; indCount++)
		{
			drawGraph(incMap[incIndex[indCount]][0], incMap[incIndex[indCount]][1], incIndex[indCount]);
		}
	}
〜以下、略〜

　そして、このメインプログラムが「gadget.xml」から呼び出され、表示装飾を定義しているのが「stylesheet.css」である。

「目標体重グラフ」を利用する

　「目標体重グラフ（Target Weight graph）」は、前述したようにとてもシンプルな動作のLiveガジェットだ。ソースだけを眺めていると理解できないものも、実際の動作と照らし合わせていけば理解度は高まる。

　例えば、結果表示グラフの横には「目標まであと○○kg」と、現状データからの算出で自動表示される。このため、使うユーザーからすれば毎日の体重を入力するだけでよいのが便利な点だろう。この処理はアイデアはもちろん、ツールを気に入ってもらうための肝になっていると考えられる。