いちばん近い“Liveガジェット”マスターへの道：Windows Liveが魅せる次世代マッシュアップ（2/4 ページ）

[大澤文孝，ITmedia]

　Liveガジェットの開発方法と動かし方については、「Windows Liveガジェット開発者ガイド」に記されている。

　ここでは、そのガイドに記載されている手順に沿って、Windows LiveガジェットSDKで提供されているサンプルに含まれている「Hello World」の簡単なガジェットを動かしてみることにしよう。

　その具体的な手順は、次の通りだ。

1. ガジェットサンプルをダウンロードして展開する

　「Windows Liveガジェットのサンプル」からサンプルをダウンロードして展開する。

　展開するとHelloというフォルダが生成される。Helloというフォルダには、次の3つのファイルが含まれる。

1. HelloWorldGadget.xml

　マニフェストとなるファイル。Windows Liveを開いたときに読み込まれる最初のファイルとなる。このファイルには、下記「2.」や「3.」のファイルの位置（URL）が記入されている。

2. HelloWorldGadget.js

　JavaScriptで記述されたLiveガジェットのコード。

3. HelloWorldGadget.css

　利用するCSS（Cascade Style Sheet）ファイル。

　Liveガジェットにおいて、必須なものは上記の「1.」と「2.」だ。CSSファイルは表現力を高めるもののため、必須とはなっていない。また、この例では、すべてのファイルが「HelloWorldGadget」という名前になっているが、これは分かりやすくしている配慮であり、ファイル名をガジェット名に統一しなければならないという決まりはない。また、それぞれを異なるインターネットサーバから読み込んでも問題ない。

2. マニフェストを修正する

　マニフェストファイルとなる「HelloWorldGadget.xml」ファイルには、プログラム本体となる「HelloWorld.Gadget.js」とCSSファイルとなる「HelloWorldGadget.css」の2つのファイルへのリンクが記載されている。

　標準では、次のように、「http://localhost/Gadgets/Hello/」以下になっている。

<item>
<!-- Specifies the JavaScript file that contains the code for your Gadget -->
<link>http://localhost/Gadgets/Hello/HelloWorldGadget.js</link>
</item>
<item>
<!-- Specifies the css file that contains the styles for your Gadget -->
<link binding:type="css">http://localhost/Gadgets/Hello/HelloWorldGadget.css</link>
</item>

　この部分を、下記の「3.」で配置予定のURLに変更する。

3. Webアクセスできる場所に置く

　「1.」で解説したファイルをWebからアクセス可能な場所に配置する。