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