時間感覚を養うプログラミングとは？――事例で知るガジェット：Windows Liveが魅せる次世代マッシュアップ（2/4 ページ）

[森川拓男，ITmedia]

　この記事は、既存のガジェットの改造や、新規アイデアによる開発を行うためのガイドをするのが目的である。従って、開発方法の細部は触れないが、その詳細について知りたい場合には本特集の過去記事を参考にしてほしい（関連記事）。

　Liveガジェットは、以下の3つのファイルから成り立っている。ガジェット全体を定義するXMLファイルである「ガジェットマニフェスト」、ガジェットの事実上の本体プログラム「ガジェットスクリプト」、ガジェットの外観を定義する「ガジェットスタイルシート」の3ファイルである。

　今回紹介する「時間感覚・TimeSense」は、これまで事例紹介してきた実用的なLiveガジェットとは毛色が異なるが、同じく脳トレLiveガジェットの「ブレイントレーニング」同様、例外ではない。「TimeSense.xml」「TimeSense.js」「TimeSense.css」の3ファイルから構成されたガジェットである。

　「時間感覚・TimeSense」のマニフェストファイル「TimeSense.xml」（リスト1）を見る前に、まずはこのLiveガジェットの主な動作を頭に入れておこう。

まずプルダウンから秒数を選択する。10秒から60秒まで、10秒ごとに選べるが、まずは10秒からチャレンジしてみよう

「start」ボタンをクリックした時点から計測開始。自分が指定した時間が来たと思ったら、「stop」ボタンをすかさずクリックする

隠されていた実際の時間が表示されて、結果に応じたコメントが表示される

リスト1■マニフェストファイル「TimeSense.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>TimeSense</title>
    <link>http://est.jp</link>
    <!-- Gives a short description of your Gadget -->
    <description>Please try sence of time.</description>
    <!-- Specifies the default locale for your gadget -->
    <language>ja-jp</language>
    <!-- Specifies the JavaScript object that defines your Gadget (this object must be defined in the jscript linked to below) -->
    <binding:type>East.Gadget.TimeSense</binding:type>
    <item>
      <!-- Specifies the JavaScript file that contains the code for your Gadget -->
      <link>TimeSense.js</link>
    </item>
    <item>
      <!-- Specifies the css file that contains the styles for your Gadget -->
      <link binding:type="css">TimeSense.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/TimeSense/TimeSense.png</icon> -->
    </icons>
  </channel>
</rss>

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

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