Windows サイドバー ガジェット 作成入門

序文

本解説を読むには、マーク付け言語 (XHTML 1.0 [XHTML1], XML 1.0 [XML1]) 、スタイルシート言語 (Cascading Style Sheets, level 2 [CSS2]) 、スクリプト言語 (ECMAScript [ECMAScript] (JavaScript [JavaScript], Microsoft JScript [JScript])) 、HTML文書オブジェクトモデル (Document Object Model (DOM) Level 2 [DOM2]) などの基本的な知識が少々必要になります。この他にも Dynamic HTML [DHTML]、Windows Script Host [WSH]、Microsoft VBScript [VBScript] 等についても触れることになるでしょうから、それらの予備知識（詳細は参照文書を参照の事）も多少なり必要になるかも知れません。従って全くの初心者向けの解説書ではありません。

しかし、Windows サイドバー ガジェットを作成する際には、これら全てを知っておく必要は全くありません。最低でもマーク付け言語（HTML 4.01 [HTML4）及びスクリプト言語（JavaScript [JavaScript]）の知識が多少あれば十分です。開発中に必要になる技術があれば、足りない知識を補えば良いでしょう。筆者である私だって、最初は HTML の知識すら無かったのですから──。

本解説では、筆者である私が実際に Windows サイドバー ガジェットを作成して気付いた事を中心に綴っています。Windows サイドバー ガジェットの作成が全く初めての方でも、本解説を読まれる事で作成方法が理解できる内容になっていると思います。本解説が皆さんがガジェット作成に挑戦する切っ掛け、また参考になれば幸いです。

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

Windows サイドバーとガジェットとは、Windows Vista の新機能のひとつです。

Windows サイドバーは、デスクトップの片側（左右のどちらか一方。デフォルトでは右側）に表示される長い垂直バーです。簡単に説明すると、ガジェットを格納しておく為のデスクトップ上の領域（場所）で、そこにガジェットを幾つでも追加（格納）することができます。

ガジェットは、Windows サイドバーに格納しておける比較的小さなプログラムです。通常のアプリケーションの様にデスクトップ上に配置して使用することもできます。ガジェットの機能によっては、時刻や天気予報、CPU やメモリの使用率などといった継続的に更新される情報を表示したりすることができます。

Windows Live Gallery では、様々なガジェットが登録・配布されています。

開発に必要な環境

Windows サイドバー ガジェットは、マーク付け言語及びスクリプト言語などの既存の技術を用いて（組み合わせて）開発できます。マーク付け言語やスクリプト言語などの知識が多少あれば、Windows に付属するメモ帳などのテキストエディッタだけで容易に作成できます。勿論、MS 社が提供する Windows Software Development Kit (SDK) [WindowsSDK] 及び、Visual Studio 2005（フルバージョン、フリーの Visual Studio 2005 Express Edition のどちらでも可）、Microsoft Expression Web Designer [MicrosoftExpression] といった便利な開発ツールを使用するのも良いでしょう。

Microsoft XML Core Services [MSXML] の IXMLHTTPRequest、及び Dynamic HTML [DHTML] の XMLHttpRequest オブジェクト [XMLHttpRequest] を利用した非同期通信（所謂 Ajax と最近呼ばれるようになった技術手法）や、Windows サイドバー ガジェットの為に用意されている API [GadgetAPI] の execute メソッドや WSH [WSH] の Run メソッドや Exec メソッドを利用して他のアプリケーションを実行することも可能です。発想力次第では高機能なプログラムの開発をガジェットで実現できます。

比較的に習得が容易で一般的な既存の技術によって開発できるので、知識が全く無くても、独りでパソコンを使える方なら、多少の勉強と情報収集、そして何より発想力と根気があれば、誰でも何か形作れるかと思います。もし、貴方が過去に Windows Script Host [WSH] や HTML Applications [HTA] で製作した作品があるならば、それらをガジェットに移植するのは難しくありません。

ちなみに、私が作成／公開しているガジェットは、本サイト内のソフトウェア工房から入手できます。私の開発環境は、常日頃より愛用しているxyzzyです。ガジェット開発に際しては、xml-mode 又は html+-mode、jscript-mode 又は javascript-mode、css+-mode（自作）等の拡張メジャーモードが役立つのでお勧めです。また、画像処理には GIMP for Windows（日本語版）を使用しています。

ガジェットを作成する手順

Windows サイドバー ガジェットを作成する手順は、所謂ウェブページ（通常の X/HTML 文書）を作成する手順と変わりありません。作成するガジェットの機能の大小等に関係なく、大まかに次の流れで作業を進めることになります。

1. ガジェットを格納する為のディレクトリ（*.gadget）の作成
2. ガジェット本体であり UI となる HTML ファイル（*.html）の作成
3. ガジェットに設定機能を提供する場合に限り、設定機能の UI となる HTML ファイル（*.html）の作成
4. ガジェットの情報を明示しておく XML ファイル、ガジェット マニフェスト（gadget.xml）の作成
5. 完成したガジェットの動作テストとバグの修正
6. ガジェットのインストールパッケージ（*.gadget）の作成

ユーザインターフェイス

Windows サイドバー ガジェットのユーザインターフェイス（UI）は、X/HTML [X/HTML] で内容の構造や情報などをマーク付けした HTML ファイルにより提供します。この為、所謂ウェブページ（通常の X/HTML 文書）の作成経験がある方であれば、Windows サイドバー ガジェットを容易に作成することができます。

Microsoft 社が想定しているガジェットの UI で使われ得るマーク付け言語は、[X/HTML] を模した HTML モドキとも言える MSHTML であることは、MSDN（相変わらず酷いマーク付けだな・・・）で参照できる Windows サイドバー ガジェットについての関連文書から見て取れる。そもそもガジェットは Windows Vista 専用なので、通常のHTML文書のように標準準拠や各種仕様を考慮する必要は無い。つまり、妥当（valid）且つ厳密（strict）なマーク付け等に拘る必要は一切無用──。とも言えなくも無い。ガジェットの作成においても、飽く迄標準仕様に拘るかどうかは、個々の製作者の理念と判断によるところだろう。

機能

Windows サイドバー ガジェットの機能は、ガジェット本体であり UI となる HTML ファイルと連携するか、又はそれに直接組み込まれるプログラムにより実現します。このプログラムは、所謂ウェブページ（通常の X/HTML 文書）と同じく、ガジェットが起動する際に実行されたり、組込みイベントにより何らかのイベントが発生した際などに実行されたりします。script 要素中のスクリプトが実行される点は、通常の X/HTML 文書に添付したスクリプトが実行されるのと何ら変わりありません。

背景

Windows サイドバー ガジェットの背景（即ち表示を行う表面）には、色と画像を指定できます。

背景に画像を指定する場合、不透明度を設定できる PNG 形式の画像ファイルを指定することで、透過部分にデスクトップを透かすことができます。つまり、ガジェットの形状を単に角が尖った四角形ではなく丸型やハートなどの任意の形状で表現できます。

g:background要素 [GadgetAPI]

XHTML [XHTMLMOD] を拡張する g:background 要素（要素内容は空）は、ガジェットの背景に画像を埋め込む。通常は src 属性が指し示す画像が背景として適用されるが、src 属性が未指定の場合には背景が透過する（つまり背景が無色透明になる）。また、要素識別子（id 属性と class 属性）を付与できる。尚、接頭辞 g に名前空間はありません。

[XHTML1] における使用例

<g:background id="imgBackground" src="background.png" />

System.Gadget.backgroundプロパティ [GadgetAPI]

スクリプトの記述によりガジェットの背景に画像を指定します。

[ECMAScript] ([JavaScript], [JScript]) における使用例

System.Gadget.background = "background.png";

backgroundプロパティ [CSS], [DOM2-Style]

CSS によりガジェットの背景に画像を指定します。背景プロパティを指定する場合、html 要素より寧ろ body 要素に背景指定することを推奨する。

[CSS] における使用例

body { background: url("background.png"); }

[ECMAScript] (DOM2 CSS2 [DOM2-Style]) における使用例

document.body.style.backgroundImage = "background.png";

筆者の見解として、厳密なマーク付けの観点からすると、g:background 要素の使用は推奨できない。DTD なりスキーマを拡張さえすれば文書の構造として問題ないが、視覚的表現を文書内容と分離するという観点からしてもやはり推奨できない。

設定ダイアログ

ガジェットの設定ダイアログの UI となる HTML ファイルを用意すると、Windows サイドバー ガジェットで設定機能を提供することができます。ガジェットに設定機能を実装することで、ユーザ設定の変更や適用が行えます。

ガジェットの設定ダイアログの UI では、HTML [HTML] のフォームを利用します。そして、特定のイベントが発生する度に実行されるスクリプトを用います。具体的には、Windows サイドバー ガジェット専用の API [GadgetAPI] を使用し、ガジェットの設定ダイアログでは System.Gadget.onSettingsClosing プロパティ、ガジェット本体では System.Gadget.onSettingsClosed プロパティにそれぞれハンドラ関数の設定が必要になります。

ガジェット マニフェスト

ガジェット マニフェスト [GadgetManifest] は、Windows サイドバー ガジェットの為に一般的構成や情報を含むXMLファイルです。マニフェストによって指定された情報は、ガジェット、及びガジェット ギャラリでユーザに提示されます。

ローカライズ

Windows サイドバー ガジェットをローカライズ（ある国向け用）するには、以下のような手順を踏みます。

1. ガジェットのディレクトリの中にローカライズする言語ごとのディレクトリを新規作成します。作成したディレクトリにその言語用のガジェットを格納します。仮に英語用のガジェットを作成する場合には「en-US」、日本語用のガジェットを作成する場合には「ja-JP」ディレクトリとします。特に言語に依存しないガジェットであれば、言語ごとのサブディレクトリは必要ありません。
2. 各言語用ディレクトリにその言語の為のガジェット マニフェスト（gadget.xml）ファイルを作成します。
3. 各言語用ディレクトリにローカライズを必要とするファイルを配置します。

インストールパッケージ

Windows サイドバー ガジェットのパッケージの作成方法は、作成したWindows サイドバー ガジェットを ZIP 形式で可逆圧縮した後にファイル名拡張子を gadget に変更するだけと至って簡単です。そして、インストールするには、拡張子が gadget のファイルを実行するだけです。

もしも、パッケージにデジタル署名を付加したい場合には、圧縮形式に CAB 形式を用います。デジタル署名が付加されたパッケージでは、ユーザがパッケージの信頼性を確認した上でインストールを実行できます。然しながら、デジタル証明の取得や維持には、第三者機関が絡むので当然費用が発生します。ですから、企業や団体等が配布する場合を除き、個人が趣味で作成・配布する場合においては、一般的にZIP形式が殆どでしょう。