グーグルの検索ガジェットを作ろう

ガジェットの基本的な作り方は終わり。ここからは応用編として、もうちょっと実用的なガジェットを作ってみましょう。ここでは、入力した単語をグーグルでウェブ検索するガジェットを作ります。

【図20】よく見かけるグーグルの検索ガジェット。単語を入力してボタンをクリックすると、ウェブの検索ができる

グーグルの検索ボックスは、とても簡単に追加できます。まずは、グーグルの「パブリックサービス検索」ページを開き、HTMLをコピーします。あとは、ガジェット本体のhtmlファイルに貼り付ければオーケー。ガジェットにグーグルのロゴ画像を使うときは、ダウンロードページで画像ファイルをダウンロードしておきましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
width:131px;
height:131px;
background: url(google_back.png);
margin:0;
padding:15px 2px;
}
</style>
</head>
<!-- Google  -->
<center>
<form method=get action="http://www.google.co.jp/search">
<tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif" 
border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=12 maxlength=255 value="">
<input type=hidden name=ie value=UTF-8> 
<input type=hidden name=oe value=UTF-8>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr></table>
</form>
</center>
<!-- Google -->
</body>
</html>

ここで注意するのは、エンコードをShift_JISからUTF-8に変更する点です。コピーしたままで利用すると、検索結果ページが文字化けして表示されてしまいます。また、必要ならスタイルシート部分で画像や入力ボックス、ボタンなどのサイズや表示位置を調整してください。ガジェットマニフェストファイルに関してはこれまで通りの作り方で結構です。

<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>Google検索ガジェット</name>
  <namespace>GoogleSearch.gadget</namespace>
  <version>1.0.0.0</version>
  <author name="dcp">
    <info url="http://www.dcp-corp.net/" />
        <logo src="dcp_logo.png"/>
  </author>
  <copyright>dcp</copyright>
  <description>キーワードでグーグル検索を行なうガジェットです。</description>
  <icons>
      <icon src="google_icon.png" />
  </icons>  
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="index.html" />
      <permissions>full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

【図21】キーワードを入力して検索ボタンをクリックすると、検索結果が表示されます

このように、ガジェットではウェブ上のさまざまなサービスを利用することができます。アイデアしだいで便利なガジェットを作れるので、ぜひいろいろ試してみてください。