ガジェット特集:@niftyラボ

@niftyラボ　ガジェット特集

2007年1月30日に発売されたMicrosoft Windows Vistaの新機能として、サイドバーガジェットと呼ばれるガジェットが搭載されました。
今回@niftyが提供するガジェットを使えば、デスクトップ上から簡単に@niftyのサービスを利用することができます。Windows Vistaをお使いの方は、ぜひその便利さをご体験ください。

rescuenow@niftyが提供する「地震・災害・交通情報」をお知らせするガジェットです。地震、台風などの自然災害はもちろん、鉄道遅延情報はカスタマイズできるのでとても便利です。

@niftyが提供するスポーツ総合サイトSports@niftyによるプロ野球速報のガジェットです。現在の試合状況をいち早くお届けします。また、今シーズンのチーム成績など詳細情報も確認できます。

@searchが提供する瞬!ワードのガジェットです。世の中の最新の検索キーワード動向をリアルタイムで集計し、短時間に急激に検索回数が増えたキーワードやサイトをランキング表示します。

占い@niftyが提供する12星座で占う今日の運勢のガジェット版です。設定した星座の毎日の運勢とランキングを表示します。またクリックするだけで、詳しい占い結果を簡単に確認できます。

【コラム】ガジェットを作ってみよう!

はじめに

@niftyラボのジョニーです。

@niftyラボには「インサイド　ラボ」というコラムのコーナーがあります。今回はその出張版ということで、Windows Vistaの新機能、サイドバーガジェットの作り方を紹介します。
Windows VistaのガジェットはHTMLとJavaScriptによって作ることができるので、今まで以上に簡単にデスクトップ上のミニアプリケーションを作ることができます。

サイドバーガジェットの詳細についてはMicrosoftのページや、今後でてくるWebや雑誌の記事を見ていただくとして、ここでは"Hello World"を表示するだけのシンプルなガジェットを作ってみたいと思います。

ファイルの作成

この"Hello Worldガジェット"の制作手順はたったの4ステップです。

"sample.gadget"というフォルダを作成する
上記フォルダのなかに"sample.htm"というファイルを作成する
上記フォルダのなかに"gadget.xml"というファイルを作成する
"sample.gadget"のフォルダを各ユーザー用のガジェットフォルダにコピーする。

下記の画面は"sample.gadget"というフォルダの中身です。サイドバーガジェットのフォルダ名は".gadget"で終わらせる必要があります。

"sample.gadget"フォルダのなかに入れるsample.htmとgadget.xmlの内容は下記の通りです。
"sample.htm"は"hello world"と表示するための画面を作るHTMLで、"gadget.xml"はガジェットの情報を定義するマニュフェストファイルになります。
注意点として文字コードをutf-8にしてセーブしてください。

sample.htm

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
	body {
		width:130;
		height:130;
	}
    </style>
</head>
<body>
Hello world!
</body>
</html>

gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>ハロー ワールド</name>
  <namespace>yoursamplegadget.jp</namespace>
  <version>1.0.0.0</version>
  <author name="Your Name">
    <info url="hoge.yoursamplegadget.jp" />
  </author>
  <copyright>2007</copyright>
  <description>初めてのサイドバーガジェット</description>
 <!-- icons>
      <icon height="48" width="48" src="icon.png"/>
  </icons -->
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="sample.htm" />
      <permissions>full</permissions>
      <platform minPlatformVersion="0.3" />
    </host>
  </hosts>
</gadget>

"sample.gadget"フォルダをガジェットのフォルダにコピーします。ユーザー個人のガジェットが格納されるフォルダは通常、下記の場所になります。

"C:\Users\ユーザー名\AppData\Local\Microsoft\Windows Sidebar\Gadgets"

二つのファイルを作成して"sample.gadget"をガジェットのフォルダにコピーしたら、Windowsサイドバーを立ち上げ直してみましょう。成功していれば次のようにガジェットの追加画面に"ハローワールド"ガジェットが表示されているはずです。表示されていない場合はファイルの中身を再度確認してみてください。

そして"ハローワールド"ガジェットのアイコンをクリックして追加すると、下記のようにガジェットがサイドバーに表示されれば成功です。

どうでしょう？ HTMLを書いたことのある方なら容易に作成できたのではないかと思います。
もちろん動きや機能を付けるにはJavaScriptやCSSを使う必要がありますが、Webページを作る要領で、デスクトップ上のミニアプリができるというのは新鮮な驚きではないでしょうか？

おわりに

今回のサンプルは単純にHTMLを表示するだけでしたが、「瞬！ワード」ガジェットや「12星座占い」ガジェットのように、インターネットのリソースにアクセスするガジェットもJavaScriptを使って作ることが出来ます。

@niftyのサービスにはRSSやXMLなどガジェットに使えそうなさまざまなデータを提供しています。最後に私の独断ですが（笑）、使ってみたら面白そうなデータを挙げておきます。これらのデータを使ったガジェットを自由なアイデアで作ってみませんか?

ココログ
ポッドキャスティングジュース
ニフティクリップβ
アプラグβ
@search

@niftyラボ ガジェット特集