第6回　Googleツールバーにオリジナル・ボタンを追加する(1)

レシピ プラットフォーム：Internet Explorer / Googleツールバー4.0以降 使用言語：XML

　今回は，今までとはちょっと毛色の違うところで，Googleツールバーにオリジナル・ボタンを追加するというのをやってみます。

　Googleツールバーは，Googleのトップページから「Googleについて」をたどった先（http://toolbar.google.com/intl/ja/）からインストールします。GPL系ソフトウエアのインストール時に一緒にインストールされることもあります。

　インストールすると，ブラウザのツールバーに検索系のボタンがいろいろと増えるようになってます。なお今回の内容は，Google側の制約でInternet Explorer用Googleツールバー限定です。Firefox版では動かないことがあります。

オリジナルボタンの雛形を作る

　Googleはいろいろな開発用APIを提供しています。今回使用するのはツールバーAPIです。ドキュメントも日本語で完備されていますから，一度確認してください。

　ツールバーAPIは，XMLベースのプログラムです。そのため，一般的なプログラムほどの自由度はなく，どちらかというとプロパティをガンガン設定していくという雰囲気になります。言い換えれば，さほど力を入れる必要もなく「とりあえず作ってみるかぁ」的な緩さがあります。

　プログラム初心者に優しいのはもちろん，中級者にとっても，一般的な開発言語とはまた一味違う環境を知ることができます。今後のWeb API系プログラミングの学習に，何らかの肥やしになると思います。

　では，まずベースになるXMLを作成しましょう。前提条件は，Googleツールバーがすでにインストールされている（ブラウザ上のツールバーに出ている）ことです。インストールされていないと，以下の説明通りにいかないので注意してください。

　現在ご覧になっているITproのページ右上に検索用のテキストボックスがありますね。このテキストボックス内でマウスを右クリックします。表示されたメニュー内の「カスタム検索を実行..」をクリックします。

図1●テキストボックスで右クリックして「カスタム検索を実行..」を選択

　Googleツールバーカスタムボタン生成ツールというウィンドウが現れるので[追加]を押して登録します。この段階では，ボタンの内容がどうこうということは考えなくて平気です。

図2●Googleツールバーカスタムボタン生成ツールのウィンドウ。内容はそのままで[追加]をクリック

図3●インストール完了のメッセージが表示される

図4●GoogleツールバーにITproのアイコンが追加された [画像のクリックで拡大表示]

　何も考えないで[OK]を押していくと「インストールされました」と表示され，Googleツールバー上にITproのアイコンが追加されます。この表示アイコンは，ブックマークのときに使用されるものと同じで，Googleのシステムがそのサイト内でfavicon.icoというファイルを探して引っ張ってきています。個人のサイトなどでは，デフォルトの虫眼鏡アイコンになります。

　今登録されたアイコンで，実際にITpro内の検索が可能です。Googleツールバーの検索語句入力欄（ブラウザ標準の検索語句欄ではありません）に「園田誠」と入力してからITproアイコンを押すと，私がITproで書いている記事の一覧（検索結果）が出てきます。これは，Googleでの検索ではなく，あくまでもITproの検索フォームへの送信になっている点に注意してください。当然ながら，全く別のサイトを見ているときにも，この検索機能は働きます。ITproの検索機能を，ツールバーから直接送信しているというわけです。

図5●GoogleツールバーからITpro内検索ができるようになった

　Googleツールバーの右端「設定」メニューから[オプション]を開いて[ボタン]タブを見ると，今作成したボタンが登録されているのがわかります。

図6●[設定]－[オプション]－[ボタン]で登録したボタンが確認できる

図7●[詳細エディタを使用する]をクリックしてXMLを編集

　itpro.nikkeibp.co.jpを選択して[編集]ボタンを押します。「詳細エディタを使用する」というリンクをクリックすると，ブラウザが開いてXMLを直接編集するテキストエリア画面が出ます。

図8●編集画面はブラウザ・ベースのフォーム [画像のクリックで拡大表示]

　アイコンがエンコードされて埋め込まれているので長くなっていますが，関係部分だけを抜き出したコードは次のようになっています（一部URLやタイトルは登録したページによって異なります）。特にプログラムらしい部分はありません。純粋なXMLです。

<?xml version="1.0"?> <custombuttons xmlns="http://toolbar.google.com/custombuttons/"> 　<button> 　　<search charset="euc-jp"> 　　　　　　　　・ 　　　　　　　　・ 　　　　　　　　・

リスト1●カスタムボタンのXMLファイル

　何かのボタンを作ろうと思ったときは，上記の作業を一度行うことでひな型になるXMLを生成できます。あとはXMLを煮るなり焼くなり自由に改変していけばいいわけです。アイコンもデータとして埋め込まれているので，これを差し替えたり消したりすることも難しくありません。

　ボタンのひな型はITproに限らず，どのサイトでも入力フォームとテキストエリアがあれば作れます。プログラマならば，そのサイト用の検索ボタンを作るためというよりは，ボタンのひな型を作るために適当なサイトのフォームを利用するといった感じになるかもしれません。

ボタンにRSSフィードを追加する

　できあがったボタンを改造してみます。ボタンにはRSSリーダーの機能を加えることができます。<button>から</button>の間の適当な場所に次のコードを挿入します。

<feed refresh-interval="1800">
http://feeds.nikkeibp.co.jp/Development</feed>

　<feed>というタグです。このURLは，ITproの開発者向けRSSになっています。このタグを挿入して「Googleツールバーに保存する..」というボタンを押すとカスタムボタンの置換確認が出ます。[OK]を押して置換してください。

図9●ボタンの右側に矢印が現れる。クリックするとRSSの内容が表示される [画像のクリックで拡大表示]

　ボタンが下向き矢印でリストが出るタイプに変わります。矢印部分をクリックするとRSSフィードの内容を閲覧できます。1行追加しただけで簡単にRSSリーダー機能を搭載できたわけです。

　<feed>では，RSSをURLで指定しますが，これは他の部分のURL指定とは完全に独立したものです。今回の例でも，ITproのボタンだからITproのRSSでなくてはならないということはありません。ここに他の新聞社などのRSSを読み込むこともできます。

　なお，二つ以上のフィードを読み込もうとして次のような記述をしても効果はありません。読み込めるフィードは一つだけという仕様のようです。

[これはうまくいかない]
<feed refresh-interval="1800">http://A.RSS</feed>
<feed refresh-interval="1800">http://B.RSS</feed>

　refresh-intervalには，何秒間隔でRSSの確認を行うかを指定します。1800は30分を意味します。更新間隔を数秒おきのように小さくしすぎると，ブラウザにも相手のサーバーにも負荷がかかります。30分程度を目安としてください。

　他の部分をそれらしく書き換えたXMLを掲載しておきます。<icon>は長くなるので省略しています。

<?xml version="1.0"?> <custombuttons xmlns="http://toolbar.google.com/custombuttons/"> 　<button> 　　<search charset="euc-jp"> 　　　　　　　　・ 　　　　　　　　・ 　　　　　　　　・

リスト2●RSS機能を加えたカスタムボタンのXML

画像のエンコード文字列を生成するプログラム

　今回はプログラムが少なくてちょっと寂しいので，<icon>タグの部分に書く文字列を，画像ファイルから生成するプログラムを紹介しておきます。

　PHPのサンプルです。変換したい画像をプログラムと同じディレクトリに入れてください。ブラウザを経由しなくてもコマンドラインPHPで変換できます。画面表示と同時にencode.txtというファイルに変換結果を書き出します。

<?php //コンバートする画像の指定 //フルパスで指定するか同一ディレクトリにアップロードしておきます $img = "test.gif"; //ファイルを開いて読み込み $fh = fopen($img,"r"); 　　　　　　　　・ 　　　　　　　　・ 　　　　　　　　・

リスト3●iconタグに書く文字列を，画像ファイルから生成するプログラム

　ボタンのアイコン画像として使用できるのはBMP，ICO，GIF，JPEGの各形式です。表示サイズは16×16になりますが，大きい画像でもツールバー側でサイズ調整して16×16に収まるように変換されるようです。

サーバー処理と連携がとれるかも？

　Googleツールバーの基本形をざっと解説しました。このボタンからサーバーサイドに情報を送信できる（検索をさせた）ということは，サーバー側から送られてきた情報に対して何らかの処理をさせることで，もう少し面白いことができそうな気がします。

　ボタンそのものを自動でアップデートさせるということもできるので，配布後にバージョンアップして機能強化していくということも可能です。このあたりの工夫を次回にお届けしようかと思います。