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

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

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

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

次に検索ボタンと検索文字列テキストボックスをもつフォーム(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にしています。

図4 フォームを配置する座標とそのサイズ

図4 フォームを配置する座標とそのサイズ

フォームの中には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というガジェットを選べるようになっています。

図5 ガジェットの追加画面を開くと,Wikipedia Searchが選択できるようになる

図5 ガジェットの追加画面を開くと,Wikipedia Searchが選択できるようになる

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

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

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

著者プロフィール

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

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

URLhttp://www.misuzilla.org/