“時計アプリ”で見るWindows Liveガジェットのインパクト：Windows Liveが魅せる次世代マッシュアップ（4/5 ページ）

Liveガジェットの制作はWebページの延長線上だといえる。JavaScriptの特定の処理さえマスターすれば、自由にガジェット開発が可能だ。その魅力を「時計ガジェット」から見てみよう。

[大澤文孝，ITmedia]

汎用のJavaScriptライブラリを用いる

　Liveガジェットの基本的なAPI解説は、これでほぼ説明したことになる。本開発詳細連載の締めくくりとして、実用的なサンプルを示そう。

　ここで示すのは、画面2に示すアナログ時計のサンプルだ（リスト4、リスト5）。

画面2■アナログ時計ガジェットの基本的な機能サンプル

リスト4：アナログ時計のマニフェスト（AnalogTime.xml）

リスト5：アナログ時計のJavaScriptコード（AnalogTime.js）

サードパーティーのライブラリを使う

　すでにJavaScriptを使った経験がある人なら分かると思うが、JavaScriptには、画面に線や円を描画するための機能がない。そしてまた、そのような機能をWindows Liveが提供しているわけでもない。

　画面2に示したサンプルでは、Walter Zornの「JavaScript VectorGraphics library」を用いた。このライブラリは、divタグ要素をキャンバスに見立てて、JavaScriptから線や円などを描画できる機能を持つものだ。

　Liveガジェットで、このようなライブラリを使うには、マニフェストで読み込めばよい。

　リスト4に示したように、このガジェットマニフェストでは、次のように「自身のJavaScriptコード」のほかに「JavaScript VectorGraphics library」を示すitemタグ要素を指定している。

　ガジェットマニフェストでは、幾つソースコードを指定しても構わない。何らかのJavaScriptライブラリを利用したい場合には、この例のようにそれぞれのソースコードを列挙すればよいのだ。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　上記のURLは、環境に合わせて調整することになる。ここではJavaScript VectorGraphics libraryをあらかじめダウンロードして、Liveガジェットのコードと同じ場所に置いた状態を想定している。しかし、それぞれのJavaScriptのコードが、異なるサーバに存在しても問題ない。