※ClearType表示調整は、Microsoft® Windows® XP以降でInternet Explorer 6以降をご使用の場合のみご利用ください。日本語版、ルビ、モヒカン宣言に関しましてはこちらをご参照ください。
CATEGORY
Sun 12 23 2007 ツールバーをもっともっと知ろう
■[Chat][Web][Convenience]Googleツールバーのカスタムボタンの作り方（難しい）
今回は前回説明したカスタムボタンの作り方では作成できない場合の対処法を説明します。
この方法は前回のやり方を熟知したものとして説明しますので、そうではない方は前回の記事を読んでからにしてください。
★ボタンギャラリーにもなく、検索ボックスで右クリックを押しても「カスタム検索を実行…」が表示されない場合
今回はボタンギャラリーにも公式のものがない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}&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&action=search&type=&fromSearchForm=fromSearchForm&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}"に置換します。
ここで気をつけなくてはいけないのが以下の点です。
&を&にエスケープする
XMLにおいて"&"は特殊な意味をもつ文字であり、そのまま表すことができないのです。
他にもあるので、下に書いておきます。
<を<にエスケープする >を>にエスケープする 'を'にエスケープする "を"にエスケープする
よって以下のコードを指定することになります。
http://www.veoh.com/search.html?numResults=20&action=search&type=&fromSearchForm=fromSearchForm&search={query}
また<search charset=UTF-8>の"UTF-8"ような属性の指定もありますが、Veohの場合アメリカのサイトであるので文字セットの指定はしていません。
- site要素
ここでは虫眼鏡マークがついていないボタンを押したとき表示されるページのURLを指定します。
http://www.veoh.com/
- title要素
ここではボタンのタイトルを指定します。
- description要素
ここではボタンにマウスオーバーした際にポップアップ表示される文字を指定します。
- icon要素
ここではボタンの画像を指定します。
とはいえ、ホームページやブログのようにサーバにアップするわけではありません。
指定したい画像を文字化（base64でエンコード）する必要があります。
指定する画像はfaviconでつかわれている.ico画像が一番いいと思います。*1
次に、ブラウザのキャッシュに入っているボタンに使いたい"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
Permalink | コメント(40) | トラックバック(0) | 11:50 
トラックバック - http://d.hatena.ne.jp/ever9gotta/20071223/1198291823
リンク元
- 92 http://search.yahoo.co.jp/search?p=くそみそテクニック+漫画&ei=UTF-8&yuragi=off&pstart=1&fr=top_v2&b=11&qrw=0
- 48 http://ezsch.ezweb.ne.jp/search/ezGoogleMain.php?query=恋空+批判&start-index=14&adpage=3&mode=02
- 33 http://www.google.co.jp/search?hl=ja&lr=&q=くそみそテクニック+漫画&suggest=1&sa=X&oi=cjkrefinements&resnum=0&ct=result&cd=2
- 22 http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rlz=1T4GGIH_jaJP224JP224&q=常に制するアキバは
- 15 http://www.google.co.jp/search?sourceid=navclient&aq=t&hl=ja&ie=UTF-8&rls=GGLD,GGLD:2003-39,GGLD:ja&q=くそみそテクニック+漫画
- 12 http://search.yahoo.co.jp/search?p=バラライカ+いさじ+やらないか ダーリン&ei=UTF-8&fr=top_v2&x=wrt&meta=vc=
- 11 http://ezsch.ezweb.ne.jp/search/ezGoogleMain.php?query=やらないか 歌詞 いさじ&ct=&pd=1&sr=0000
- 11 http://images.google.co.jp/imgres?imgurl=http://ecx.images-amazon.com/images/I/111-6a8xEOL.jpg&imgrefurl=http://d.hatena.ne.jp/ever9gotta/20070914&h=160&w=160&sz=4&hl=ja&start=95&um=1&tbnid=vqmJJNGDYNaH2M:&tbnh=98&tbnw=98&prev=/images?q=%E3%81%8
- 11 http://www.google.co.jp/search?q=くそみそテクニック&hl=ja&lr=&safe=off&start=30&sa=N
- 10 http://search.yahoo.co.jp/search?p=やらないか+歌詞&rs=1&tid=top_v2&ei=UTF-8&search_x=1&fr=top_v2&yuragi=off
