前回はサイドバーについての説明ととても単純なガジェットを作るところまで進んだので、今度は順を追って説明しつつガジェットを作成します。配布できる状態までの手順を一通り解説していきます。長くなるため、今回はHTMLを作るところまでを説明します。

作ってみるもの

今回作るものは、前回の最後と同じように入力した単語で検索するガジェットです。ただし、検索対象はGoogleではなくWikipediaで、検索結果もWebブラウザに表示するのではなくガジェット中に表示するという形にします。ガジェットの名前はWikipedia Searchとしておきます。

完成形は、次のスクリーンショットのようになります。

用意が必要なもの

今回、ガジェットを作成する上でHTMLやCSS、JavaScriptは一から作成するため、あらかじめ準備する必要はありませんが、背景画像だけは必要となります。もちろん、ガジェットには背景画像がなくても問題は無いのですが、見た目の「それらしさ」を出すことを考えて用意しておくことにします。

というわけで、申し訳程度の見た目ですが画像を用意しました（スクリーンショットのものと同じです⁠）⁠。実際に説明にそって作ってみようという方は次の画像をダウンロードしてbackground.pngとして保存してください。

• ガジェット「Wikipedia Search」の背景画像（background.png）

ガジェットごとのファイル配置

ガジェットそのものは<ガジェット名>.gadgetフォルダにファイルを集めた形でひとつのガジェットとなります。以下にファイル配置の例を示します。

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
├─GoogleSearch.gadget (Google Searchガジェット)
│     ├─gadget.xml
│     └─Main.html
└─WikipediaSearch.gadget (Wikipedia Searchガジェット)
        ├─background.png
        ├─Flyout.html
        ├─gadget.xml
        └─Main.html

ガジェットから見た場合、それぞれのフォルダが基点となります。例えばWikipediaSeachガジェットからbackground.pngをimg要素などで参照した場合、WikipediaSearch.gadgetフォルダの中のbackground.pngが参照されます。

ガジェットが格納される場所

ガジェットを作成するには「ガジェットごとのファイル配置」で説明した.gadgetフォルダをどこかに置かなければいません。では、一体それはどこになのかというと、検索対象とするフォルダは以下の3箇所が存在します。

ユーザ固有（ユーザがダウンロードしてインストールしたもの）

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

システム全体で共有

%ProgramFiles%\Windows Sidebar\Shared Gadgets

システムにプリインストール

%ProgramFiles%\Windows Sidebar\Gadgets

注:

%USERPROFILE%は環境変数なので、実際にはC:\Users\UserNameなどとなります。また%ProgramFiles%も環境変数なので、実際にはC:\Program Filesなどとなります。

ユーザごとのインストール先はその言葉通りとして、GadgetsとShared Gadgetsフォルダの違いは「システムがあらかじめ持っているもの」と「後から全体で共有するためのもの」の違いです。

例えばガジェットのパッケージとして配布するのではなく、一般的なアプリケーションインストーラ形式で配布しコンピュータにインストールしたいガジェットであるという場合にはユーザ固有の場所や、GadgetsフォルダではなくShared Gadgetsフォルダにインストールします。

なお、Gadgetsフォルダを覗くと、Vistaをインストール直後から利用できるガジェットが入っているのがわかります。

実際に実装する

まずWikipediaSearchガジェット用のフォルダを、ユーザ固有のフォルダに作成して作業していきます（Program Files以下で作業する意味はないのでユーザ固有のフォルダでよいでしょう⁠）⁠。

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgetsをフォルダのアドレスバーに入力すると、ユーザ固有のフォルダに移動できます。移動後、新しいフォルダを作成します。今回作成するガジェットはWikipediaSearchという名前なので、WikipediaSearch.gadgetsという名前のフォルダを作成します。

ここから先の作業は、今作成したWikipediaSearch.gadgetsフォルダの中で行います。ここまででフォルダは以下のようになるはずです。

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
└─WikipediaSearch.gadget

ガジェットの構成要素

それでは実際にファイルを作っていきたいと思いますが、その前にガジェットを構成するファイルを順番に作るためにも整理しておきます。ガジェットは一般的に以下のファイルで構成されます。

• ガジェットについてを定義するためのガジェットマニフェストファイル
• ガジェットのUIを構成するためのHTML/CSS
• ガジェットをコントロールするJavaScript
• その他（画像などリソースファイル）

ガジェットマニフェストファイルは、ガジェットに必ず必要となります。

HTML/CSS、JavaScriptはひとつのファイルにまとまっていても問題ありません。今回はファイルを分けずに一つのHTMLにCSSとスクリプトまで書くことにします。

その他の画像・リソースファイルは無くても作ることはできます。

ガジェットマニフェストファイルを作る

まずは、ガジェットに必ず必要なガジェットマニフェストファイルを作成するところからはじめます。

ガジェットマニフェストファイルとは、

• ガジェットの名前
• ガジェットの説明
• バージョン情報
• 作成者のウェブサイト
• 開始HTMLファイルの指定

などの情報が含まれるガジェットの定義ファイルです。Windowsサイドバーはこれらの情報を読み取ってガジェット一覧画面に情報を表示したり、ガジェットの実行のためのHTMLを決定したりします。

次の図はガジェット選択画面の詳細表示の例です。ここに表示される内容はマニフェストファイルに記述されています。

それではガジェット定義ファイルを作成します。ガジェット定義ファイルはgadget.xmlという名前のXMLファイルです。このファイル名は固定でガジェットフォルダの直下に置かなければなりません。XMLファイルの内容は以下のようになります。

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

コードを先に示してしまいましたが最低限必要なものだけですし、要素名からぱっと見てどのようなものがどういう構造になっているのか予想できると思います。以下でXMLの内容を簡単に説明していきます。

gadget要素

ガジェットマニフェストファイルのルート要素です。すべての要素はこの要素の下におかれます。

name要素

ガジェットの名前です。説明や一覧などに表示される表示名です。ここでは一覧にWikipedia Searchと表示させたいのでWikipedia Searchと記述しています。

version要素

ガジェットのバージョンをあらわす文字列です。バージョン文字列は<メジャー>.<マイナー>.<リビジョン>.<ビルド>という4つの数字で構成されます。Windowsサイドバーは同名のガジェットをダウンロードした際、バージョンを確認することでアップデートをする必要があるかどうかを決定します。今回はまだ一度も更新していないので1.0.0.0を記述しています。

hosts要素

以下で説明するhost要素をまとめるための要素です。host要素は最低必ずひとつは持つ必要があります。

host要素

ガジェットの実行単位を定義します。どのHTMLから開始するのかなどの設定をもちます。hosts要素の子要素になります。name属性は必須で値はsidebarを固定で指定する必要があります。

base要素

表示するガジェットのHTMLファイルを指定します。host要素の子要素になります。type属性およびsrc属性は必須です。type属性の値はHTML固定で、src属性にはガジェットとして表示したいHTMLファイルのパスを指定します。ここではMain.htmlをガジェットとしたいのでMain.htmlと記述しています。

permission要素

実行許可を指定する要素です。host要素の子要素になります。内容にfullを指定する必要があります。full以外は現バージョンでは指定できません。

platform要素

実行環境を指定する要素です。host要素の子要素になります。minPlatformVersion属性は必須で値は1.0を固定で指定する必要があります。

検索窓のHTMLを作る

マニフェストファイルができたところで、次はガジェットそのもののUIを構成するためにHTMLを作成します。ガジェットは本体である検索窓と横に出てくる検索結果部分の二つのHTMLを作る必要がありますが、まずはガジェット本体の検索窓のHTMLを作ります。

ガジェット本体のファイル名は、マニフェストファイルのbase要素のsrc属性で指定したものと同じにする必要があります。ここでは、マニフェストファイルでMain.htmlを指定したのでMain.htmlという名前のファイルを作成します。なお、ファイルの文字エンコードはUTF-8で保存してください。

マニフェストファイルはコードを先に出して説明しましたが、HTMLは順を追って説明します。

基本的な部分

まず基礎となるHTMLを書きます。title要素、meta要素、style要素、内容を含むbody要素という一般的なWebサイト向けと同じものです。

<title>Wikipedia Search Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
body { width: 224px; height: 60px; }
</style>

<body>
</body>

タイトルは通常利用されないのですが、製作中などの場合も考えてつけておきます。2行目のmeta要素は文字エンコードを指定するためのものです。

次のstyle要素で全体とbodyのスタイルを定義します。

全ての要素のスタイルのmarginとpaddingを0としておきます。こうしておくことで余分な余白を考えずに要素を配置しやすくなります。

body要素のスタイルは、ガジェットのサイズを決めるために定義しています。今回は背景画像のサイズが224pxで高さが60pxと設定します。これは、既にガジェットのサイズが画像レベルで決まっているため、それに合わせてwidthとheightを指定しています。body要素に指定したサイズでガジェットの領域がサイドバーに確保されます。

スタイルの定義の次のbody要素は、以降のフォーム等の内容を書くために用意しておきます。以降のHTMLは特別な断りが無い限りbody要素の中に書きます。

これでガジェット本体の下地ができたので、次は一番下に敷く背景画像を設定します。

背景画像の指定

背景画像の指定なら「CSSのbackgroundプロパティなどでいいのでは？」と思われるかもしれませんが、ガジェットで透過している画像（影をもつなど）を背景とするにはWindowsサイドバー独自の要素で指定する必要があります。

以下はbody要素のbackground-imageとして設定した場合と独自の要素を使った場合との比較です。body要素に直接指定したほうは透過しているように見えるのですが、何か変なことになっています。

このような問題を回避して正しく背景を表示するには、Windowsサイドバー独自のg:background要素を利用します。以下のように記述して利用します。

<g:background src="background.png">

img要素とほとんど同じでsrc属性に背景画像のパスを指定します。空要素なので閉じタグは不要です。

なお背景画像は1ページ目の「用意が必要なもの」でダウンロードしたものをWikipediaSearch.gadgetフォルダ内にコピーしておいてください。

検索ボタンと検索文字列テキストボックス

次に検索ボタンと検索文字列テキストボックスをもつフォーム（form要素）を置きます。

<form action="" style="position:absolute; top: 10px; left: 20px; width: 188px;">
<input type="text" style="width: 145px">
<input type="submit" value="検索">
</form>

フォームは背景と同様に絶対座標で配置します。今回はサイズが決まっているので、その中にフォームを押し込みます。ここでは要素の左上を上10px、左20pxに合わせて、幅を188pxにしています。

フォームの中にはinput要素を二つ置きます。

一つ目はテキストボックス用のinput要素でtypeはtextです。二つ目は検索ボタン用のinput要素でtypeはsubmitです。ボタンのラベル（value属性）は「検索」としておきます。

このテキストボックスのinput要素にはスタイルで幅を指定します。先ほどのフォームの領域（図参照）にボタンとともに入ることを考え、値を変えつつ試してみたところ、大体145pxぐらいの幅がちょうどよいようです。そこで今回は、width: 145pxにしておきます。

本当は配置を絶対配置にせず上手に伸び縮みする形にできるとよいと思いますが、今回はさくっと見た目を作るために絶対配置にしています（フォントサイズなどが変わると破綻します⁠）⁠。CSSを得意とする方は試してみるとよいかもしれません。

ここまでのまとめ

ここまでで、Main.htmlは以下のようになりました。

<title>Wikipedia Search Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
body { width: 289px; height: 60px; }
</style>

<body>
<g:background src="background.png">
<form action="" style="position:absolute; top: 10px; left: 20px; width: 188px;">
<input type="text" style="width: 210px">
<input type="submit" value="検索">
</form>
</body>

ファイルの配置は、以下のようになっているはずです。

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
└─WikipediaSearch.gadget
       ├─background.png
       ├─gadget.xml
       └─Main.html

この状態でガジェットの追加画面を開くと、Wikipedia Searchというガジェットを選べるようになっています。

ダブルクリックすると検索窓がサイドバーに追加されますが、まだ何かできるわけではありません。

次は実際に検索するJavaScriptと検索結果の表示を作っていくのですが、そろそろ長くなり、この先もまだあるので切りのよいところで次回へと続きます。

次回はJavaScript周りと検索結果表示、パッケージングなどを進めます。