Googleツールバー5のカスタムボタンのアイコンを変えてみる

FirefoxでGoogleツールバー5が使えるようになったのですが、Googleツールバー5用カスタムボタンのアイコンがみんな一緒でどうにも混乱してしまう。。。そのため早速アイコンを変更してみました。

08年9月27日
さくらのレンタルサーバ月々500円で3GB私も使ってます。
3・2・1GSX Series III systemご購入者に、専用スピーカースタンドをプレゼント
このブログをRSSリーダーで購読

Googleツールバー5のカスタムボタンのアイコンを変更する

↑このように青い球体になっているGoogleツールバー5のカスタムボタンのアイコン。 1個だけなら良いのですが、何個も並んでしまうと分かりづらくて仕方ないですよね。なのでアイコンを付けてしまいます。

WindowsではカスタムボタンのXMLファイルはそれぞれ以下の場所にあります。

VISTAの場合: C:\Users\ユーザー名\AppData\Local\Google\Custom Buttons
Windows 2000/XPの場合: C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Custom Buttons

そしてGoogleツールバー5のGoogleガジェットが開くタイプのカスタムボタンは toolbar.google.com_ から始まる名前になっています。ここではそのうちのいくつかのサンプルを交えてご紹介します。

文中にファイル名を記載しておりますが、変更される可能性がございますので、ファイルをテキストエディタで開く際に必ず <title> や <description> で確認するようにしてください。

Google カレンダーの例

ファイル名は toolbar.google.com_BQCOH4ELV9T4720670Q3.xml です。

<?xml version='1.0' encoding='UTF-8'?>
<custombuttons xmlns='http://toolbar.google.com/custombuttons/'>
<button>
<title>Google Calendar</title>
<description>Google Calendar for your site, webpage or blog</description>
<site>http://www.google.com/calendar/</site>
<gadget whole-dropdown='true' height='450'>
http://www.google.com/ig/modules/calendar-for-your-site.xml
</gadget>
<update>http://toolbar.google.com/buttons/gadget?url=http%3A//www.google.com/ig/modules/calendar-for-your-site.xml</update>
<icon>
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAZGhp/2Roaf9kaGn/ZGhp/2Roaf9kaGn/ZGhp/2Roaf9kaGn/ZGhp/2Roaf9k
aGn/ZGhp/2Roaf9kaGn/AAAAAGdsa//98Ob//fDl//3w5v/98Ob//fDm//3w5v/98Ob//fDm//3w
5v/98Ob//fDm//3w5v/98Ob/Z2xr/wAAAABscG///fHo/83Fuf/Nxbn/zcW5/83Fuf/Nxbn/zcW5
/83Fuf/Nxbn/zcW5//3x6P/98ej//fHo/2xwbv8AAAAAcXZz//306//Nxbn//////83Fuf//////
zcW5///////Nxbn//////83Fuf/99Ov//fTr//306/9ydXP/AAAAAHd7d//+9fD/zcW5/83Fuf/N
xbn/zcW5/83Fuf/Nxbn/iYPQ/zMx7v8zMe7/iYPQ/83Fuf/+9fD/d3t2/wAAAAB/gnv//vj0/83F
uf//////zcW5///////Nxbn//////zMx7v/AwP//mpTK/z8////Nxbn//vj0/3+Ce/8AAAAAhomA
///6+P/Nxbn/zcW5/83Fuf/Nxbn/zcW5/83Fuf8zMe7/mpTK/5qUyv8zMe7/zcW5///6+P+FiYH/
AAAAAI2Qhv///fz///78///9/P///fz///38/83Fuf//////iYPQ/z8///8zMe7/qqr//83Fuf//
/fz/jJCG/wAAAACUl4v///7+/////////v7///7+///+/v/Nxbn/zcW5/83Fuf/Nxbn/zcW5/83F
uf/Nxbn///7+/5SXiv8AAAAAmp6Q///+/v///v7///7+///+/v///v7///7+///+/v///v7///7+
///+/v///v7///7+///+/v+bnpD/AAAAAKKllP/5fAj/+XwI//l8CP/5fAj/+XwI//l8CP/5fAj/
+XwI//l8CP/5fAj/+XwI//l8CP/5fAj/oqSU/wAAAACoqpj/5H8L//TMb//0zW7//6UM//TObv/y
ggj/8oII//KCCP/yggj/8oII//KCCP/yggj/63wK/6irmP8AAAAArbGd//TBbP/0wWz/9MFs//TB
bP/0wWz/9MFs//TBbP/0wWz/9MFs//TBbP/0wWz/9MFs//TBbP+tsJ3/AAAAAAAAAACytKD/srWg
/7K1n/+ytJ//sbWf/7K0n/+xtaD/srSg/7K0n/+xtJ//sbSg/7G1oP+xtaD/AAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAB
AACAAwAA//8AAA==
</icon>
</button>
</custombuttons>

Googleドキュメントの例

ファイル名は toolbar.google.com_2MO0DPPOGBP70UFN2X79.xml です。

<?xml version='1.0' encoding='UTF-8'?>
<custombuttons xmlns='http://toolbar.google.com/custombuttons/'>
<button>
<title>Google Docs</title>
<description>View your active Google documents</description>
<site>http://docs.google.com/</site>
<gadget whole-dropdown='true' height='165'>
http://www.google.com/ig/modules/docs.xml
</gadget>
<update>http://toolbar.google.com/buttons/gadget?url=http%3A//www.google.com/ig/modules/docs.xml</update>
<icon>
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAaZJREFU
OI2Vkr9LW1EUxz8nTQzYQJEKQaSrDhUkf0DFgkOHDnb1SaGFLN2d+hdU/wINLoUnHdrBUVAqIlWw
KiIdtAVpmhRDzEMTyUvSdz0dkrz8Fj3Tved+z+d8771Htg9+6o3e0B6CoKqcJTO8fvWs49yPrf0T
7RWX+aJ+3jjWpU9rPTWB3mgwxjA+OszIWIwPi1+6am4FhPsCqKlgSnlOkxdMv5u/H+Bhfz+R8ANC
psDLiaddNcHbAABD0UGGooMAfFz9dneAxO3aQpqyT/y8JqzegLpo9/0LUo7L71yBtFMgfVUhVyyz
/uMcidtowuoEVDz84p1fWb5nSiCCECYUCePly0yORNk8zTQcmNoc/TN1C0LKcdk7d7FnYx0Ony+s
+1cLthQC5ZqDpFNAAoJlH9H8Cq2bOqDdAfDHuQYNYVvjLQVnjsvb5WwTQMHzquSKaTT4e+kSivQx
u3LUAmgzQFBEeDO3ACgiwuOBR6ARckUP7yrL17kpX2zZh6TSF4gIqFaBqrVVc5f4CgCTo1Ff2Ggv
bJ5Uf0ATM90BVUi3QcIH1gfpP+UJ2rM0EHYnAAAAAElFTkSuQmCC
</icon>
</button>
</custombuttons>

いずれも元のXMLファイルに <icon> ～ </icon> を追加しています。これはアイコンをBase64エンコーディングしてASCIIテキストにしているものです。

オリジナルのアイコンを設定する手順

1. アイコンの素材を取得する: Googleサービスにもほとんどの場合Faviconが設定されていますし、ソースを見れば大抵は <link rel="shortcut icon" href="http://web-marketing.zako.org/favicon.ico" /> といったようにURLが記載されているのでURLを叩けばダウンロードすることができます。; 記載がない場合で、尚且つドメインのトップディレクトリ、またはサブドメインのトップディレクトリの場合は以下のようなURLをブラウザで開くと取得できます。; サンプル：Googleドキュメントの場合
http://www.google.com/s2/favicons?domain=docs.google.com; 確認用サンプル：http://www.google.com/s2/favicons?domain=docs.google.com; domain= 以降の部分に http:// と / を抜いたドメインを付加するとfaviconを画像として表示させることが出来ます。
2. アイコンをテキストに変換する: Base64 Onlineのページを開き、下記画像の部分で保存しておいたファイルを選択します。; そして右側にある「convert the source data」というボタンを押すと、変換されるので、冗談の大きなテキストエリアに生成されたコードをコピーします。
3. カスタムボタンのXMLファイルに貼り付ける: コピーしたコードを <icon> と </icon> の間に囲まれるようにXMLファイルへ追加し、ファイルを保存します。; この際、 </button> よりも前に追加するようにしてください。
4. Firefoxを再起動する: 保存したことを確認したら、Firefoxを再起動します。するとカスタムボタンが設定したアイコンになっています。