ガジェット
独自の Windows Vista サイドバー ガジェットを作成する
Donavon West
この記事の内容 : :
- サイドバー ガジェットの詳細
- JavaScript のコーディングとデバッグ
- フライアウトと設定
- ローカライズ
|
この記事は次のテクノロジを使用しています:
Windows Vista、JavaScript
|
コンテンツ
ガジェットについてはおそらく既にいろいろと耳にしていることと思います。ガジェットとは、Windows Vista™ のデスクトップなどで見ることのできる軽量なアプリケーションです。現在、Microsoft では 3 種類のガジェットを提供しています。Windows Vista のデスクトップで実行されるサイドバー ガジェット、それと似ているけれど Live.com や Windows Live スペースのページで実行される Web ガジェット、およびデバイス (ラップトップやリモコン、コンピュータのキーボードなどに付いている補助ディスプレイなど) 上で実行される SideShow ガジェットの 3 種類です。
この記事では、サイドバー ガジェットの主な要素を紹介し、それらの要素を組み合わせてガジェットを作成する方法をサンプル ガジェット (Windows Vista サイドバー用の MSDN
® Magazine ティッカー) を使って説明します。ここでは、Windows Vista サイドバー ガジェットの開発のみに焦点を絞ります。したがって、ここで "ガジェット" と言う場合はサイドバー ガジェットを指すと考えてください (SideShow ガジェットの開発に関心のある方は、
MSDN Magazine 2007 年 1 月号の
Jeffrey Richter の記事を参照してください)。
サイドバー ガジェットとは
サイドバー ガジェットは、小さいけれど強力で、便利なツールです。しかし、驚くほど簡単に作成できます。実際、HTML、CSS、および JavaScript の知識があれば (そういう方は多いでしょう)、すぐにでも作成できます。
最も単純な場合、ガジェットは HTML ファイルと XML 定義ファイルだけで構成されます。もちろん、ほとんどのガジェットには、イメージ ファイル (PNG および JPG)、スタイル シート (CSS)、スクリプト (JavaScript や VBScript のソース ファイル) など、その他のファイルも含まれています。すべてのコンテンツは、拡張子を .gadget に変更した ZIP ファイルに格納されます。お望みであれば、
ガジェットをオンラインで入手して、拡張子を .zip に変更すれば、その中身を簡単に見ることができます。この方法は、他のガジェットの構成要素を調べるための方法としてお勧めです。
XML 定義ファイル
XML 定義ファイル (マニフェスト) は、ガジェットをまとめる接着剤です。このファイルをマニフェストと呼べるのかどうかは、筆者には定かではありません。というのも、このファイルにはガジェットのすべてのファイルへのリンクが含まれているわけではないからです。このファイルに含まれているリンクは、メイン HTML ファイル (このファイルに他のファイルへのリンクが含まれています)、いくつかのアイコン ファイル、およびガジェット作成者の Web サイトへのリンクだけです。
図 1 は、一般的な XML 定義ファイルのスケルトンを示しています。ここからわかるように、このファイルは、ガジェットの base 要素を含む標準の XML ファイルです。重要な要素を以下に示します。
Figure 1 典型的な XML 定義ファイル
<?xml version=”1.0” encoding=”utf-8” ?>
<gadget>
<name>Gadget Name Here</name>
<namespace>YourCompanyNameHere</namespace>
<version>1.0.0.0</version>
<author name=”Company Name Here”>
<info url=”http://contoso.com” text=”Vist our Web site” />
<logo src=”logo.png” />
</author>
<copyright>© 2007</copyright>
<description>your gadget description</description>
<icons>
<icon width=”64” height=”64” src=”icon.png” />
</icons>
<hosts>
<host name=”sidebar”>
<base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />
<permissions>full</permissions>
<platform minPlatformVersion=”0.3” />
</host>
</hosts>
</gadget>
- name: ガジェットのタイトルです。
- version: ガジェットのバージョン番号です。
- author: ガジェットの作成者またはその会社の名前です。
- info url: Web サイトのアドレスです。
- info text: Web サイトのわかりやすい名前です。
- logo src: 会社のロゴのイメージ ファイルの名前です。
- copyright: 著作権情報です。
- description: ガジェットの説明です。
- icon src: ガジェットのアイコン イメージ ファイルの名前です。
- base src: ガジェットのメイン HTML ファイルの名前です。
定義ファイルの要素のほとんどは、ガジェットをギャラリーに表示するために使用されます。実際の機能を持つ要素は、base 要素の src 属性だけです。この属性は、ガジェットを起動する HTML ファイルを参照します。筆者はこのファイルに gadget.html という名前を付けるようにしていますが、任意の有効なファイル名を使用できます。
メイン HTML ファイル
ガジェットの実装は、最大幅 130 ピクセルの HTML ページにすぎません。メイン HTML ファイル (XML 定義ファイルで参照されているファイル) は、一見しただけではわかりませんが、実際には Internet Explorer® 7 のウィンドウに読み込まれます。もちろん、このウィンドウにはクロムがなく、場所もサイドバーによって制御されていますが、ウィンドウの中身は基本的にすべて Web アプリケーションで、標準の Web ページと同様に、DOM や大半の API にアクセスできます。したがって、AJAX の手法を使用したり、ダイナミック HTML 要素を作成したり、イベントをトラップしたりできます。後ほどサンプル ガジェットの作成プロセスを説明する際には、これらやその他の操作の実例を紹介します。
そのほか、サイドバー ガジェット オブジェクト モデルの API も使用できます。これらの API は、ガジェットとシステムとのインターフェイスを提供します。たとえば、ワイヤレス ネットワーク カードの信号強度を読み取ったり、サウンド ファイルを再生したり、CPU 使用率を調べたりできます。
ガジェットの HTML を見ると、標準の Web ページの HTML と区別できるものは何もないことがわかります。以下の HTML コードは、筆者がほぼすべてのサイドバー ガジェット プロジェクトで出発点として使用しているものです。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script src=”local.js” type=”text/javascript”></script>
<script src=”gadget.js” type=”text/javascript”></script>
</head>
<body>
<div id=”gadget” class=”gadget”></div>
</body>
</html>
このサンプルでは、ガジェットの HTML はすべて gadget.js JavaScript ファイル内から動的に作成されます。ほとんどのマークアップをメイン HTML ファイルに含めることもできますが、それではおもしろくありません。
ここでは CSS スタイル シートを使用しています。これにより、ガジェットの外観が決まります。他の Web ページの場合と同様に、見栄えの良いガジェットをデザインするうえでスタイル シートは欠かせません。したがって、プロ級のガジェットを作成するには CSS についての十分な知識が必要です。
ここで指摘しておきたいことが 1 つあります。ガジェットのメイン HTML ファイルの開発は、オンラインに展開されるページの作成とまったく変わりませんが、ガジェットの実装には大きな利点があります。それは、ブラウザの互換性の問題を気にかける必要がないということです。ガジェットは常に Internet Explorer で実行されるため、Internet Explorer の機能 (PNG アルファのネイティブ サポートなど) がサポートされることを前提にして開発できます。ブラウザの互換性の問題に配慮したコードを書く必要はありません。
筆者がサイドバー ガジェットの開発を始めたころは、このことでとても解放された気分になったものです。やがてそれが当たり前になり、最近 Web ページを作成することになって再びブラウザの互換性の問題に対処しなければならなくなったときには、自分がひどくイライラしていることに気付きました。
JavaScript
ガジェットでなにかおもしろいことをするつもりなら、JavaScript の技術を磨き直すことです。Internet Explorer 7 でサポートされているものであればどのスクリプト言語でも使用できますが、"インターネット" 上のガジェット サンプルはほとんどが JavaScript で書かれています。
JavaScript をかじったことがある方なら、"eval is evil" という言葉を耳にしたことがあるでしょう。ご存じない方は、まず Web で調べてから続きをお読みください。
eval を使用すべきでない理由をおわかりいただけたところで、ここではこの規則に修正を加えて、JavaScript のテキストを HTML 内の属性に配置すべきではないという規則と、setInterval や setTimeout に文字列を渡すべきではないという規則を付け加えたいと思います。JavaScript のテキストを配置してはいけない属性には、body onload 属性も含まれます。この属性は eval ステートメントと同じように内部で解釈されるからです。
"body onload がだめならどうやってコードを実行するんだ" とおっしゃる方もいるでしょう。そのような方には、window オブジェクトの onload イベントに関数をアタッチする習慣を付けることをお勧めします。次のコードは、onload イベントと onunload イベントへのアタッチの方法を示しています。
function pageLoad() {
window.detachEvent(“onload”, pageLoad);
window.attachEvent(“onunload”, pageUnload);
//page initalization here
}
function pageUnload() {
window.detachEvent(“onload”, pageUnload);
//gadget is closing, clean up
}
window.attachEvent(“onload”, pageLoad);
この方法を使用すると、ページが完全に読み込まれた後 (DOM が完成したとき) に pageLoad 関数が呼び出されます。pageLoad では、まず最初にイベントをデタッチしています。JavaScript では、メモリ リークを防ぐために常に後片付けを心がけるようお勧めします。
次に、onunload イベントを設定しています。このイベントは、ガジェットが破棄されたとき (ユーザーがガジェットを閉じたときか、サイドバーがシャットダウンしたとき) に呼び出されます。これも、メモリ リークの原因となる参照を解放するための処置です。また、設定を保存する必要がある場合は、これが最後のチャンスになります。設定については後ほど詳しく説明します。
そろそろ、筆者が正しいきれいな JavaScript を書くことについていささか口うるさいところがあると気付かれたかもしれませんが、もう 1 つだけ言わせてください。コードを配置する前に、ぜひ "lint" を実行するようにしてください。これにより、コードを改善できるだけでなく、バグを発生前に根絶できる可能性もあります。
lint は、元々は C ソース コードの問題領域を指摘するツールの名前でしたが、現在ではさまざまなソース言語に適用される一般用語になっています。JavaScript 用の lint アプリケーションとしては、JSLint という無償のオンライン ツールなどがあります (
www.jslint.com で入手できます)。
MSDN Magazine 2007 年 5 月号には、「
オブジェクト指向の手法によって高度な Web アプリケーションを作成する」という Ray Djajadinata による JavaScript についての優れた記事が掲載されています。この記事をまだ読んでいない方はぜひ読んでみてください。より良いガジェットを作成するうえで大いに役に立ちます。
ドッキングとフローティング
ガジェットがサイドバーに収まっている場合、そのガジェットはドッキング状態にあると見なされます。デスクトップ上にドラッグされたガジェットは、フローティング状態 (ドッキングされていない状態) になります。既に述べたように、ドッキングされているガジェットの最大幅は 130 ピクセルです。一方、ドッキングされていないガジェットには幅の制限がないため、拡大されるビューをデザインすることができます。この追加の領域を活用して、より豊かなユーザー エクスペリエンスを提供できます (Microsoft では、ドッキングされていないガジェットを 400 ピクセル四方に収めるよう推奨しています)。
図 2 は、2 つのガジェットのドッキング状態とフローティング状態を示しています。1 つは筆者の MSDN Magazine ティッカー ガジェット (最新号の記事のヘッドラインをスクロールして表示します)、もう 1 つは天気ガジェット (Windows Vista に付属しています) です。天気ガジェットは、フローティング状態でより豊かなユーザー エクスペリエンスを提供するガジェットの好例です。ドッキング状態では現在の気温しか表示されませんが、フローティング状態になると 3 日分の詳しい天気予報が表示されます。MSDN Magazine ティッカー ガジェットでは追加の情報は表示されません。拡大されて、同じ情報が大きく表示されるだけです。
図 2 ドッキング状態のガジェットとフローティング状態のガジェット (画像を拡大するには、ここをクリックします)
ガジェットには、特に文書化されてはいませんが、最小 57 ピクセルという高さの下限もあります (ドッキング状態かフローティング状態かに関係なく適用されます)。これは単純に、フローティング状態のガジェットのツール バーの高さが 57 ピクセルだからです (図 3 を参照)。
図 3
ガジェットの現在の状態は System.Gadget.docked で照会できます。ドッキング状態の場合は true が、ドッキングされていない状態の場合は false が返されます。そのほか、System.Gadget.onDock と System.Gadget.onUndock という 2 つのイベントを監視することで、ドッキング状態がいつ変化したかを特定できます。
onDocked イベントや onUndocked イベントから document.body のクラスを変更するだけでは、ガジェットの高さ、幅、背景イメージなどを変更することはできません (これは筆者の当初の期待に反する動作でした)。body 要素の style オブジェクトのプロパティを明示的に設定する必要があります。背景イメージを変更するには、System.Gadget.background API を使用して背景イメージのファイル名を設定します。次に例を示します。
// called when the docked state changes
function dockStateChanged() {
if (System.Gadget.docked) {
System.Gadget.background = “images/background.png”;
document.body.style.width = “130px”;
} else {
System.Gadget.background = “images/background-undocked.png”;
document.body.style.width = “230px”;
}
}
フライアウト
フライアウトは、ユーザー インターフェイスをガジェットの境界の外部に拡張します。このウィンドウは、あらゆる目的で使用できます (フライアウト ウィンドウにはサイズの上限はありません)。フライアウトを使用するガジェットの良い例が、Windows Vista に付属の株価ガジェットです。株をクリックするとガジェットの横にウィンドウがフライアウトして、値動きのグラフが表示されます (図 4 を参照)。そのほか、Live Search ガジェットでもフライアウトが使用されており、入力したクエリの検索結果が表示されます。図 5 は、この記事の MSDN Magazine ティッカー ガジェットのフライアウトを示しています。ヘッドラインをクリックすると、ドッキングされたガジェットの UI が拡張されて、記事のタイトル、説明、および執筆者の名前が表示されます。
図 4 フライアウトを表示している株価ガジェット (画像を拡大するには、ここをクリックします)
図 5 フライアウトを表示しているティッカー ガジェット (画像を拡大するには、ここをクリックします)
サイドバー ガジェットのフライアウトはシステム モーダルであるため、一度に 1 つしか表示できません。ユーザーがガジェット A をクリックしてフライアウトを表示した後に、ガジェット B をクリックして別のフライアウトを表示すると、ガジェット A のフライアウトは閉じます。また、ガジェットがフォーカスを失った場合も、そのガジェットのフライアウトが閉じます。
フライアウトの API は、System.Gadget.Flyout オブジェクトで公開されています。フライアウトのウィンドウはメイン HTML のウィンドウから完全に分離されているため (独自の DOM があります)、独立したフライアウト HTML ファイルを (必要なサポート ファイルと共に) 別に用意する必要があります。フライアウト ファイルを指定するには、System.Gadget.Flyout.file をフライアウト HTML ファイルの名前に設定します。
メイン ウィンドウとフライアウト ウィンドウの通信のために使用できる API もあります。System.Gadget.Flyout.document は、フライアウト ウィンドウの Document オブジェクトを返します。これをガジェットのメイン ウィンドウで使用すると、フライアウト ウィンドウの HTML を動的に生成できます。
メインのコードとフライアウトのコードの両方でキャプチャできるイベントもあります。たとえば、フライアウトのドキュメントが作成された直後に呼び出される onShow や、フライアウトのドキュメントが破棄される直前に呼び出される onHide などがそうです。
System.Gadget.Flyout.show を true または false に設定することで、フライアウトをプログラムで表示したり非表示にしたりすることができます。また、この値を読み取ると、フライアウト ウィンドウの現在の状態がわかります。
フライアウトの位置は制御できないということを覚えておいてください。フライアウトの位置は、画面上のスペースやガジェット自体の位置に基づいてサイドバーによって決定されます。たとえば、ガジェットの左に表示される場合もあれば、右に表示される場合もあります。下に表示されることさえあります。
オプション ダイアログ
オプション ダイアログを使用すると、ガジェットの設定の一覧をユーザーに表示できます。あらゆるユーザー エクスペリエンスを提供可能で、オプション ボタン、チェック ボックス、およびテキスト ボックスを含む標準の Web ページのようなダイアログにすることもできます。
ユーザーは、ガジェットのツール バーにあるスパナのアイコンをクリックしてオプション ダイアログにアクセスできます (図 3 を参照)。ツール バーは、マウス ポインタをガジェットの上に移動すると表示されます。ガジェットのオプション ダイアログを開くと、ガジェットのスナップショットが小さなアイコンとして表示されます (図 6 を参照)。
図 6 オプション ダイアログ
ここで 1 つ指摘しておきたいのですが、このダイアログの名前についてはややあいまいなところがあり、ガジェットを右クリックしたときに表示されるメニューでは "オプション" と呼ばれていますが、API では "settings" と呼ばれています。
ユーザー設定は、最近使用されている XML ファイルではなく、1990 年ごろに使用されていた INI ファイルに格納されています。最初にこれを知ったときには少し驚きましたが、さいわい、設定を読み書きするためのガジェット API があるので、開発者にとってもアプリケーションにとっても、設定がどこにどのような形で格納されていようとほとんど問題になりません。
オプションの UI の作成に関しては、注意すべき点がいくつかあります。まず、ダイアログのユーザー領域の幅は最大 300 ピクセルに制限されています。高さの制限はありませんが、「Windows Vista ガジェットのための Microsoft UX Guide」では、幅は 278 ピクセル以内、高さは 400 ピクセル以内にするように推奨されています。これより大きなスペースが必要な場合は、タブ付きダイアログを作成することを検討してください。タブ UI の実装方法についてはここでは説明しませんが、Web でいくらでも調べることができます。
ガジェットでオプション アイコンが有効になるようにする必要があります。そのためには、System.Gadget.settingsUI を HTML ファイルの名前に設定します。これは、スクリプトのガジェット初期化領域で行われるのが一般的です。そのほか、オプション ダイアログが閉じるときのコールバック関数を設定する必要もあります (ガジェットが新しいユーザー設定を読み取れるようにするため)。そのためには、System.Gadget.onSettingsClosed をハンドラの名前に設定します。以下に例を示します。
System.Gadget.settingsUI = “settings.html”;
System.Gadget.onSettingsClosed = settingsClosed;
function settingsClosed(p_event) {
//OK clicked?
if (p_event.closeAction == p_event.Action.commit) {
//yes, read settings here
}
}
この例からわかるように、ハンドラが呼び出されるときにイベント オブジェクト (System.Gadget.Settings.ClosingEvent イベント オブジェクト) が渡されます。ClosingEvent オブジェクトの closeAction プロパティに含まれている値が commit だった場合は、ユーザーが [OK] を選択したことになるため、新しい設定を読み取る必要があります。それ以外の場合は、オプション ダイアログがキャンセルされたことになるため、設定を読み取る必要はありません。
設定の読み取りと書き込み
設定の書き込みには、System.Gadget.Settings.write か System.Gadget.Settings.writeString を使用します。これらは、どちらもキーと値のペアを受け取ります。
反対に、設定を読み取るには、System.Gadget.Settings.read か System.Gadget.Settings.readString を使用します。これらの関数は、どちらもキーを受け取って値を返します。渡されたキーが存在しない場合は (書き込まれていない場合など)、どちらも undefined という値を返します。
JavaScript は厳密に型指定された言語ではないため、write や read を使用すると、サイドバーが型変換を行おうとします。書き込まれる内容や読み取られる内容に確信が持てるようにするには、writeString と readString を使用することを検討してください。これらの関数は文字列を前提とします。問題となるデータの型に応じて最適なメソッドを判断する必要があります。
ローカライズ
サイドバー ガジェットでは、"ローカライズ フォルダ" によるローカライズがサポートされています。サイドバーは、アセット (ガジェットのマニフェスト、スタイル シート、イメージ ファイル、JavaScript ファイルなど) を読み込む際に必ず次の順序でファイルをフォルダで検索します。
- 完全なロケール (en-us、es-us、ja-jp)
- ロケールの言語部分 (en、es、ja)
- ガジェットのルート フォルダ
たとえば、米国版の Windows Vista を実行していて、設定がスペイン語になっている場合は、es-us フォルダが最初に検索されます。そこでファイルが見つからなければ、es フォルダが検索されます。そこでも見つからない場合は、最後にガジェットのルート フォルダが検索されます。
言語が重要なのは明らかですが、場所はどうして重要なのでしょうか。実際に、ガジェットによっては場所がとても重要になります。たとえば天気ガジェットがそうです。"sunny" という単語は米国のユーザーにも英国のユーザーにも表示できますが、気温を華氏で表示するか摂氏で表示するかは場所によって決まります (米国では華氏、英国では摂氏) 。
ガジェットで英語のみをサポートする開発者も多いでしょうが、ロケールが重要になる場合は、言語固有の文字列と場所固有の変数のすべてを local.js という 1 つの JavaScript ファイルにまとめて、そのファイルをガジェットのルート フォルダに配置することをお勧めします。その後、サポートする各ロケールのフォルダを作成し、翻訳したバージョンの local.js をそれぞれのフォルダにコピーします。以下は、ルート フォルダにある (en-us を表す) local.js ファイルの例です。
var L_Hello = “Hello”;
var L_Degrees = 0;
同じファイルが、\es-es フォルダでは次のようになります。
var L_Hello = “Hola”;
var L_Degrees = 1;
"Hello" と表示する場合は、ハードコードされた文字列ではなく変数 L_Hello を使用し、天気を問い合わせる場合は、L_Degrees を使用して正しい形式を要求します。これにより、あいさつ文が正しい言語で生成され、気温がユーザーの設定に応じた形式で表示されます。メインの JavaScript コードで文字列を使用したり気温の単位を特定したりするには、次のようにします。
element.innerHTML = L_Hello;
if (L_Degrees === 0) {
//load the Fahrenheit feed
} else {
//load the Celsius feed
}
ご覧のように、サイドバーに読み込まれた local.js ファイルに応じて対応が変化します。なかなか良いと思いませんか。
この場合は、ルート フォルダに英語の local.js があるので、サポートされていないロケールに対してもガジェットがフォールバック言語 (この場合は英語) で機能します。ガジェットのルート フォルダで既定の言語をサポートすることは非常に重要です。既定の言語が用意されていないと、サポートされていない言語 (サブフォルダが作成されていない言語) をユーザーが使用した場合に空白の文字列が表示されます。
警告と確認をエミュレートする
Web サイトで、"入力が無効です。やり直してください" というような警告や、"レコードを削除します。よろしいですか?" というような確認のダイアログを目にしたことがあるかと思います。このようなメッセージをポップアップで表示したい場合はよくあります。
しかし、サイドバーではこれらの JavaScript 機能が無効になっています。これは、ポップアップ ダイアログを使用することはサイドバー ガジェットの Windows Vista UX ガイドラインに反するからです。それでもポップアップを使用せざるを得ない場合は、これらの機能をエミュレートすることができます。
そのためには、まず、HTML の head 要素に単純な 1 行のタグを挿入します。
<script src=”alert.vbs” type=”text/vbscript”></script>
次に、図 7 に示すコードを含むファイルを作成し、alert.vbs という名前を付けます。これで、お望みどおり、警告や確認を引き続き使用できるようになります。
Figure 7 警告と確認のエミュレート
‘simulate JavaScript alert() function
sub alert(prompt)
MsgBox prompt, 48 , “Sidebar Gadget”
end sub
‘simulate JavaScript confirm() function
function confirm(prompt)
dim res
res = MsgBox (prompt, 33, “Sidebar Gadget”)
if res=1 then
confirm = true
else
confirm = false
end if
end function
デバッグ
JavaScript のデバッグは常に問題になります。コードに警告を配置して変数の値を表示するという方法に頼る開発者も多いですが、スマートな解決策とは言えません。ここでは、より良い方法として、Visual Studio® (無償の Visual Web Developer™ 2005 Express Edition でもかまいません) を使用する方法を紹介します。
単純に、コードで変数の値をチェックする必要がある箇所にデバッガ ステートメントを配置して、ガジェットを実行します。デバッガ ステートメントが実行されると、アプリケーションをデバッグするかどうかをたずねるポップアップが表示されます (図 8 を参照)。ここで [はい] を選択すると、DOM を含むガジェットの環境全体を参照して、作成された任意の変数の値を表示できます。ガジェットは実質的にその時点で停止します。
図 8 ガジェットをデバッグしますか? (画像を拡大するには、ここをクリックします)
図 9 は、デバッグ コードのセクションを示しています。変数 refreshRate の値が 24 になっています。この形式のデバッグは非常に強力で、一度これを体験すると、警告ステートメントをまき散らす方法には戻れなくなります。"Orcas" というコードネームで呼ばれる次のバージョンの Visual Studio では、JavaScript のデバッグが大幅に強化されています。これらの新機能の詳細については、「
Visual Web Developer Orcas で JScript をデバッグする」を参照してください。"Orcas" の Beta 1 は、msdn2.microsoft.com/aa700831 でダウンロードできます。
図 9 Visual Studio でのガジェットのデバッグ (画像を拡大するには、ここをクリックします)
ガジェットをパッケージ化する
パッケージを作成する最も簡単な方法は、エクスプローラを使用する方法です。ガジェットを構成するファイルを選択して右クリックし、[送る] をポイントして、[圧縮 (zip 形式) フォルダ] をクリックします。
Microsoft のネイティブ圧縮アーカイブ形式である CAB ファイルとしてガジェットをパッケージ化することもできます。CAB ファイルを生成し、拡張子を .gadget に変更するだけです (余談になりますが、.gadget ファイルの拡張子を .zip に変更してファイルを開こうとするとエクスプローラで警告が表示される場合は、代わりに拡張子を .cab に変更してみてください)。
ガジェットをプログラムで生成する場合はいくつかの方法があります。筆者の場合は、以下に示す make.bat というバッチ ファイルをプロジェクトで作成しています。
@echo off
rem ** remove/create a test gadget folder
rd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
Gadgets\MSDNSample.gadget\” /s /q
md “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample.gadget\”
rem ** copy all of the files into test area
xcopy . “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
Gadgets\MSDNSample.gadget\” /y /s /q /EXCLUDE:exclude.txt
cd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample\”
cabarc -r -p n “%HOMEPATH%\Documents\MSDNSample.gadget” *
ここでは、Cabarc.exe ユーティリティを使用して CAB ファイルを生成しています (Cabarc.exe は、Visual Studio と共にインストールされる Microsoft の無償ツールです。Cabinet SDK の一部として別に入手することもできます。Cabinet SDK は、
support.microsoft.com/kb/310618 からダウンロードできます)。
make.bat を外部ツールとして設定して Visual Studio 2005 から実行すると、ユーザー ガジェット フォルダ (インストール時にガジェットが作成される場所) の下にフォルダが作成され、その新しいフォルダにすべてのガジェット ファイルがコピーされます。さらに、配布可能な .gadget ファイルが生成されて、Documents フォルダに配置されます。この方法を使用する場合は、開発マシンにガジェットをインストールするために .gadget ファイルをダブルクリックする必要はありません。筆者がこの方法を気に入っているのは、ガジェットと共にパッケージ化しないその他のソース ファイル (Photoshop の PSD ファイルなど) を Visual Studio のプロジェクト フォルダに残しておけるからです。この方法を使用する場合は、除外するファイルの名前を exclude.txt ファイルに含めるのを忘れないようにしてください。
MSDN Magazine ティッカー
以上でガジェットの基本コンポーネントをすべて紹介できたので、次に、すべての要素を組み合わせたサンプル ガジェットを見てみましょう。この MSDN Magazine ティッカー ガジェットは、ダウンロードしてインストールしたり中身を調べたりできます。
このサンプル ガジェットを作るにあたっての筆者のねらいは、サイドバー ガジェットの主な機能 (フライアウト、ドッキング状態とフローティング状態、オプション、ローカライズなど) をすべて使用することでした。その一方で、できるだけシンプルで、ある程度役に立つサンプルを作りたいとも考えました。
その結果、ニュースのヘッドラインを表示する RSS リーダーというアイデアに落ち着きました。このサンプルは
MSDN Magazine の記事のためのものなので、今月号のすべての記事の RSS フィードを使用するというのは当然の選択に思えました (この RSS フィードは
msdn.microsoft.com/msdnmag/rss/rss.aspx で提供されています)。このガジェットは、ニュースやスポーツのヘッドラインのフィードを使用したり、1 つのデータ ソースにまとめた複数のフィードを使用したりすることによって、よりダイナミックで有益なものにすることができます。
Windows Vista サイドバーには既にフィード ヘッドライン ガジェットが用意されていますが、このサンプルは、それとは情報の提示の仕方が異なります。このサンプルでは、テレビのニュース番組で画面の下に表示されるテロップのような形式でヘッドラインが表示されます。
また、このサンプル ガジェットは、Windows Vista に付属のものに比べてはるかにコンパクトです。高さは 57 ピクセルしかありません (既定のガジェットの高さは 175 ピクセルです)。小さな画面 (または混雑したサイドバー) ではスペースが貴重になるため、このサンプルが役に立ちます。
このガジェットは、ここで紹介したすべての推奨事項に従っています。その例としては、ヘッドラインをクリックするとフライアウトに詳細な情報が表示される、オプション ダイアログでフィードの再読み込みの間隔を 3 つの中から選択できる、フローティング状態になるとサイズが変わる、ローカライズ フォルダを使用して複数の言語をサポートしている、などが挙げられます。
ここでは、サイドバー ガジェットについて、いかに簡単かを示すためにごく基本的な内容を説明したにすぎません。サイドバー ガジェットでは、このほかにもいろいろなことが可能です。詳細については、「その他のリソース」のリンクを参照してください。
Donavon West は、フリーのコンサルタントおよび
LiveGadgets.net の CTO (最高技術責任者) として働いています。Windows Live 開発の Microsoft MVP でもあります。シカゴ出身ですが、現在はボルティモア/ワシントン DC 地域に住んでおり、Windows Vista サイドバー ガジェットと Web ガジェットの両方のガジェット開発コミュニティで積極的に活動しています。Web サイトのアドレスは
www.livegadgets.net です。