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

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

[大澤文孝，ITmedia]

JavaScript Vector Graphics Libraryで描画する

　JavaScript VectorGraphics Libraryで描画するには、まず、描画領域となるdivタグ要素を作成する。

　リスト5では、次のように、id属性をcanvasとした150px×150pxのdivタグ要素を作成している。

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

　描画するためには、jsGraphicsオブジェクトを作成する。引数に指定するのは、描画先のdiv要素のid属性の値だ。

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

　リスト5では、1秒ごとに時刻表示を更新するために、setInterval関数を使い、1秒ごとにDrawClockという関数が呼び出されるようにインターバルの設定をしている。

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

　注意点として、JavaScriptにはタイマを設定する似た関数としてsetTimeout関数がある。しかし、setTimeout関数は、Liveガジェットではうまく動作しない。

　設定したインターバルは、Liveガジェットが破棄されるときには、解除しなければならない。そのため、disposeメソッドでは、次のようにclearIntervalメソッドを使って解除するという処理を実装してある。

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

　リスト5においては、実際にアナログ時計を描画する処理は、DrawClock関数に記してある。すでに変数m_jgに、jsGraphicsオブジェクトを設定しているので、この変数の各種メソッドを使うことで、線や円などの図形を描画できる。

　例えば、円を描画する部分は次のようになっている。

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

　短針、長針、秒針は、cos関数やsin関数を使って座標を計算して直線として描画する。例えば、短針を描画する部分は、次のようになる。

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

　描画が終わったら、最後にpaintメソッドを呼び出す。これにより、jsGraphicsオブジェクトの描画先となっているdiv要素へと、実際に描画される。

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

　なお、冒頭でも触れたようにオンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」では、“Liveガジェットのアイデア募集”を行っている。読者から寄せられたアイデアは、本特集上で優秀作やアイデア傾向などを紹介していく予定だ（募集は2006年3月まで）。