MSが提供する新たな“オンラインOS”Windows Liveが魅せる次世代マッシュアップ(2/3 ページ)

» 2006年11月07日 18時00分 公開
[大澤文孝,ITmedia]

 Windows Live Gallery上には、ガジェットに「Live.comに追加」というボタンが用意されている。このボタンをクリックすると、自らのLiveスペースにガジェットとして組み込まれるのだ(画面2、画面3)。

 ただし、すでに説明したように、ガジェットには3種類あり、Liveスペースに追加できるのは、Windows Liveに対応したガジェットだけだ。このため、Windows Vista用のガジェットについては[Live.comに追加]というボタンはなく、代わりに[ダウンロード]というボタンが表示される。

画面2■Windows Live GalleryからWindows Liveへと追加する
画面3■幾つかのLiveガジェットを追加したところ

ガジェット登録はXMLデータの「マニフェスト追加」

 このようにWindows Live Galleryでは、ガジェットを検索して追加できるが、Windows Liveには、もちろん、それ以外のガジェットも登録できる。

 Windows LiveにLiveガジェットを追加するという行為は、Liveガジェットの所在を示す「マニフェスト」と呼ばれるXMLデータを追加することにすぎない。

 詳しくは、次回に説明するが、ガジェットのマニフェストには、例えば次のような書式で、プログラムの所在を示す場所が記されている。


<item>
  <link>http://example.com/mygadgets.js </link>
</item>

 上記の例であれば、Windows Liveのサイト上サービスによって、「http://example.com/mygadgets.js」が読み込まれ、実行するという意味だ。つまり、Liveガジェットを開発する場合、その流れは次のようになる。

1. JavaScriptやCSSなどをサーバ上に配置する

 開発者はガジェットのプログラムをJavaScriptで記述してWebサーバに置く。また必要があれば、CSSも用意する。

2. 「マニフェスト」ファイルを作る

 「1.」の場所を示したXMLファイルを作り、Webサーバに配置する。

3. Windows Liveから登録する

 Windows Liveから「2.」のファイルを登録する。このためには、Windows Liveから[コンテンツの追加]を選び、[詳細設定]で、「ガジェットのURLを指定して追加」の部分に、そのURLを入力すればよい(画面4)。

画面4■コンテンツとしてガジェットを追加する

Liveガジェットの仕組み

 画面3の例を見ると分かるように、Liveガジェットはニュースや天気などのRSSフィード表示のウィンドウと同じように表示できる小さなウィンドウにすぎない。実際、RSSフィード表示のウィンドウもLiveガジェットの一種だと考えられる。

 ユーザーに表示されている、それぞれのLiveガジェットの表示エリアは、HTMLのiframeタグでインクルード表示されているのだ。つまりWindows Liveの画面には、Liveガジェットの数だけiframeがあり、それぞれのLiveガジェットが、そのiframe内に、JavaScriptを使って内容が描画されているという仕組みだ。

 技術的に見れば、Windows Liveは、Liveガジェットを動かすためのJavaScriptで書かれたフレームワークだと言える。

 Windows Liveはページが表示される時、ユーザーがあらかじめ設定しているマニフェストに記載されている場所から、JavaScriptのプログラムやCSSなどを読み込み、それをiframe内に流し込んで実行している(画面5)。

画面5■Windows Liveの構造

 そして、Liveガジェットを理解する上で、重要なポイントとなるのは、次の5つだ。

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ