自分好みのガジェットを作る! Windowsサイドバーガジェット作り入門

第2回 ガジェットを作ってみる(前編)

この記事を読むのに必要な時間:およそ 5 分

検索窓の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要素は文字エンコードを指定するためのものです。

文字エンコードを指定するmeta要素は記述しておくことをお勧めします。ガジェットのHTMLはサーバサイドから送り出されるものではないので,文字エンコードの判別はInternet Explorerに任せる形になり,内容によっては自動判別に失敗することがあるからです。meta要素でHTTPヘッダ相当のものを書くことで正しく自動判別できるようにします。

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

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

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

ガジェットの最小サイズは横20px,縦63pxです。これ以上,小さい値を指定しても小さくはできません。ブラウザでHTMLを表示する場合と違い,スクロールバーは表示されずbody要素のサイズ分のみが表示されます。

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

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

背景画像の指定

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

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

図3 body要素のbackground-imageとして設定した場合(上)と独自の要素を使った場合(下)

図3 body要素のbackground-imageとして設定した場合(上)と独自の要素を使った場合(下)

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

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

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

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

著者プロフィール

沢渡真雪(さわたりまゆき)

普段はASP.NETやPerlでWebアプリケーションを書くのが主。興味の向きはWindows一般から.NET Framework,Perl(Plaggerとか)やMac OS Xなど。

URLhttp://www.misuzilla.org/