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

[森川拓男，ITmedia]

リスト5■暗算開始前のカウントダウン処理

	// 開始3秒前
	function setCount()
	{
	    var tdNumber = document.getElementById("td_Number");
	    var textCount = document.createTextNode("�B");
	    if(m_Count > 0)
	    {
	        if(m_Count == 2)
	            textCount = document.createTextNode("�A");
	        else if(m_Count == 1)
	            textCount = document.createTextNode("�@");
	     
	        tdNumber.replaceChild(textCount, tdNumber.lastChild);
	        m_Count--;
	    }
	    else
	    {
	        clearInterval(m_interval);
	        m_interval = null;
	        textCount = document.createTextNode("Start!");
	        tdNumber.replaceChild(textCount, tdNumber.lastChild);
	        // 暗算開始
	        startBrainTraining();
	    }
	}

　この処理で、「Start!」ボタンをクリックしてから、3秒間の猶予が与えられるのだ。永井氏いわく、心の準備をする時間とのこと。いきなり始まってしまっては慌ててしまって、できる暗算もできなくなってしまうかもしれないことを考慮したためだ。

　しかし、ここで気になった人もいるかもしれない。そう。カウントダウンの数字が、丸数字になっている。これは機種依存字としてあまり使わないほうがいいのでは？という疑問だ。この点を永井氏に尋ねると、「最近はあまり気にしないですね。でも、この数字部分はイラストを使った方が、見栄えも良くなるしいいかもしれないですね」という。気になるようならば、画像に差し替えることで、対処できるということだ。

　数字の表示が終わって解答を入力すると、メッセージが表示される。リスト6に引用した部分だが、正解だと「correct!」、不正解だと「mistake!」というメッセージが表示されるようになっているのが分かる。

リスト6■採点時のメッセージ

	        // 採点
	        var inputAns = document.getElementById("text_Ans").value;
	        if(inputAns == m_Answer)
	            SetComment("correct!");
	        else
	            SetComment("mistake!");

　短いプログラムではあるが、その中にも使うユーザーの側に立った配慮が見て取れることが分かるだろう。Liveガジェットを開発する際に忘れがちであるが、その点を忘れてはならないだろう。

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

付け加えることでアイデアは実現する

　「ブレイントレーニング」は、前述したようにランダムに表示される数字を暗算で足して、解答を入力するというだけのシンプルなLiveガジェットである。