脳トレはWebアプリでもブームに――事例で知るガジェット：Windows Liveが魅せる次世代マッシュアップ（3/5 ページ）

[森川拓男，ITmedia]

　結局、齋藤氏と同様、永井氏もLiveではsetTimeout関数がうまく動作しないために、もう一つのタイマー関数であるsetInterval関数を利用すればよいことを、オンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」の過去記事「“時計アプリ”で見るWindows Liveガジェットのインパクト」から知ることになる。

　タイマー関数は、かなり利用頻度があるかもしれない。Windows Liveで動かすガジェットの開発をする場合、注意する必要がある。setTimeoutではなく、setIntervalを使うことだ。

　また、この暗算開始では、もう一つの設定がなされている。それはレベル設定だ。この前の段階で、画面作成が行われており、その中でプルダウンから1〜5段階のレベルをユーザーが選択するようになっているが、ここで選択されたレベル値を「m_level」にセットしているのだ。

　続くリスト3が、実際に表示させる数字の取得部分だ。設定されたレベルが桁数としてセットされ、その桁数にランダムに数字を取得していくのだ。

リスト3■ランダムに数字を取得していく

    // ランダムに数字を取得
    function getRandom()
    {
        var figure = m_figure[m_level];
        var num = Math.floor(Math.random() * figure + 1 );
        
        var tdNumber = document.getElementById("td_Number");
        var textNum = document.createTextNode(num);
        if(m_randomCount > 0)
        {
            tdNumber.replaceChild(textNum, tdNumber.lastChild);
            SetCountText(m_randomCount);
            m_Answer += num;
            m_randomCount--;
        }
        else
        {
            clearInterval(m_interval);
            m_interval = null;
            textCount = document.createTextNode("Answer?");
            SetCountText(m_randomCount);
            tdNumber.replaceChild(textCount, tdNumber.lastChild);
        }
    }

　この部分の処理について、永井氏は「同じ数字が続けて出ることがあって、それは最初バグかなと思ったんです」と語る。「よく考えたらランダムに表示してるわけで、特に1桁の場合は同じ数字が出る可能性が高いですよね」

　この点に気付いた永井氏は、「そのために下の方で赤い丸が消えていくようにして数えているんですよ」という。リスト4に引用したプログラム末尾の部分がこの処理だ。

リスト4■“●”でカウントして利用者に分かりやすく

	// "●"でカウント
	function SetCountText(data)
	{   
	    var str = "";
	    var count = eval(data);
	    for(var num=0; num

　この処理を追加することで、仮に同じ数字が続けて出てきても、それぞれが違うということがはっきりと分かる。

　この、ユーザーの側に立った処理は、少し戻ってリスト5で引用した部分にも伺うことができる。