このコンテンツの目的Windows サイドバー ガジェットを開発するための方法をご紹介します。ここでは、Visual Studio 2005、Windows SDK の環境がそろっている前提で話をします。
Hello Worldから「Windows」キー と「R」キーを押して、ファイル名を指定して実行のダイアログを表示します。ファイル名を指定して実行のダイアログに「%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets」と入力してエクスプローラを開きます（このフォルダがガジェットのインストール先となります）。
このフォルダ内に「HelloWorld.gadget」フォルダを新規作成します。そして、このフォルダの中に「ja-JP」フォルダと「images」フォルダを新規作成します。この作成したフォルダの意味は、「ja-JP」が日本語用のガジェットを格納するためのものです。仮に英語用のガジェットを作成する場合は「en-US」フォルダとします。言語に依存しないガジェットであれば、言語ごとのサブフォルダは必要ありません。また「images」フォルダはガジェットで使用するイメージを格納するためのものです。
Visual Studio 2005 を起動して、「ファイル」メニューから「新規作成」 - 「ファイル」を選択します。ファイルの種類は「HTMLページ」を選択します。そして、「ファイル」メニューから「名前を付けてHTMLPage1.htmを保存」を選択し、保存先に先ほどのフォルダ （%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\ja-JP） を指定して、ファイル名を「HelloWorld.htm」にして保存します。 次に「ファイル」メニューから「新規作成」 - 「ファイル」を選択します。ファイルの種類は「XMLファイル」を選択します。そして、「ファイル」メニューから「名前を付けてXMLFile1.htmを保存」を選択し、保存先に先ほどのフォルダ （%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\ja-JP） を指定して、ファイル名を「gadget.xml」にして保存します。 ここまでで、作成するガジェット本体である「HelloWorld.html」とガジェットマニフェストの「gadget.xml」というファイルを作成しました。これから、ガジェットに必要なコードを作成していきます。 では「HelloWorld.htm」にガジェット本体を作成していくために、以下の HTML を記述します。 <html>
<head>
<title>Hello, World!</title>
<style>
body {
width:130;
height:50;
background: url('images/background.png');
padding-top: 5px;
}
</style>
<bodyid="contentArea">
<spanid="gadgetContent" style="font-family: font-size: 10pt font-size: 10pt; color:White">こんにちは! </span>
</body>
</html> 次に「gadget.xml」にガジェット マニフェストとして以下のコードを記述します。 <gadget>
<name>ƒnƒ[ ƒ[ƒ‹ƒh"</name>
<namespace>Example.gadgets</namespace>
<version>1.0.0.0</version>
<authorname="私です">
<infourl="www.example.com" />
</author>
<copyright>2006</copyright>
<description>最初のガジェットです</description>
<hosts>
<hostname="sidebar">
<basetype="HTML" apiVersion="1.0.0" src="HelloWorld.htm" />
<permissions>full</permissions>
<platformminPlatformVersion="0.3" />
</host>
</hosts>
</gadget> そして「HelloWorld.html」で指定している画像ファイル「background.png」を「%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\images」 フォルダに配置します。
これで HelloWorld ガジェットの完成です。Windows サイドバーからガジェット ギャラリを開いて、HelloWorld ガジェットを実行してみます。 ---------------------------------------------------------------------------------------------------- -- DemoVideo4 : HellowWorld の作成 ---------------------------------------------------------------------------------------------------- -- |
ガジェットの特徴的な機能を使ってみるでは、先ほどの HelloWorld ガジェットに対して Windows サイドバー が持っている設定機能やデスクトップへのドッキング時のアクションなどの機能を使えるようにしてみます。 Visual Studio 2005 を起動して、「ファイル」メニューから「開く」－「ファイル」を選択します。開くファイルは、先ほどの「HelloWorld.htm」を 「%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\ja-JP」フォルダから開きます。そして、Visual Studio 2005の「ファイル」メニューから「新規作成」 － 「ファイル」を選択し、「HTMLページ」を作成します。そして、「ファイル」メニューから「名前を付けてHTMLPage1.htmを保存」を選択し、保存先に先ほどのフォルダ （%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\ja-JP） を指定して、ファイル名を「Settings.htm」にして保存します。 これから「HelloWorld.htm」に必要なコード、つまり Java スクリプトを記述していきます。以下のコードの「System.Gadget.SettingsUI = “Settings.htm”」で設定機能で使用する HTML ファイルを指定して、「System.Gadget.onDock = CheckState」と「System.Gadget.onUndock = CheckState」でデスクトップにドッキングした時とサイドバーにドッキングした時のアクションを実行する関数「CheckState」を関連付けています。また、「System.Gadget.onSettingsClosed = SettingsClosed」で設定機能の使用が終了したときに設定情報を取得するための関数「SettingsClosed」を指定しています。 <script>
var variableName = "ProgramFiles";
System.Gadget.settingsUI = "Settings.htm"; //設定用のHTML
System.Gadget.onSettingsClosed = SettingsClosed; //設定ダイアログを閉じた場合のコールバック
System.Gadget.onDock = CheckState; //サイドバーにドッキング
System.Gadget.onUndock = CheckState; //デスクトップにドッキング
// 設定ダイアログを閉じた時のイベントハンドラ
function SettingsClosed()
{
// 設定情報から値を読みだす
variableName = System.Gadget.Settings.readString("variableName");
System.Debug.outputString(variableName + "¥n");
System.Diagnostics.EventLog.writeEntry(variableName);
if (variableName == "") variableName = "ProgramFiles";
setContentText();//値を反映します
}
// コンテンツを設定します
function setContentText()
{
//環境変数を取得するAPI
var ret = System.Environment.getEnvironmentVariable(variableName);
gadgetContent.innerText = ret;
}
// サイドバーへのドッキング、アンドッキングでのサイズ変更
function CheckState()
{
if (System.Gadget.docked)
{
undockedState();
}
else
{
dockedState();
}
}
function undockedState()
{
with(document.body.style)
width=130,
height=50;
System.Gadget.background= "url(images/background.png)";
}
function dockedState()
{
with(document.body.style)
width=200,
height=100;
System.Gadget.background= "url(images/background-big.png)";
}
</script> そして、HelloWorld ガジェットの起動時の内容を設定するために「body」タグの「onload」イベントを記述します。 <bodyid="contentArea" onload="setContentText()"> 次に設定機能を定義するために「Settings.html」に以下のコードを記述します。 <html>
<head>
<style>
body {
width:250;
height:75;
}
</style>
<script>
System.Gadget.onSettingsClosing = SettingsClosing; //設定ダイアログのクローズ中のハンドラ
// 設定ダイアログの初期化(初期値の設定)
function init()
{
// 設定情報から値を読みだす
var currentSetting = System.Gadget.Settings.readString("variableName");
System.Debug.outputString("init:" + currentSetting + "¥n");
if (currentSetting == "")
{
envVar.value = "ProgramFiles";
}
else
{
envVar.value = currentSetting;
}
}
// 設定ダイアログのクローズ中のイベントハンドラ
function SettingsClosing(event)
{
if (event.closeAction == event.Action.commit)
{
//設定情報を保存
SaveSettings();
}
event.cancel = false; //ƒNƒ[ƒY‚ðI—¹‚³‚¹‚é
}
// 設定上の保存
function SaveSettings()
{
var variableName = envVar.value;
//設定情報を保存
System.Gadget.Settings.writeString("variableName", variableName);
}
</script>
</head>
<bodyonload="init()">
<spanid="mySpan" style="font-family: MS ƒSƒVƒbƒN; font-size: 10pt;">
環境変数 :<br>
<inputtype="text" id="envVar" name="entVar" length="40" value=""/>
</span>
</body>
</html> 最後に、「HelloWorld.html」の「dockedState」関数で指定している画像ファイル「background-big.png」を「%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadget\images」 フォルダに配置します。
これで Windows サイドバー の持つ機能、具体的には - 設定機能
- サイドバーへのドッキング イベント
- デスクトップへのドッキング イベント
- 環境変数の読み込み
を利用した、環境変数の表示用ガジェットの完成です。 ---------------------------------------------------------------------------------------------------- -- DemoVideo5 : 環境変数表示用ガジェットの作成 ---------------------------------------------------------------------------------------------------- -- |
もしガジェットのデバッグを行うのであれば二つの方法があります。それは、1)スクリプト デバッガと 2)Windows サイドバーが提供するオブジェクトを使う方法です。 スクリプト デバッガを有効にするには、インターネット エクスプローラの「インターネット オプション」の「詳細設定」タブで「スクリプトのデバッグを使用しない」のチェックを外します。これで、インストールされているスクリプト デバッガを使用することができます。 Windows サイドバーが用意しているオブジェクトには「System.Debug」と「System.Diagnostics.EventLog」オブジェクトがあります。「System.Debug」オブジェクトの「outputString」メソッドを使用する場合は、Windows SDK で提供される「Debug Monitor」を起動することで内容を確認することができます。また、「「System.Diagnostics.EventLog」オブジェクトの「writeEntry」メソッドを使用する場合は、イベントビューアで内容を確認することができます。
Windows サイドバー ガジェットのインストールパッケージの作成Windows サイドバー ガジェットを配布するための方法とインストール・アンインストールの方法をご説明します。 配布するためには、以下の3種類があります。 - フォルダ単位の配布 （HelloWorld ガジェットであれば「HelloWorld.gadget」フォルダ）
- ZIP ファイル形式 （拡張子は必ず .gadget）
- CAB ファイル形式（拡張子は必ず .gadget）
そして、インストールするには、以下の2種類の方法があります。 - フォルダ単位のコピー (%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets フォルダへコピー)
- ZIP か CAB ファイル形式を エクスプローラでダブルクリック
アンインストールするには、ガジェット ギャラリで マウスの右クリックから「アンインストール」を選択します。アンインストールすると、「%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets」フォルダから削除されます。 ---------------------------------------------------------------------------------------------------- -- DemoVideo6 : ガジェットの配布とインストール、アンインストール ---------------------------------------------------------------------------------------------------- -- |
このように Windows サイドバー ガジェットの開発と配布、インストールやアンインストールは非常に簡単です。また、配布単位は ZIP ファイル形式がほとんどです。このため、ちょっと良いなと思うガジェットを見つけたら、作成方法を容易に理解することができます。 ここでご説明した方法をうまく組み合わせながら是非自分なりのガジェットを作ってみてはいかがでしょうか。
|