はじめに

はじめまして。沢渡真雪と申します。この連載ではWindows Vistaで搭載されたWindowsサイドバーで動作するガジェットを読者の方々に理解してもらい、自分で作って公開できるようになることを目標に、実際にガジェットを作りつつ解説をしていきます。

ガジェットを作るという部分に関しては「これだけやって作成すればすんなり公開できる範囲」「⁠こんなことができるので、組み合わせたり何か作れるようになったりしてもらえればおもしろいかも」という部分をカバーできるとよいかなと思っています。

なにぶん連載も執筆も初めてなので、私もツッコミを受けないようにしないととドキドキしながら書いていますが、ガジェットを作るきっかけとなるよう参考していただければ幸いです。

対象としている読者さんと必要な予備知識

この連載で想定している対象となる読者層は「HTMLとJavaScriptは並には理解しつつ、Windows Vistaを持っていたりVistaのサイドバーガジェットに興味があったりするという方々」です。ガジェットについては名前しか聞いたことしかないけど気になるというのでも問題ありません。

JavaScriptの知識をどの程度必要とするかについては「Webページを表示したときお昼だと"こんにちは!"とalertを出す」というレベルだと厳しいかもしれません。クラスやプロトタイプ、DOMなどの理解は必要になるでしょう。

HTMLの知識も最低限は必要です。CSSは最悪なくても何とかなりますがHTMLの知識はどうしても必要です。とはいえWebページのように沢山書くということはないのでHTML 4.01レベルの基礎をそれなりに知っていれば（例えばWebページを作ったことがあるなどであれば）問題ないでしょう。

Windowsサイドバーとガジェットについて

ガジェットを作る前に、Windowsサイドバーガジェットがどういうものであるかについて説明します。もっともWindows Vistaの目玉の機能ということもあり、いざ作ろうと、この記事を読んでいる方々で知らないという方はあまりいないのではないかもしれません。第1回はWindowsサイドバーとガジェットについて説明していきます。

Windowsサイドバー

すでに何度も文中に出てきているWindowsサイドバーとは、Windows Vistaで新たに搭載された、「⁠比較的単機能で小さなツールを常に置いておく」アプリケーションです。

小さなツールを画面端の表示域に並べているためサイドバーという名前になっています。実際にはツールをサイドバーから離して画面上でばらばらに表示することもできますので、サイドバーだからといって定位置のみというわけでもありません。

サイドバーの中で動く小さなツールを「ガジェット」と呼びます。この連載では実際にガジェットを作るということを解説するのが目的です。

なおWindowsサイドバーはWindows Vistaのエディションを問わず、すべてのエディションに提供されます。

なぜサイドに置くのか？

ところで「なぜサイドに置くのか？」という背景についてですが、昨今のムービーなど各種コンテンツはHDや何かとワイドなものとなっていることもありコンピュータは液晶などもワイド画面を採用しているものが増えています。その増えた横幅の分小物を置いておいておき有効利用というのが大きいのではないでしょうか。

もう一つ考えられるとすると元々Windowsのタスクバーにあるツールバー（Quick Launchなど）は縦置きできる仕組みであり、その延長なのかもしれません。

ガジェットって？

ガジェットはツールの単位ともいえるもので、1つのガジェットは一機能しか持っておらず、その機能は割と単純なものというものが一般的です。これは単純なものしか作れない、ということではなく機能の焦点を絞っているというものが多いということです。作ろうと思えば超多機能なガジェットを作成することもできます。

では「Windowsサイドバーのガジェットにはどのようなものがあるのか？」ということを簡単に紹介します。Windowsをインストールした状態で入っているものとして、時計やカレンダ、CPUメータなどのガジェットがあります。Vistaのスクリーンショットをご覧になったことがあれば「ああ、あれね」となるものたちです。

Microsoftが提供してプレインストールされている以外のものはWindows Live Galleryなどで見つけることができます。Windows Live GalleryとはMicrosoftの提供しているサービスの一つで開発者が作成したガジェットを自分で登録し公開できるというサービスです。

Windows Live Galleryでは多くの開発者が登録した様々なガジェット－検索エンジン用ガジェットからミニゲームガジェットなどまで－を見つけることができるので、Windows Vistaをお使いの方は、お好みのものを探してインストールしてみるとよいのではないでしょうか。

もちろんWindows Live Gallery以外からもダウンロードしてインストールすることができますが、どのようなものがあるのか簡単に探すにはまずはWindows Live Galleryを見てみるのがオススメです。

Windows Live Galleryへのアクセスは、Windows Vistaをご利用の場合Windows サイドバーのガジェットの追加画面の「オンラインで追加のガジェットを取得」リンクをクリックすることでアクセスできます。利用者にとってはアクセスしやすく、開発者にとってはダウンロードしてもらえる可能性が高まるサービスでもあります。

Windowsサイドバーとそれ以外のガジェット系アプリケーション

ところでガジェットのような小物ツールを常駐しておいて必要なときに使うというのは、Windowsサイドバーのみではありません。むしろこの手のアプリケーションとしてWindowsサイドバーは比較的後発のものになります。

まず火付け役として有名なMac OS Xに搭載されたDashboard、Googleの提供するGoogle ガジェット・サイドバー、Opera ブラウザに搭載されたOpera Widgetなどがあります。Yahoo!が提供しているYahoo! WidgetsはDashboardよりも古く、Konfabulatorと呼ばれていたアプリケーションがベースとなっています。KonfabulatorはシェアウェアでしたがYahoo!によって買収されYahoo! Widgetとして無償配布となりました。

DashboardやOperaなどのそれはガジェットではなくウィジットなどと呼ばれていますが、これらの名前や動作環境、実行方法などに違いはあれども基本的に実現・表現できることに大きな違いはありません。

以下に代表的なガジェット系アプリケーションの特徴をまとめました。

この表を見ていただければ分かるかと思うのですが、どのアプリケーションにおいても、ガジェットまたはウィジットを開発するために利用するのはJavaScript（Microsoftの実装はJScriptと呼ばれますが大体同じ）とHTMLまたはXMLです。またHTMLを利用するものに関しては、表示のベースにWebブラウザを利用しているという点も共通しています。

ガジェットの開発に既存のWebサイトで利用されているテクノロジを利用したことによって、普通のアプリケーションよりも作成のための敷居が低くなっているという点も、ガジェットアプリケーションの人気につながっているのだと思います。特にDashboard、Windowsサイドバー、Opera Widgetは、UI記述に一般的なHTMLを利用することが大きいでしょう。

ところでWindowsサイドバーガジェットなどについて調べようとすると、WebポータルのiGoogleやWindows Live!のカスタマイズの際にぺたぺた貼り付けたりするガジェット・ウィジットと呼ばれますものも見つかります。

ですが、これらはデスクトップのガジェットアプリケーションとの互換性はありません。同じような名前のサービスで使われている言葉なので多少混乱してしまうことがあります。特にWindows Live GalleryはサイドバーとWebのガジェットが同じように公開されているので一段とややこしくなっています。

ガジェットの原点

余談ですがマークアップ言語でUIを記述し、JavaScriptでロジックを記述するという形をとって普及したアプリケーションの原点はKonfabulator（Yahoo! Widgets）かもしれません。

Dashboardが登場したときKonfaburatorにとても似通っていることから「マネをしたのではないか？」というような話題もあったようです。もちろん実際にマネをしたかどうかは判りかねますが、Dashboardに限らずガジェット系アプリケーションは多少なりとも影響は受けていると考えられそうです。

Windows サイドバーの作成と利用の流れ

細かい点については次回以降で説明するとして、ここでは作る→配布→利用の流れを簡単にですが説明します。利用に関しては特別すごいことをするでもなく普通にガジェットをインストールするだけなのでVistaを使っているとすれば特に迷うこともないのではないかと思いますが、利用していない人のためにも簡単に説明します。

まずガジェットができるところから配布まで

ガジェットは通常以下のもので構成されます。

• ガジェットについての情報・アイコン
• UI記述のためのHTML
• ロジック記述のためのスクリプト
• 必要であれば画像やビデオなどのリソース

これらを作成したのちユーザに配布してインストールしてもらえるよう、ひとまとめのパッケージ（1つのファイル）にします。

パッケージ化できたら実際にダウンロードしてもらえるようWindows Live Galleryや配布するためのウェブサーバなどにアップロードし、どこかのページからリンクをはります。配布の手順は実質この程度です。

インストール、利用するところまでの流れ

配布されているものを利用することはとても簡単です。

ガジェットを利用したいユーザは配布ページのリンクをクリックするなどしてガジェットのパッケージファイルをダウンロードし開きます、その際サーバ側で適切な設定が行われていればサイドバーに追加するかどうかというダイアログが表示されます。

メッセージに従い追加を行うとガジェットの一覧にダウンロードしたガジェットが追加されます。また自動的にそのガジェットが1つ、サイドバーに追加されすぐ利用可能な状態となります。

インストールした後は一覧に追加されるので、削除や追加などを自由に行えるようになります。

Windowsサイドバーガジェットの仕組み

表示周り

Windows サイドバーは前の表にもあるとおり、HTML+JScript（正確にはActiveScript）というInternet Explorerを利用して動作しています。

元々Internet ExplorerはブラウザのエンジンをInternet Explorer以外のアプリケーションで再利用できる仕組みが用意されているのでそれを利用しているということです。

そのため、基本的にInternet Explorerで表現できることはWindows サイドバーのガジェットでも表現できるということになります。加えてWindowsサイドバー特有の機能をガジェット側から利用するためにAPIなどの拡張が提供されます。

例えばガジェットがサイドバーから切り離されたことなどを検知するためのイベントやガジェットの背景を透過させるためのHTMLの拡張要素、リソースアクセス機能などを利用できるようになります。

ブラウザをベースとしているDashboardやOperaなども、似たような仕組みになっていると同じです。

ところでInternet Explorerにはゾーンというセキュリティレベルの仕組みが存在していますが、「⁠ガジェットの場合はどうなるのか？」という疑問が出てきます。セキュリティゾーンをご存じない方のために簡単に説明すると、インターネットのサイト上のスクリプトからはローカルのデータの読み取りができないが、マイコンピュータゾーンの場合にはデータの読み取りからプログラムの実行まで自由になるなど、そのページの所在によって許可される機能を変化する仕組みのことです。

ガジェットの場合にはマイコンピュータゾーンとして実行されます。ですからガジェットのスクリプトはローカルコンピュータのデータの読み書きやCOMオブジェクトの作成（たとえばiTunesの操作）などを行えることになります。HTA（HTML Application）をご存知であればほぼ同等と思っていただければよいと思います。

普通のInternet Explorerと異なるところ

WindowsサイドバーガジェットではInternet ExplorerでWebページを動的に操作するのと同様にスクリプトで各種機能や見た目を操作しますが、それだけではできることに限りがあり表現力に制限ができてしまうため、それを補うようなAPIが提供されます。

スクリプトから扱える機能として拡張されているもの

ガジェット固有の機能

Windowsサイドバーでのみ意味のあるようなAPIが提供されています。例えば以下のようなものです。

• ガジェットがサイドバーから離れたことなどを表すイベント
• 設定ボタンを押したときに表示するHTMLの指定など
• 設定が完了した時のイベント
• サムネイルを取得できるスキーム

これらはガジェットで利用するときに役立つものが多いといいますか、例にあるサイドバーから離れたイベントなどはほかのところでは使いようがなくガジェット専用といえます。

多言語化のための仕組み

Windowsサイドバーでは多言語化をひとつのガジェットのパッケージ中で簡単に行うための仕組みを用意しています。

どのように動作するものかというと、特定の規則でファイルを配置すると動作中のWindowsの言語にあわせて読み込むファイルのパスを透過的にガジェット側が意識することなくリダイレクトしてくれます。

例えばメッセージを書いたリソースファイルなどを日本語と英語で用意しておき、特定のディレクトリに配置することでガジェットのファイル指定ではどちらのリソースを読み込むということを気にせずとも特定のパスで読み込むと自動でパスが切り替わり、Windowsの言語設定によって読み込むファイルを変更できるようになります。

ローカルコンピュータの情報に簡単にアクセスするためのAPI

CPUやバッテリの状態、無線LANの電界強度を取得するためのAPIが提供されます。

それらの情報もCOMを駆使すれば取得できる情報なのでスクリプトから努力すれば取得することはできるものもあります。ですが、組み込みオブジェクトのプロパティとして提供されるため情報に対してのアクセスがとても容易となり、煩雑な手順を踏まなくてもよいこととなります。例えばガジェットのスクリプトでは以下の行だけでCPUの利用率を取得できるようになります。

System.Machine.CPUs.item(0).usagePercentage

また、ガジェット固有の機能でもありますが設定を読み書きするためのAPIも提供されます。

ガジェットは大抵個別に設定を持っていますが、それらを読み書きするのにファイルを意識せず簡単に行えるようになること、ガジェットを削除すると設定を自動的に削除してくれるなどの面倒をみてくれます。

背景透過のための仕組み

背景透過のための仕組みは見た目の面でとても重要です。WindowsサイドバーはInternet Explorerをベースとしていると説明しましたが、Internet Explorerには背景を透過する機能は備わっていません。

ということは単純にそのままでは透過できないことになりますが、一般的なガジェットのスクリーンショットをみてもそのようにはなっているものはなく、影を持ちながら透けていたりします。

このような機能はInternet Explorerには存在しないため、Windowsサイドバーでは独自に画像表示を行うためのHTML要素を提供しています。それらの拡張要素を利用することでアルファ値を持ったままで透過表示することができるようになります。最初の項目のWindowsサイドバーの拡張の一部でもあり、スクリプトから操作することもできます。

背景透過のための指定に関する考察

背景の透過が特殊な要素での指定方法になっている理由についてあくまで予想ですが、特別な要素で指定した画像・背景画像をWindowsサイドバーが描画し、その上にカラーキーなどで透過したInternet Explorerのレンダリングを乗せるという形をとることで解決しているのではないかと考えられます。

とりあえず簡単なガジェットを作成してみる

さて次回はいよいよ作成編にと考えていたのですが、次回までお待たせするのもつまらないかと思ったので細かいことは気にせず、説明もせずHello World的なものをサクッと作成してみます。

何を作るのか考えたのですが、ただHello Worldを表示するだけではつまらないので、ほんの少しだけマシと思いたいGoogle検索のガジェットを作ることにします。

それでは作成してみましょう。

まずガジェットを構成するファイルを置くフォルダを作成します。フォルダの位置は%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets以下に作ると決まっているのでエクスプローラのアドレスバーに入力するなどして開いてください。なお%USERPROFILE%は環境変数なので自動的にC:\Users\<ユーザ名>に展開されます。

Gadgetsフォルダを開いたら次に作成するガジェットのためのフォルダを作成します。メニューから「新規作成⁠」⁠→「⁠フォルダ」を選択して作成します。作成するフォルダの名前はGoogleSearch.gadgetとしておきます。 .gadgetも必要ですので省略しないようにしてください。

作成できたら作成したフォルダの中に移動します。

ガジェットの構成ファイルを作ってゆきます。まずガジェットとして認識してもらうための設定ファイルを作成します。設定ファイルの名前はgadget.xmlで固定です。ファイルの中身は以下のように記述してください。

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>Google Search</name>
  <version>1.0.0.0</version>
  <hosts>
    <host name="sidebar">
       <base type="HTML" apiVersion="1.0.0" src="Main.html" />
       <permissions>Full</permissions>
       <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

次にガジェット本体（ユーザインタフェース）にあたるHTMLを作成します。先ほどの設定ファイルで

<base type="HTML" apiVersion="1.0.0" src="Main.html"/>

と書かれた部分がありますが、これが最初に表示されるHTMLファイルの指定になっているのでここで作成するファイルはMain.htmlになります。

Main.htmlの内容は以下のように記述してください。なお保存する際の文字コードはUTF-8として保存してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Google Search Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* { margin: 0; padding: 0; }
body { width: 128px; height: 64px; }
input { width: 100%; }
</style>

<div>
<form action="http://www.google.com/search">
Google 検索:<br>
<input type="text" name="q">
<input type="submit" value="検索">
</form>
</div>

以上で出来上がりです。ここまでで作成したファイルの配置は以下のようになります。

C:\Users\<USERNAME>\AppData\Local\Microsoft\Windows Sidebar\Gadgets
└─GoogleSearch.gadget
       ├─gadget.xml
       └─Main.html

あとはサイドバーの右上にある「+」ボタンをクリックして、ガジェット追加画面を出すと「Google Search」というガジェットが増えていると思いますので、ドロップするかダブルクリックしてサイドバーに追加します。

ここまでで間違っていなければガジェットが表示されるはずです。正しく表示されたらテキストボックスに文字列を入れて検索ボタンを押してみてください。IEでGoogleの検索画面が表示されたでしょうか？

以上でとても単純なガジェットの作成は完了です。細かいことを抜きにすると実は結構少ないステップで作成できます。この例ではスクリプトも画像も使ってませんが、次回以降でちゃんと使いたいと思います。

というわけで

Windowsサイドバーの概要についてつらつらと書かせていただきました。これで名前しか聞いたことがなかったというところからどんな感じになっているものなのかぐらいは掴んでもらえたらいいなと思っています。

冒頭でも書きましたが今回はWindowsサイドバーの概要などの説明がほとんどだったため、「⁠そんなことは知っているので早く作りたい!」という方にとっては申し訳なかったのですが、次回からは実際にそれなりのガジェットを作っていきたいと思います。