キラーガジェット登場はアプリ業界を再編――事例で見るLiveガジェット：Windows Liveが魅せる次世代マッシュアップ（3/4 ページ）

[森川拓男，ITmedia]

　リスト3に引用したのは、入力チェック動作。それが実際に動作したときの画面も続いて紹介するので、見比べてほしい。

リスト3■「CountdownGadget.js」の一部、入力チェック部

		var dateNow = new Date();
		var inpDate = new Date(m_selectYear, m_selectMonth - 1, m_selectDay, m_selectHour, m_selectMin);
		
		if (dateNow >= inpDate)
		{
			//	現在日時以降を設定してください。
			alert("Please set the future date.");
		}
		else if (m_displayText.trim() == "")
		{
		    //	文字を設定してください。
			alert("Please set the future description.");
		}

文字を入力しなかった場合、このようにエラーアラートが表示される

　さて、このLiveガジェットで注意すべきところは、リスト4に引用した関数の使用だ。

リスト4■「CountdownGadget.js」で使われているsetInterval関数

		m_interval = setInterval(setCount,1000);

　開発者であるイーストの齋藤氏によれば、「カウントダウンをさせる関数として、setTimeout関数があったのですが使えなかったのです」という。setTimeout関数自体は、タイマー設定のJavaScript関数であり間違っていないはずだが、何故だろうか？

　実はこの解答は、オンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」の過去記事の中にあった。それは、「“時計アプリ”で見るWindows Liveガジェットのインパクト」のページ上に記載しているように、Windows Live上ではsetTimeout関数がうまく動作しないという仕様なのだ。そこで登場するのは、もう一つのタイマー関数であるsetInterval関数だったわけだ。

　齋藤氏も、ここでsetInterval関数を使用することで、目的を果たせたと語る。これ自体はWindows Liveの仕様なので、今後同じようなガジェットを作る際は注意しなければならないだろう。

　リスト5で引用したのは画面表示部分の一部となる。この動作によって結果表示を切り替えるようになっている。まずは、あと何日かを表示させ、続いて時間、分、秒と表示させ、breakで最初に戻す。実際の切り替えは、数字の右横に表示された「→」をクリックすることによって実現されている。

リスト5■「CountdownGadget.js」の画面表示制御部

		switch (m_selectCount)
		{
			case 1:
				//	日
				countTime = Math.floor(marTime / (1000*60*60*24));
				break;
			case 2:
				//	時間
				countTime = Math.floor(marTime / (1000*60*60));
				break;
			case 3:
				//	分
				countTime = Math.floor(marTime / (1000*60));
				break;
			case 4:
				//	秒
				countTime = Math.floor(marTime / 1000);
				break;
			default:
				break;
		}

「→」の部分をクリックすることで、設定した日時まであとどれくらいなのかの表示を切り替えることができる

　以上のメインプログラムが「gadget.xml」から呼び出される。そして「stylesheet.css」によって、表示装飾が定義されるのだ。

利用シーンからアイデアを広げよう

　「カウントダウン」は、前述したように自分で設定した期間までのカウントダウンをするだけの実にシンプルなLiveガジェットである。