特集
» 2007年02月13日 08時00分 公開

Windows Liveが魅せる次世代マッシュアップ:WebページはWebアプリへ――Liveガジェット「目標体重グラフ」レビュー (1/4)

Webページを作ることができればLiveガジェットを作ることは簡単だ。数個のファイルで構成されているガジェットは、Webアプリケーションの容易さを提供してくれるだけでなく、開発者とメリットをシェアするモデルも考えられているという。

[森川拓男,ITmedia]

LiveガジェットはWebページ感覚の開発

 Windows Liveガジェットは、ちょっとしたアイデアさえあれば、Webページに関連するノウハウで作ることができるのが特徴だ。これまでにもオンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」では、詳細な開発手法について解説してきた。Liveガジェットの構造と仕組みを把握すれば、数時間程度で開発することも夢ではないのだ。そのポイントはJavaScriptやCSSが主たるもののため、比較的敷居が低いのも特徴である。

 この記事では、目標体重とその達成予定日を入力することで、毎日の体重の推移をグラフ化して見ることができるガジェット「目標体重グラフ(Target Weight graph)」を紹介しながら、その仕組みと構造について解説する。これを元に、派生のLiveガジェットを考えてみたり、新たなLiveガジェットを作る際の参考にしてほしい。

 Liveガジェット「目標体重グラフ(Target Weight graph)」(開発元:イースト)のポイントは、起点となる数値(現体重)と、終点となる数値(目標体重)を入力し、そこに至るまでどの程度痩せることで目標達成になるかをひと目で分かりやすく表示させている点だ。

まず最初に触って概要を理解しよう

 まずは実際のLiveガジェットに触れてみよう。「目標体重グラフ」は、以下の手順で自らのLive.comアカウントスペース(Live.comページ)にインストールすることができる。ここでは、Windows Live IDのアカウントを持っており、Liveサービスにログインしていることが前提だが、アカウント登録から始めたい人はこの記事が参考になるだろう。

  • ダウンロード先

http://gallery.live.com/liveItemDetail.aspx?li=3bd6029a-9784-4337-a80f-00abe34b2291&l=1

画面■「Windows Live Gallery」の「ガジェット>ライフスタイル」から「目標体重グラフ(Target Weight graph)」を開き、「Live.comに追加」をクリックする。なお、ここで「プレビュー」をクリックすると、インストールしないで試すこともできる
画面■注意書が表示されるので、「追加」をクリックする
画面■別ウィンドウで、自分のLive.comスペースが開くので、「追加」をクリック
画面■タブに追加されるので、「この設定を保存する」にチェックを入れて「ガジェットのインストール」をクリックしよう

基本的には3ファイルで構成されている

 インストールが完了したらすぐに利用することができるわけだが、まずその前に、「目標体重グラフ(Target Weight graph)」とはどのようなプログラムなのかを解体してみたい。前述のようにLiveガジェットプログラムの具体的な記述については、本特集で過去に取り上げてているので、参考にしてほしい(関連記事)

 Liveガジェットの基本構造ポイントは、ガジェット全体の定義を行う「ガジェットマニフェスト」と呼ばれるXMLファイル、ガジェットを作成するためのコードを格納したJavaScriptファイル「ガジェットスクリプト」、そしてガジェットの表示スタイルを定義するCSSである「ガジェットスタイルシート」の3ファイルから成り立っていることだ。

 「目標体重グラフ(Target Weight graph)」の場合も例外でなく、「gadget.xml」「WeightGadget.js」「stylesheet.css」のファイルから構成されている。

 まず「目標体重グラフ(Target Weight graph)」のマニフェストである「gadget.xml」は、リスト1の通りだ。

 以降も幾つかのリストを挙げていくが、すべての内容を最初から理解する必要はない。この記事が目的としているのは、どのような仕組みになっているかを概要としてとらえることだ。そして、最初のステップとしては一部の数値を変えてみるなどしてその反応を見てみることが大切だ。こうすることで、作ることへつながる楽しさが分かってくるからだ。

       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ

マーケット解説

- PR -