周期から現状を知るアイデア――事例で知るLiveガジェット開発Windows Liveが魅せる次世代マッシュアップ(1/4 ページ)

Webページとほぼ同じ構成を持つWindows Liveガジェット。従来からのページ作成ノウハウをそのままに、Webアプリケーション作成が可能となるプラットフォームだ。

» 2007年02月21日 15時54分 公開
[森川拓男,ITmedia]

Liveガジェットの開発は、構造と仕組みの把握から

 Windows Liveガジェットを作るには、ちょっとしたアイデアとWebページに関連するノウハウがあればよいということは、「WebページはWebアプリへ――Liveガジェット「目標体重グラフ」レビュー」でも述べた。詳細な開発方法については、これまでのオンライン・ムックPlus「Windows Liveが魅せる次世代マッシュアップ」でも解説しているため、参考にしてほしい。基本的にはLiveガジェットの構造と仕組みを把握すればよい。JavaScriptとCSSが主要ポイントのため、比較的敷居も低く、短時間での開発が可能なのが、Liveガジェットの特徴なのだ。

 この記事では、女性周期のメカニズムに沿ってダイエットのアドバイスを表示するガジェット「女性周期でダイエット(Monthly Cycle Diet for woman)」を紹介しながら、その仕組みと構造について解説する。このガジェット自体は女性をターゲットとしているものだが、これを元にして派生したガジェットを考えたり、新たなLiveガジェットを作る際の参考にもなるだろう。

 Liveガジェット「女性周期でダイエット(Monthly Cycle Diet for woman)」(開発元:イースト)のポイントは、月経の平均周期と開始日を入れるだけで、いま現在の状態とアドバイスをひと目で分かりやすく表示してくれる点だ。

概要を理解するためには

 まずは実際のLiveガジェットに触れることから始めよう。「女性周期でダイエット」は、以下の手順で自らのLive.comアカウントスペース(Live.comページ)にインストールすることができる。ここでは、Windows Live IDのアカウントを持っており、Liveサービスにログインしていることを前提としているが、新規アカウント登録から始めたい人はこの記事を参考にしてほしい。

  • ダウンロード先

http://gallery.live.com/liveItemDetail.aspx?li=d257aea9-5d9d-4c88-8669-578bfe24c75a&l=1

「Windows Live Gallery」の「ガジェット>ライフスタイル」から「女性周期でダイエット(Monthly Cycle Diet for woman)」を表示し、「Live.comに追加」をクリックする。なお、ここで「プレビュー」をクリックすると、インストールしないで試すこともできる
注意書が表示されるので、「追加」をクリックする
別ウィンドウで、自分のLive.comスペースが表示されるので、「追加」をクリック

タブに追加され、「この設定を保存する」のチェックをオンにして「ガジェットのインストール」をクリックしよう

ガジェットは基本的に3ファイルで構成されている

 Liveガジェットは、インストールが完了すれば、すぐに利用することができる。しかしその前に、「女性周期でダイエット(Monthly Cycle Diet for woman)」とはどのようなプログラムなのかを見ていこう。前述のように、Liveガジェットの詳細な作り方などは、本特集の過去記事を参考にしてほしい(関連記事)。ここで目的とするのは、基本構造と取り上げるLiveガジェットの開発ポイントを知って、改造をしたり、自らが開発したいと思うアイデアに当てはめていけるようガイドすることなのだ。そして最初のステップとしては、一部の数値を変えてみるなどして、反応を見てみよう。こうすることで、作ることへつながる楽しさが分かってくるはずだ。

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

 もちろん、この記事で紹介している「女性周期でダイエット(Monthly Cycle Diet for woman)」も例外ではなく、「gadget.xml」「MechanismGadget.js」「MechanismGadget.css」のファイルから構成されている。

 まず「女性周期でダイエット(Monthly Cycle Diet for woman)」のマニフェストである「gadget.xml」は、次ページに紹介するリスト1の通りだ。

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

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ