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

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

[大澤文孝，ITmedia]

　オンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」のガジェット開発ノウハウを紹介する本連載では、1回目でガジェット概要について（関連記事）、2回目でガジェットの種別などについて触れた（関連記事）。

　3回目からは実際の開発手法の基礎（関連記事）、4回目からはサンプル作成によって実践的な開発内容に踏み込んでいる。

　続く5回目は、Liveガジェットがどのような表示方法なのか、そしてRSSリーダーを例とした実現方法について。6回目は、ガジェットを配置する際に重要となるマニフェストファイルの解説だ。

　順番立てて解説を行ってきた本連載だが、今回はインタフェース部分の開発について触れよう。

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

---

　Liveガジェットは、スクリプトによってアプリケーションが動作する。JavaやVBを使ったプログラム開発とは異なり、どちらかというと、Excelなどのマクロ言語に近いものだとイメージすればよいだろう。

　そのため、Webページを作成する延長線上でWebアプリケーション開発が可能なのだ。インタラクティブなLiveガジェットを作成するには、JavaScriptのイベント手法を使って実装していく必要がある。

　またLiveガジェットでは、ユーザーの設定値を一時的に保存することも可能だ。例えば、RSSリーダーを作るのであれば、ユーザーが設定したRSSフィードのURLを記録して次回の起動時にもそれを読み込む仕組みが不可欠だろう。

　そこで今回は、JavaScriptのイベント処理と設定値の保存、そして、さらには、汎用のJavaScriptライブラリを使った開発方法を説明していこう。

ガジェット動作の基礎はここ

　リスト1、リスト2は、1つのテキストボックスとボタンをインタフェースとするガジェットのスクリプトだ。

　ユーザーが入力したテキストを、その下にあるdivタグ要素の中へとオウム返しするという、サンプルでよく見られるものだ（図1）。

　リスト2では、innerHTMLプロパティを使って、ガジェット内のHTMLを次のように設定している。

m_el.innerHTML =
"<label for='mytextbox'>テキストを入力してください</label>" +
"<input type='text' id='mytextbox' size='30'/><br/>" +
"<input type='button' id='btn' value='設定'/>" + 
"<div id='result'/>";

画面1■テキストボックスに入力されたテキストをオウム返しするサンプル

リスト1：MyGadget.xml

リスト2：MyGadget.js

イベントのアタッチとデタッチ

　Liveガジェットでイベントを設定するには、「イベントのアタッチ／デタッチ」という概念を使う。

　何らかのイベントが起きたときに、関数を呼び出すように設定するのがイベントの「アタッチ」だ。このアタッチをするためには、attachEventメソッドを呼び出せばよい。