HTMLの表示
適切なマニフェストを用意することができれば、ガジェットを表示するのは簡単です。base要素のsrc属性に指定したHTMLファイルを用意すれば、Sidebar上に指定したHTMLファイルを表示することができます。通常、ガジェットはJavaScriptを使ったプログラムですが、HTMLファイルを表示するだけならこれまでの内容だけで実現することができます。ただし、ガジェットはブラウザのように自由にサイズ変更ができるものではありません。HTMLファイルのbody要素に、CSSで明示的にガジェットの幅と高さを指定してください。
<body style='width:幅; height:高さ; '>
通常、サイドバーの内部に収められるガジェットの幅は125ピクセルとなります。高さはある程度自由に設定できますが、他のガジェットとの関係やレイアウト上の問題から100ピクセル前後が適切でしょう。それ以上の大きなガジェットは、Windows Sidebarからはみ出してしまいます。「Test.gadget」フォルダにある「test.html」を上記のように編集して保存してください。
<html> <head> <title>Gadget sample</title> </head> <body style='width:125px; height:60px;'> <p>ごきげんよう</p> </body> </html>
これで、ガジェットとしてSidebar上に表示することができます。ガジェットを表示するには、Sidebar上で右クリックし、表示されたショートカットメニューから［ガジェットの追加］を選択してください。
［ガジェットの追加］項目を押すと、図2のように追加するガジェットの選択ダイアログが表示されます。ガジェットのリストの中にマニフェストで記載した「Test Gadget」ガジェットが追加されていれば成功です。目的のガジェットがリストに表示されない場合、マニフェストが間違っているか、マニフェストが配置されているフォルダやファイル名が間違っている可能性があります。
Test Gadgetを選択すれば図3のように「test.html」が表示されます。HTMLファイルを表示するだけならば、これまでの内容だけで十分です。「test.html」ファイルを編集して、自由にガジェットのコンテンツを変更することができます。
Sidebarオブジェクト
ガジェットを実行し、表示させることはできました。次はWindowsが用意しているガジェットのように、ビジュアルに動いたり、何らかのデータを処理するものを作ってみましょう。
ガジェットはJavaScriptを使うことで、アニメーションを表示したり、ユーザーがクリックしたときにイベント処理を実行したりすることができます。しかし、スクリプト言語による操作を行いたくても、肝心のデータがありません。Windows Vistaが用意しているCPU使用率のメーターや時計のようなガジェットを作るには、システム情報を取得する必要があります。
Windows Sidebarは、ガジェット内のスクリプトからアクセスすることができるいくつかのオブジェクトを提供しています。これらSidebarが提供するガジェット用のオブジェクトは、必ず「System.」から始まります。代表的なオブジェクトは、ガジェットそのものを表すSystem.Gadgetオブジェクトです。System.Gadgetオブジェクトはさまざまなイベント、メソッド、プロパティを提供しています。
例えば、実行しているガジェットの名前はnameプロパティから、バージョンはversionプロパティから取得することができます。
[ strNameResult = ] System.Gadget.name
[ strPlatformVersion = ] System.Gadget.version
nameプロパティは、マニフェストに記載されているガジェットの名前を返します。versionプロパティは、バージョンを返します。
<html> <head> <title>Gadget sample</title> <script> function initLabels() { nameLabel.innerText = System.Gadget.name; versionLabel.innerText = System.Gadget.version; } </script> </head> <body style='margin:0px; width:125px; height:100px;' onload='initLabels()'> <p> name:<span id='nameLabel'></span><br/> ver:<span id='versionLabel'></span> </p> </body> </html>
Sample 01は、ガジェット上に自分自身のガジェット名とバージョンを表示するというプログラムです。body要素のonloadイベント発生時にinitLabels()関数を呼び出しています。initLabels()関数では、名前を表示するspan要素を表すnameLabelの内部テキストと、バージョンを表示するspan要素を表すversionLabelオブジェクトの内部テキストに、それぞれSystem.Gadget.nameプロパティとSystem.Gadget.versionプロパティの結果を設定しています。実行結果を見ると、名前とバージョンが適切に表示されることを確認できます。
このようにSidebarが提供するオブジェクトを利用することでシステムの情報を取得してガジェット内で利用することができます。Sidebarが提供するオブジェクトの詳細はMSDNの『Windows Sidebar Reference』ページを参照してください。ガジェットに必要なさまざまなオブジェクトの詳細が掲載されています。
ドック状態に反応する
ガジェットは、Windows Sidebarが管理するバーの内部に配置されていますが、ガジェットをバーの外にドラッグし、独立したウィンドウのようにデスクトップ上に配置することもできます。バーの内部に配置されているガジェットは「ドックされている」と表現し、バーの外に出されたフローティング状態のガジェットは「アンドックされている」と表現します。
Windows Sidebar内のガジェットの幅は125pxまでしか確保できませんでした。もちろん、それよりも大きなガジェットにすることもできますが、バーからはみ出してしまうためレイアウト上好ましくありません。必要以上に大きなガジェットは、他のガジェットとの配置の関係からも迷惑です。しかし、アンドックされたガジェットはバーの幅にこだわる必要がないため、ある程度自由にサイズを決定することができます。
図5のように、Windows Vistaが用意しているガジェットのいくつかは、バーから外すと自動的にサイズを変更して大きくなります。そして、再びバーの内部に戻すと元のサイズに縮小されます。この動作を実現するには、System.Gadgetオブジェクトのドックイベントに対応する必要があります。System.Gadgetオブジェクトは、ガジェットがバーの内部に収められたときに発生するonDockイベントと、バーの外に外されたときに発生するonUndockイベントを公開しています。
System.Gadget.onDock = handler
System.Gadget.onUndock = handler
handlerには、イベント発生時に呼び出してほしい関数を指定します。これらのイベントを受ける関数は、パラメータを受け取らず、戻り値も返しません。ガジェットがバーから外されたときにガジェット自身のサイズを変更するには、onUndockイベントが発生したときにbody要素の幅と高さを変更します。同様に、バーに戻されたときはonDockイベントが発生するのでbody要素の幅と高さを元のサイズに復元します。
また、ガジェットが現在ドックされているかどうかはdockedプロパティから取得することができます。
[ bIsDocked = ] System.Gadget.docked
これらのプロパティは、表示するコンテンツをドックされている状態と、されていない状態とで変更する場合などに利用することができます。
<html> <head> <title>Gadget sample</title> <script> System.Gadget.onDock = onDock; System.Gadget.onUndock = onUndock; function onDock() { document.body.style.width = '125px'; document.body.style.height = '100px'; } function onUndock() { document.body.style.width = '400px'; document.body.style.height = '300px'; } </script> </head> <body style='width:125px; height:100px;'> <p>ごきげんよう</p> </body> </html>
Sample 02をガジェットに追加し、バーの外にアンドックしてください。自動的にガジェットのサイズが大きくなります。再びバーの中にガジェットを戻すと、ガジェットのサイズが小さくなります。
グラフィックス要素
Windows Sidebarで用いられるHTMLファイルでは、Windows Sidebarが提供するグラフィックス関連オブジェクトにアクセスするための拡張要素を使うことができます。拡張されたいくつかの要素を使うことで、よりリッチなグラフィックスを実現することができます。
例えば、Windows Vistaが用意するガジェットは完全な矩形ではありません。時計のような円形のガジェットや角の丸いガジェットもあります。これらは、透明チャネルを含むPNGイメージを用意し、背景に設定することで実現しています。ガジェットは、設定されたPNGのアルファチャンネルを正しく認識し、透明部分の背景を透過させます。PNGイメージは、body要素に含まれているG:BACKGROUND要素に指定します。
<g:background src='イメージファイルのパス' />
G:BACKGROUND要素は、ガジェットの背景を提供するgbackgroundオブジェクトを生成します。HTMLからはsrc属性など一部のプロパティしか操作することができませんが、スクリプトを使えばさらに詳細な設定を行うプロパティを利用することも可能です。
G:BACKGROUND要素の役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置することですが、HTML上では単純にイメージを配置する要素として扱われてしまいます。本来ならば、背景画像の上にコンテンツを配置しなければなりませんが、G:BACKGROUNDの次の要素はG:BACKGROUNDから相対的な次の座標にレイアウトされてしまいます。この問題を解決するにはCSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定します。また、その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定します。これで、背景画像は他の要素よりも後ろに配置されます。
<html> <head> <title>Gadget sample</title> </head> <body style='margin:0px; width:125px; height:100px'> <g:background src='background.png' style='position:absolute; z-index:-1; width:125px; height:100px;'/> <span style='margin:5px'>ごきげんよう</span> </body> </html>
Sample 03は、ガジェットのディレクトリにある「background.png」というPNGファイルを背景に表示するガジェットです。このPNGファイルのアルファチャンネルは適切に処理され、透明部分の背景は透過されます。図6のガジェットの隅が丸くなっていることに注目してください。また、背景画像のサイズをガジェットのサイズに伸縮させるためにstyle属性内でwidthとheightを指定していることにも注目してください。
なお、このサンプルで使用している背景画像は、Windows Vistaソフトウェアコンテストで配布されている素材集を使っています。ガジェットやWPFアプリケーション＆コンテンツ作成のためであれば、コンテストへの参加にかかわらずフリーで使用できます。よりリッチなガジェット開発のために、利用してみてはいかがでしょうか。
