Googleツールバーのカスタムボタンの作り方（難しい）

Chat Web Convenience

今回は前回説明したカスタムボタンの作り方では作成できない場合の対処法を説明します。
この方法は前回のやり方を熟知したものとして説明しますので、そうではない方は前回の記事を読んでからにしてください。

★ボタンギャラリーにもなく、検索ボックスで右クリックを押しても「カスタム検索を実行…」が表示されない場合

今回はボタンギャラリーにも公式のものがないVeoh（ビオ）を追加してみます。



Veohでは検索ボックスで右クリックしても「カスタム検索を実行…」が表示されません。
よって自力でカスタムボタンを作成するしかありません。





まず、ダミーボタンを作成します。何でも構いません。
今回は当ブログの最上部の検索ボックスから作成してみました。





「設定の変更」＞「オプション」＞「ボタン」タブと選び、先ほど作成したダミーボタンを反転させ「編集」をクリック。





「詳細エディタを使用する」をクリックします。
新しいページが開きます。





次のxmlコードが表記されると思います。（ここでは当サイトの場合を表記します。）

<?xml version="1.0"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <search charset="euc-jp">http://d.hatena.ne.jp/search?word={query}&amp;name=ever9gotta</search>
    <site>http://d.hatena.ne.jp/ever9gotta/</site>
    <title>d.hatena.ne.jp</title>
    <description>つんまるに</description>
    <icon>
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAOd5Uv/JXyr/yV8q/8lfKv/JXyr/yV8q/8lfKv/JXyr/yV8q/8lfKv/J
Xyr/yV8q/8lfKv/JXyr/AAAAAAAAAAD6pYX/53lS/+d5Uv/neVL/53lS/+d5Uv/neVL/53lS/+d5
Uv/neVL/53lS/+d5Uv/neVL/yV8q/wAAAAAAAAAA+qWF/+d5Uv/neVL/53lS/+d5Uv/neVL/53lS
/+d5Uv/neVL/53lS/+d5Uv/neVL/53lS/8lfKv8AAAAAAAAAAPqlhf/neVL/53lS/+d5Uv//////
/////////////////////+d5Uv/neVL/53lS/+d5Uv/JXyr/AAAAAAAAAAD6pYX/53lS/+d5Uv/n
eVL////////////neVL/53lS////////////53lS/+d5Uv/neVL/yV8q/wAAAAAAAAAA+qWF/+d5
Uv/neVL/53lS////////////53lS/+d5Uv/neVL////////////neVL/53lS/8lfKv8AAAAAAAAA
APqlhf/neVL/53lS/+d5Uv///////////+d5Uv/neVL/53lS////////////53lS/+d5Uv/JXyr/
AAAAAAAAAAD6pYX/53lS/+d5Uv/neVL////////////neVL/53lS/+d5Uv///////////+d5Uv/n
eVL/yV8q/wAAAAAAAAAA+qWF/+d5Uv/neVL/53lS////////////53lS/+d5Uv/neVL/////////
///neVL/53lS/8lfKv8AAAAAAAAAAPqlhf/neVL/53lS/+d5Uv///////////+d5Uv/neVL/////
///////neVL/53lS/+d5Uv/JXyr/AAAAAAAAAAD6pYX/53lS/+d5Uv/neVL/////////////////
///////////neVL/53lS/+d5Uv/neVL/yV8q/wAAAAAAAAAA+qWF/+d5Uv/neVL/53lS/+d5Uv/n
eVL/53lS/+d5Uv/neVL/53lS/+d5Uv/neVL/53lS/8lfKv8AAAAAAAAAAPqlhf/neVL/53lS/+d5
Uv/neVL/53lS/+d5Uv/neVL/53lS/+d5Uv/neVL/53lS/+d5Uv/JXyr/AAAAAAAAAAD6pYX/+qWF
//qlhf/6pYX/+qWF//qlhf/6pYX/+qWF//qlhf/6pYX/+qWF//qlhf/6pYX/53lS/wAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIAB
AACAAQAA//8AAA==
    </icon>
  </button>
</custombuttons>

これを以下のように変えます。

<?xml version="1.0"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <search>http://www.veoh.com/search.html?numResults=20&amp;action=search&amp;type=&amp;fromSearchForm=fromSearchForm&amp;search={query}</search>
    <site>http://www.veoh.com/</site>
    <title>Veoh</title>
    <description>Online videos: From home videos to premium internet television content | Veoh Video Network</description>
    <icon>
AAABAAIAEBAAAAEACABoBQAAJgAAABAQAAABACAAaAQAAI4FAAAoAAAAEAAAACAAAAABAAgAAAAA
AAAAAAAAAAAAAAAAAAABAAAAAAAAqnIGANrKogDWpg4A1qJKALqGLgDiukoA0qIuAMqydgDOmi4A
2rIuAN6uSgDKig4A2q4WAMquYgDSuoIAwpZGANqyPgD67tIA1qIeALaOMgDWqi4A3rZKANKeDgDm
wlYAuo46AMqeRgDSqj4A9u7KAMqOIgDauj4A2s6mANqqDgDCol4A4sJOANKuUgDOkhYAwppOAMaG
IgDSlj4A3rI2AMqKFgDqymoAxppGANq2PgDaqh4A1rZSAMaOOgC2dgoA1qIWANa6UgDKtn4A2q4i
ANquYgDGlkYA/vryAMKOMgDaqjYA0p4iANauPgDWqmIA1rJSALZyBgDeyqYA2qY+ANKWNgDSnhYA
5sZeAOLOpgDetjYAzo4WAOrOdgDitj4A1qoiAN62VgDGkj4A2rImAK5yCgDiyqIA2qYOANqmVgDG
ii4A4r5KANqmNgDSsnYA2rYyAN6ySgDOjg4Azq5iANa6ggC+lkoA3rI+APLu3gDWoiIAuo4yANau
LgDitkoA1p4OAObGWgC6kj4A1p5KANqqPgDaukIA3s6mANqqFgDGol4A5sJSAN6uVgDCnj4AzooW
AOrKbgDetj4A1qYWANq6UgDOtn4A3q4iAN6uYgDKlkYA/v7+AMaSMgDerjYA3q4+ANqqYgDeslYA
1po2AOK2NgDaqiIA4rZWAM6SPgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
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
    </icon>
  </button>
</custombuttons>



「Googleツールバーに保存する」ボタンを押し、ウィンドウを閉じます。
元の画面の表示されたメッセージの「置換」をクリックします。





作成できました。


コードについて具体的に説明します。

  • search要素

ここでは検索を実行するURLを指定します。
Veohの検索クエリに"test"と入力し検索すると、検索結果のページのURLは以下のようになります。

http://www.veoh.com/search.html?numResults=20&action=search&type=&fromSearchForm=fromSearchForm&search=test

この"test"を"{query}"に置換します。
ここで気をつけなくてはいけないのが以下の点です。

&を&amp;にエスケープする


XMLにおいて"&"は特殊な意味をもつ文字であり、そのまま表すことができないのです。
他にもあるので、下に書いておきます。

<を&lt;にエスケープする
>を&gt;にエスケープする
'を&apos;にエスケープする
"を&quot;にエスケープする


よって以下のコードを指定することになります。

http://www.veoh.com/search.html?numResults=20&amp;action=search&amp;type=&amp;fromSearchForm=fromSearchForm&amp;search={query}

またの"UTF-8"ような属性の指定もありますが、Veohの場合アメリカのサイトであるので文字セットの指定はしていません。

  • site要素

ここでは虫眼鏡マークがついていないボタンを押したとき表示されるページのURLを指定します。

http://www.veoh.com/

今回はVeohのトップページを指定しました。

  • title要素

ここではボタンのタイトルを指定します。

  • description要素

ここではボタンにマウスオーバーした際にポップアップ表示される文字を指定します。
今回はVeohのトップページに合わせました。

  • icon要素

ここではボタンの画像を指定します。
とはいえ、ホームページやブログのようにサーバにアップするわけではありません。
指定したい画像を文字化（base64でエンコード）する必要があります。
指定する画像はfaviconでつかわれている.ico画像が一番いいと思います。*1
まず、faviconが現れるサイトをブラウザで表示します。
次に、ブラウザのキャッシュに入っているボタンに使いたい"favicon.ico"を適当なところ（例えばデスクトップ）にコピーします。
以下のサイトにアクセスしましょう。
http://www.motobit.com/util/base64-decoder-encoder.asp





「参照」で先ほど保存した画像のパス（C:\Documents and Settings...というやつ）を指定し、"Convert the source date"ボタンを押します。





"Base64 representation of the source data:"の下のボックスに表示されたアルファベット文字をicon要素に使います。


と、まぁ自分でも何言っているかわからなくなるほどの説明でした。
他にVer.4まででもカスタムボタンは、RSSフィードを使った情報の表示ができたり、複数の言語に対応させた検索ができたりします。
詳しくは、Google ツールバー APIカスタム ボタンを作成する方法をご覧ください。
http://www.google.com/tools/toolbar/buttons/intl/ja/apis/howto_guide.html


※今回紹介した画像や方法は以下のシステムで行いました。

OS:Microsoft Windows XP Professonal Service Pack2
ブラウザ:Windows Internet Explorer 7
画像ソフト:mspaint（ペイント）、IrfanView

*1:他にも通常の ICO、JPG、BMP、GIF にも対応しています。詳しくはhttp://www.google.com/tools/toolbar/buttons/intl/ja/apis/howto_guide.html#icon