今後10年を支えるWindowsアプリの条件：Windows Liveが魅せる次世代マッシュアップ（1/5 ページ）

Vistaの登場で知名度が上がるであろうWindowsガジェット。その中でもWindows Liveは、オンラインOSとしてMSの新たなプラットフォームとして位置付けられた。この記事では、Webページ作成の延長先上と考えられるそのテクニックを見せる。

[大澤文孝，ITmedia]

　オンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」のガジェット開発ノウハウを紹介する本連載では、これまでに第1回目で概要について（関連記事：「Vistaで開花する「Windowsガジェット」とは？」）、そしてガジェットにはどのような種別があるかを第2回目で触れた（関連記事：「MSが提供する新たな“オンラインOS”」）。

　第3回目からは実際の開発手法について触れたが（関連記事：「オンラインサービスの未来は“Windowsガジェット”が制す？」）、第4回目に続き、今回はコアとなる部分を解説していくことになる。

　より実践的な内容へと進むため、今回は高度な内容も含まれている。しかし、忘れてはならないのはマッシュアップを可能とするWindows Liveガジェットが紹介内容のみでサービス連携を可能とすること。この内容さえ押さえておけば、かなり高度なRSS活用も可能となるということだ。いまひとつ理解できない場合には、これまでの回を読み返してみるとよいだろう。

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

ガジェットを使ったサービス連携が真価に

　「いちばん近い“Liveガジェット”マスターへの道」で解説したように、Windows Liveガジェットには自身のDOM要素が渡される。そのため、配下にコンテンツを示す要素を追加することで自身を描画するという仕組みになっている。まずは、これについて説いていく。

　Liveガジェットの種類によっては、静的なコンテンツを表示するのではなく、外部のHTMLコンテンツやXMLコンテンツを取り込んで出力したいこともある。

　例えば、RSSリーダーを作りたいといった発想だ。

　このような場合には、ネットワークを介して、外部コンテンツを取得するための仕組みを理解しなければならない。そこで今回の記事では、ネットワーク通信も含めたLiveガジェットの内部にコンテンツを作成するための方法を見ていくことにする。

まずは静的コンテンツの埋め込み

　以下、本稿では、説明のために、List 1、List 2に示す、「ITMedia.Gadget.Example.MyGadtet」という完全修飾Liveガジェット名をもつLiveガジェットを利用する。

　ここではリスト内容の詳細を理解する必要はない。まずは、次に述べるように要所のポイントだけを理解しておこう。

List 1：ガジェットマニフェスト（MyGadget.xml）

List 2：ガジェットのJavaScriptファイル（MyGadget.js）

　上記リンク先のList 1に含まれるlinkタグ要素には、List 2のJavaScriptファイルを配置するLiveガジェット本体のURLが記載されている。実際にLiveガジェットを動作させるためには、List 2を配置した位置に合わせる必要があるのだ。また、今回は、List 1とList 2に日本語が含められたコードになっている。このように日本語を含む場合には、文字コードを「UTF-8」で保存しないと文字化けしてしまうので注意が必要だ。

　これまでの連載でも説明したように、Liveガジェットの描画領域はiframeタグで区切られており、その描画要素がコンストラクタの第1引数（ここでは、p_elSource）に渡されていることを念頭にして、次からの解説を読んでいってほしい。

　下記のリストでいえば、p_elSourceと書かれている引数が、それに相当する。

　iframeタグで区切られているが、実際にコンストラクタに渡されるのは、描画面を示すdivタグ要素だ。iframeタグ要素ではない。実際、デバッガでp_elSource引数を調べると、divタグ要素が渡されていることも確認できる。

　該当するのは、次に挙げる個所だ。