リスト3に引用したのは、入力チェック動作。それが実際に動作したときの画面も続いて紹介するので、見比べてほしい。
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に引用した関数の使用だ。
m_interval = setInterval(setCount,1000);
開発者であるイーストの齋藤氏によれば、「カウントダウンをさせる関数として、setTimeout関数があったのですが使えなかったのです」という。setTimeout関数自体は、タイマー設定のJavaScript関数であり間違っていないはずだが、何故だろうか?
実はこの解答は、オンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」の過去記事の中にあった。それは、「“時計アプリ”で見るWindows Liveガジェットのインパクト」のページ上に記載しているように、Windows Live上ではsetTimeout関数がうまく動作しないという仕様なのだ。そこで登場するのは、もう一つのタイマー関数であるsetInterval関数だったわけだ。
齋藤氏も、ここでsetInterval関数を使用することで、目的を果たせたと語る。これ自体はWindows Liveの仕様なので、今後同じようなガジェットを作る際は注意しなければならないだろう。
リスト5で引用したのは画面表示部分の一部となる。この動作によって結果表示を切り替えるようになっている。まずは、あと何日かを表示させ、続いて時間、分、秒と表示させ、breakで最初に戻す。実際の切り替えは、数字の右横に表示された「→」をクリックすることによって実現されている。
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ガジェットである。
Copyright © ITmedia, Inc. All Rights Reserved.