たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

シンプル飲食検索をGoogleツールバーのボタンに登録

icon January 31, 2007 7:51 PM by funami このエントリーを含むはてなブックマーク

フナミタカオです。
石橋研究員が作成した、シンプル飲食検索と連携する、Googleツールバー向けのボタンを作ってみました。
preview_16x16.pngシンプル飲食検索をGoogleツールバーに登録
↑こちらのボタンをクリックすれば、インストールが始まります。

IEに限られますが、Googleツールバーをインストールされている方(そうでないかたもぜひインストールして)お試しください。

shimple

ボタンをインストールすると、↑のように、ボタンが追加されます。


Googleツールバー向けボタンの作り方


さて、今回は、このボタンの作り方を紹介します。
GoogleのGoogle ツールバー API スタート ガイドにはスラッシュドットのボタンを追加して、それを改造する方法が書かれていますが、せっかくなので、シンプル飲食検索のボタンを改造する方法で説明します。

1.Google ツールバーをインストールします。
2.シンプル飲食検索にアクセスします。
3.フリーワード検索ボックスを右クリックして、表示されるメニューから [カスタム検索を実行...] を選択します。

カスタム

4.[追加] をクリックし、カスタム ボタンのインストールのダイアログにある [OK] をクリックします。
5.これで、 ツールバーに シンプル飲食検索のカスタム ボタンが作成できました。

このボタンを改造することで、自分のサイトの検索画面に繋がるボタンに改造します。


6.ツールバーの設定>オプションからボタンタブを選択

shimple_dialog

7.シンプル飲食検索を選択し、編集ボタンを押す。
edit button


8.詳細を編集の、リンクをクリック
ボタン


9.XMLエディタが開くので、ここで、search、title、description、site、を編集
ここでのポイントは、searchタグ。
検索したい、サイトのURLのGETパラメータに、Goolgeツールバーの検索窓から入れて文字列が、{query}と置き換わる

例:設定が以下のとき、検索文字に「焼肉」と入れると


http://hotpepper.tatamilab.jp/simple/?keyword={query}

↓実際はこのURLで呼ばれる

http://hotpepper.tatamilab.jp/simple/?keyword=%e7%84%bc%e8%82%89

仕組みは、いたってシンプルで簡単につくれるのです。


10.アイコンを作る
ちょっと、だけ、手間がかかるのが、このアイコン作成です。

chopstick_icon
faviconと同じサイズなので、favicon画像を、Base64でエンコードすればOKです。

faviconはFavIcon from Picsで作れます
http://www.html-kit.com/favicon/

faviconの画像をBASE64に変換するのは
Base64 Online - base64 decode and encodeが便利です。
http://www.motobit.com/util/base64-decoder-encoder.asp

ダウンロードした、変換後のテキストを、タグに投入して完成。

iconタグ自体を作るのが、面倒であれば、iconタグ自体を削除してもOKです、
そのときは、デフォルトのアイコンが表示されます。

これで、カスタマイズが完了します。


もっとカスタマイズ

GoogleのGoogle ツールバー API スタート ガイドには
さらに、
・RSSのフォードをボタンとひもづける方法
・ほかの人に知らせる方法
・ボタンギャラリーに登録する方法がかかれています。

意外と、簡単なので、ぜひお試しください。


ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.