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

第1回 Windowsサイドバーの概要

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

とりあえず簡単なガジェットを作成してみる

さて次回はいよいよ作成編にと考えていたのですが,次回までお待たせするのもつまらないかと思ったので細かいことは気にせず,説明もせずHello World的なものをサクッと作成してみます。

何を作るのか考えたのですが,ただHello Worldを表示するだけではつまらないので,ほんの少しだけマシと思いたいGoogle検索のガジェットを作ることにします。

図5 今回作るガジェット

図5 今回作るガジェット

それでは作成してみましょう。

まずガジェットを構成するファイルを置くフォルダを作成します。フォルダの位置は%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets以下に作ると決まっているのでエクスプローラのアドレスバーに入力するなどして開いてください。なお%USERPROFILE%は環境変数なので自動的にC:\Users\<ユーザ名>に展開されます。

Gadgetsフォルダを開いたら次に作成するガジェットのためのフォルダを作成します。メニューから「新規作成」⁠⁠フォルダ」を選択して作成します。作成するフォルダの名前はGoogleSearch.gadgetとしておきます。 .gadgetも必要ですので省略しないようにしてください。

作成できたら作成したフォルダの中に移動します。

ガジェットの構成ファイルを作ってゆきます。まずガジェットとして認識してもらうための設定ファイルを作成します。設定ファイルの名前はgadget.xmlで固定です。ファイルの中身は以下のように記述してください。

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

次にガジェット本体(ユーザインタフェース)にあたるHTMLを作成します。先ほどの設定ファイルで

<base type="HTML" apiVersion="1.0.0" src="Main.html"/>

と書かれた部分がありますが,これが最初に表示されるHTMLファイルの指定になっているのでここで作成するファイルはMain.htmlになります。

Main.htmlの内容は以下のように記述してください。なお保存する際の文字コードはUTF-8として保存してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Google Search Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* { margin: 0; padding: 0; }
body { width: 128px; height: 64px; }
input { width: 100%; }
</style>

<div>
<form action="http://www.google.com/search">
Google 検索:<br>
<input type="text" name="q">
<input type="submit" value="検索">
</form>
</div>

以上で出来上がりです。ここまでで作成したファイルの配置は以下のようになります。

C:\Users\<USERNAME>\AppData\Local\Microsoft\Windows Sidebar\Gadgets
└─GoogleSearch.gadget
       ├─gadget.xml
       └─Main.html

あとはサイドバーの右上にある「+」ボタンをクリックして,ガジェット追加画面を出すと「Google Search」というガジェットが増えていると思いますので,ドロップするかダブルクリックしてサイドバーに追加します。

ここまでで間違っていなければガジェットが表示されるはずです。正しく表示されたらテキストボックスに文字列を入れて検索ボタンを押してみてください。IEでGoogleの検索画面が表示されたでしょうか?

以上でとても単純なガジェットの作成は完了です。細かいことを抜きにすると実は結構少ないステップで作成できます。この例ではスクリプトも画像も使ってませんが,次回以降でちゃんと使いたいと思います。

というわけで

Windowsサイドバーの概要についてつらつらと書かせていただきました。これで名前しか聞いたことがなかったというところからどんな感じになっているものなのかぐらいは掴んでもらえたらいいなと思っています。

冒頭でも書きましたが今回はWindowsサイドバーの概要などの説明がほとんどだったため,⁠そんなことは知っているので早く作りたい!」という方にとっては申し訳なかったのですが,次回からは実際にそれなりのガジェットを作っていきたいと思います。

著者プロフィール

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

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

URLhttp://www.misuzilla.org/

コメント

コメントの記入