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

[森川拓男，ITmedia]

　「ブレイントレーニング」のマニフェストである「gadget.xml」はリスト1の通りだが、まずはリスト（ソース）を見る前に、このLiveガジェットの主な動作を覚えておこう。

Levelを選択してから「Start!」ボタンをクリックすると、3、2、1と、カウントダウンが始まる

1秒ごとに数字が表示されるので、順番に暗算で足していく

「Answer?」と聞かれたら、下の解答ボックス内に答えを入力して、「Grade」ボタンをクリックしよう

真ん中に正解が表示され、記入した解答ボックスの下にはメッセージが表示される。「Start!」ボタンをクリックすることで、何回でも挑戦可能だ

リスト1■マニフェストファイル「gadget.xml」

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:binding="http://www.live.com">
  <channel>
    <!-- Specifies the name of your Gadget -->
    <title>Brain training</title>
    <link>http://est.jp</link>
    <!-- Gives a short description of your Gadget -->
    <description>Please sums in your head.</description>
    <!-- Specifies the default locale for your gadget -->
    <language>en-us</language>
    <!-- Specifies the JavaScript object that defines your Gadget (this object must be defined in the jscript linked to below) -->
    <binding:type>East.Gadget.BrainTraining</binding:type>
    <item>
      <!-- Specifies the JavaScript file that contains the code for your Gadget -->
      <link>BrainTraining.js</link>
    </item>
    <item>
      <!-- Specifies the css file that contains the styles for your Gadget -->
      <link binding:type="css">BrainTraining.css</link>
    </item>
    <icons>
      <!-- Specifies a .png file to be used as the icon in the title bar for your gadget -->
      <!-- <icon height="32" width="32">http://localhost/Gadgets/BrainTraining/BrainTraining.png</icon> -->
    </icons>
  </channel>
</rss>

　これまでも見てきた通り、マニフェストファイルには、そのLiveガジェットの名前と説明、実際に使用するスクリプトとスタイルシート指定が定義されている。つまり、新しいLiveガジェットを開発する際には、一から書き起こすことなく、要所を書き換えさえすれば、そのまま応用可能なテンプレートとして利用することができるというわけなのだ。

　続いて、プログラム本体である「BrainTraining.js」を見ていこう。

　リスト2に引用した部分では、「カウントダウン」ガジェットと同じく「setInterval関数」を利用している。（関連記事）

リスト2■setInterval関数で暗算開始

    // 暗算開始
    function startBrainTraining()
    {
        // Level値を取得
        m_level = document.getElementById("ddl_level").value;
        m_Answer = 0;
        m_randomCount = 10;
        m_interval = setInterval(getRandom, 1000);
    }

　開発者の永井氏は当初、「カウントダウン」開発者の齋藤氏と同じところで悩んでしまっていたのだ。

「暗算開始の処理の中で、setInterval関数で開始させた後はランダムに取得した数字を、ユーザーが選択したレベル（桁）に合わせた桁数の数字を表示していく処理をしています。ここで時間がかかったのは、最初はLiveでsetTimeout関数が使えないということを知らなかったために、なぜエラーになるのか分からなかったところです」（永井氏）