<span class="mt-enclosure mt-enclosure-image" /><img alt="googleツールバー5カスタムボタンのアイコンを分かりやすく変更する" src="http://web-marketing.zako.org/images/google-toolbar-5-icon.gif" width="514" height="204" style="" /></span>

<p><a href="http://web-marketing.zako.org/hacks/firefox/google-toolbar-5-for-firefox.html">FirefoxでGoogleツールバー5が使えるように</a>なったのですが、Googleツールバー5用カスタムボタンのアイコンがみんな一緒でどうにも混乱してしまう。。。 そのため早速アイコンを変更してみました。</p>

<!--more-->
<h3 class="header-label">Googleツールバー5のカスタムボタンのアイコンを変更する</h3>
<p><img src="http://lh5.ggpht.com/sigeos15/SNzhA0mZYmI/AAAAAAAAG-c/1v86xpP34Vc/s288/google-toolbar-1.jpg" /><br />
↑このように青い球体になっているGoogleツールバー5のカスタムボタンのアイコン。 1個だけなら良いのですが、何個も並んでしまうと分かりづらくて仕方ないですよね。 なのでアイコンを付けてしまいます。</p>

<p>WindowsではカスタムボタンのXMLファイルはそれぞれ以下の場所にあります。</p>
<dl>
<dt>VISTAの場合</dt>
<dd>C:\Users\ユーザー名\AppData\Local\Google\Custom Buttons</dd>
<dt>Windows 2000/XPの場合</dt>
<dd>C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Custom Buttons</dd>
</dl>
<p>そしてGoogleツールバー5のGoogleガジェットが開くタイプのカスタムボタンは toolbar.google.com_ から始まる名前になっています。 ここではそのうちのいくつかのサンプルを交えてご紹介します。</p>

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

<h4 class="header-label">Google カレンダーの例</h4>
<p><img src="http://lh3.ggpht.com/sigeos15/SNzfTUMJ5SI/AAAAAAAAG8c/lkIJmczKWx4/s288/Fullscreen%20capture%2020080926%20221027.jpg" /><br />
ファイル名は toolbar.google.com_BQCOH4ELV9T4720670Q3.xml です。</p>
<textarea name="code" class="xml" cols="60" rows="5" id="code">
<?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>
</textarea>

<h4 class="header-label">Googleドキュメントの例</h4>
<p><img src="http://lh3.ggpht.com/sigeos15/SNzfqc-FHtI/AAAAAAAAG88/V0Zu-uKL01I/s288/Fullscreen%20capture%2020080926%20221159.jpg" /><br />
ファイル名は toolbar.google.com_2MO0DPPOGBP70UFN2X79.xml です。</p>
<textarea name="code" class="xml" cols="60" rows="5" id="code">
<?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>
</textarea>

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

<h4 class="header-label">オリジナルのアイコンを設定する手順</h4>
<dl>
<dt>1. アイコンの素材を取得する</dt>
<dd>Googleサービスにもほとんどの場合Faviconが設定されていますし、ソースを見れば大抵は
<code>&lt;link rel=&quot;shortcut icon&quot; href=&quot;http://web-marketing.zako.org/favicon.ico&quot; /&gt;</code>
といったようにURLが記載されているのでURLを叩けばダウンロードすることができます。</dd>
<dd>記載がない場合で、尚且つドメインのトップディレクトリ、またはサブドメインのトップディレクトリの場合は以下のようなURLをブラウザで開くと取得できます。</dd>
<dd>サンプル：Googleドキュメントの場合<br />
<code>http://www.google.com/s2/favicons?domain=docs.google.com</code></dd>
<dd>確認用サンプル：<a class="web-site-link" href="http://www.google.com/s2/favicons?domain=docs.google.com" onclick="window.open('http://www.google.com/s2/favicons?domain=docs.google.com'); return false;">http://www.google.com/s2/favicons?domain=docs.google.com</a></dd>
<dd>domain= 以降の部分に http:// と / を抜いたドメインを付加するとfaviconを画像として表示させることが出来ます。</dd>

<dt>2. アイコンをテキストに変換する</dt>
<dd><a class="web-site-link" href="http://www.motobit.com/util/base64-decoder-encoder.asp" onclick="window.open('http://www.motobit.com/util/base64-decoder-encoder.asp'); return false;">Base64 Online</a>のページを開き、下記画像の部分で保存しておいたファイルを選択します。</dd>
<dd><img src="http://lh6.ggpht.com/sigeos15/SNznCpw7aKI/AAAAAAAAG-k/kQQxmUMp4FM/s288/Fullscreen%20capture%2020080926%20224331.jpg" /></dd>
<dd>そして右側にある「convert the source data」というボタンを押すと、変換されるので、冗談の大きなテキストエリアに生成されたコードをコピーします。</dd>

<dt>3. カスタムボタンのXMLファイルに貼り付ける</dt>
<dd>コピーしたコードを &lt;icon&gt; と &lt;/icon&gt; の間に囲まれるようにXMLファイルへ追加し、ファイルを保存します。</dd>
<dd>この際、 &lt;/button&gt; よりも前に追加するようにしてください。</dd>

<dt>4. Firefoxを再起動する</dt>
<dd>保存したことを確認したら、Firefoxを再起動します。 するとカスタムボタンが設定したアイコンになっています。</dd>

</dl>


<p>なぜゆえに最初からアイコンが付与されていないのかが疑問ですが、こうしないと分かりずら過ぎて使えたものじゃないですよね。 速く治ってくれると嬉しいところです。</p>


<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>