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

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

[大澤文孝，ITmedia]

　リスト2では、初期化の際のinitializeメソッド内で、次のようにonclickイベントをアタッチしている。

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

　これにより、onclickイベントが発生したとき――すなわち［設定］ボタンがクリックされたとき――には、OnClick関数が呼び出されるようになる（OnClick関数の実装は、すぐあとに示す）。

　イベントをアタッチしたら、終了前には、デタッチする必要がある。これも決まりだ。この処理は、一般に、Liveガジェットが破棄される寸前に呼び出されるdisposeメソッド内で行う。

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

　このように、Liveガジェットでは「attachEventでアタッチし、detachEventでデタッチする」という方法を使い、イベントを処理する関数を設定していくことになる。

　attachEventメソッドは、複数回呼び出しても構わない。つまり、あるイベントに対応するイベント処理関数を複数個設定できるということを意味する。

$()で値の取得や設定もできる

　OnClick関数では、次のようにテキストボックスに入力されたテキストを取得し、それをdivタグ要素へと設定している。この結果、画面1に示したように、入力されたテキストが、画面上にオウム返しされるというわけだ。

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

　ここでは、Liveガジェットの描画域を示す要素のchildrenプロパティを使って、子要素を取得するという方法をとった。

　しかし、次のように「$('要素のid名')」という、prototype.jsに似た構文を使うこともできる。

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

　この構文は、Live.comのフレームワーク――より正確に言えば、ASP.NET AJAX――によって提供されるものだ。