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

[大澤文孝，ITmedia]

JavaScript Vector Graphics Libraryで描画する

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

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

m_el.innerHTML = 
"<div id='canvas' style='position:relative;width;150px;height:150px;'/>";

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

m_jg = new jsGraphics('canvas');

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

m_interval = setInterval(DrawClock, 1000);

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

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

clearInterval(m_interval);

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

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

// 色を設定
m_jg.setColor("#cccc00");
// 円を描画
m_jg.fillEllipse(0, 0, 150, 150);

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

// 現在の時刻を取得
now = new Date();
// 短針の描画
m_jg.setColor("#000000");
m_jg.drawLine(
  75, 75, 
  50 * Math.sin(now.getHours() * Math.PI * 2.0 / 12.0) + 75,
  -50 * Math.cos(now.getHours() * Math.PI * 2.0 / 12.0) + 75);

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

m_jg.paint();

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