Firefoxの検索バーに好きなサイトを追加する方法

実際に追加したのは検索サイトのURLなどではなく、自分で作ったサイト上のとあるinput項目のショートカットとして利用したのだが、上手く動作した。

手順は次の通りである。

インストール用のXMLファイルを作成し、Webサーバに配置する
上記のXMLへのリンクを作成する

まず、インストール用のXMLを作成するためにFirefoxのサイトに行って、初めから用意されているサイトのXMLをテンプレートとして手に入れた。具体的には、右上の検索バーの▼から「検索バーの管理...」を押下し、表示されたポップアップの左下にある「検索エンジンを追加...」リンクを押下する。すると「Firefox用アドオン - 検索エンジン」画面が表示される。すでに用意されている検索バーの追加サイトは通常ここからインストールするわけだ。

試しにどれでもいいので「＊＊検索」のようなリンクをクリックしてみる。検索バーに存在しないサイトの場合は「＊＊検索を検索バーの検索エンジン一覧に追加しますか？」というポップアップが表示され、「追加」ボタンを押下すると追加される。すでに検索バーに追加しているサイトの場合は「同じ名前の検索エンジンがすでに存在するため、Firefoxは"http://***.com/****.xml"から検索エンジンをインストールできませんでした」というポップアップが表示される。ここでは、このXMLファイルを作成することになる。

インストール用のXMLファイルを作成し、Webサーバに配置する

自分がテンプレートとして参考にしたのはe-Words (IT 用語辞典)のそれだ。自分はこの形式でできたので他の形式を詳しくは見ていないのだが、例えばYouTube 動画検索のXMLではまたちょっとXMLの書き方が違うようだ。

e-Words (IT 用語辞典)のXMLは次のようなものである。

<OpenSearchDescription
 xmlns="http://a9.com/-/spec/opensearch/1.1/"
 xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>e-Words</ShortName>
<Description>e-Words search</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">
data:image/x-icon;base64,/* アイコンデータ */
</Image>
<Url type="text/html" method="GET" template="http://e-words.us/e-words_search.php">
  <Param name="q" value="{searchTerms}"/>
</Url>
<moz:SearchForm>http://e-words.us/e-words_search.php</moz:SearchForm>
</OpenSearchDescription>

オリジナルなXMLの作成のために、ここで修正すべきは次の要素である。

ShortName
Description
Image（アイコンデータ）
URL（method、template）
Param（name）
moz:SearchForm

ShortNameは、検索バーに何も入力されてない状態のときにうっすらと表示される文字列になる。Descriptionは何でもよく、検索バーを識別する名前となる。検索バーに追加するサイトが重複しているかどうかに利用されるのかもしれない（試してはいませんが、）。

アイコンデータは、検索バーの左側に表示されるアイコンのデータになる。ここに記述するのはそのアイコンファイルの中身をテキストデータとしたものと考えてよい。ただし、アイコンファイルの中身（バイナリデータ）をテキストデータ（Base64形式）とするには何らかのソフトで変換する必要がある。自分は自作のプログラムで変換したのだが、ちょっと調べたところではよさそうなフリーソフトが見つからない。エディタ等で変換できる場合はそれを利用していただき、その結果データを「/* アイコンデータ */」部分にコピペしてもらえばよい。ちなみに自分はその長大な結果データを一行にして張り付けた。とても長いが、e-Words (IT 用語辞典)のXMLでもそうしていたからだ。

ここではもう一つの方法、アイコンファイルのURLを指定する方法も見てみる。

<Image height="16" width="16" type="image/x-icon">http://****.com/**.ico</Image>

まぁそのまんま、アイコンファイルをWebサーバ上に置き、そのURLを指定する。これを上記のImage部分と置き換えればよい。この記述はYouTube 動画検索のそれを参考にした。

続いて、URL、moz:SearchFormだが、これはそのまま、検索サイトののaction先を指定すればよい。moz:SearchFormはあまり気にしなかったのだが、その検索サイトが検索元の画面のURLをチェックしている場合は、ここにその画面のURLを記述する必要があるのかもしれない。よく調査していない。

Firefoxの検索バーのこのような設定で感心したのは、POSTにも対応していることである。URLのmethodにPOSTと設定すると、ちゃんとPOSTで送信されるのである。自分が作成した入力項目はセキュリティ上なるべくPOSTとしたかったので、その制約を守ることができてとても良かった。

最後に、Paramだ。このname部分に入力項目の名前を設定する。入力項目がHTML上で

<input type="input" name="q" value="" size="30">

などとなっている場合は「q」がそれにあたる。そのParamが検索文字列を入力する場合は、valueの値に「{searchTerms}」と入力する。よく、検索サイトには隠し項目（type="hidden"）として固定値が設定されている場合がある。例えばGoogleの「hl=ja」などだ。こういったものがある場合、nameに「hl」、valueに「ja」としたものを別途追加すると送信されるものと思われる。

XMLファイルはこれで完成。これをWebサーバにアップロードする。このWebサーバのURLが配布元サイトとなる。広く一般に公開したい場合はこのURLが責任サイトとなるだろう。一方、個人で楽しむ場合はlocalhostでも構わない。ただし、Webサーバとしてサービスが動いているところに置くことが肝腎で、Firefoxからhttp、https、もしくはftpでアクセスできなければいけない。

XMLへのリンクを作成する

そして、検索バーに追加するためのリンクを作成する。リンクといってもhrefに意味があるのではなく、そのonclickのJavaScriptがメインである。

なお、個人で検索バーに追加したいだけならば、次のようなJavaScript記述をFirefoxのアドレスバーに入力してEnterするだけでよい。

javascript:window.external.AddSearchProvider("http://host.com/example.xml");

もちろん、上記JavaScriptのホスト名などの文字列は環境によって書き換えていただきたい。

自分のサイトで紹介する場合は、上記のようなスクリプトを実行してもらうようリンクやボタン等で用意しておく。このXMLはFirefox専用であるので、このXMLしか用意していない場合は（IE用のものを同時に用意するのでなければ）、Firefoxのときのみ表示されるようにするといいと思う。

prototyp.jsを使用すれば、それは次のように書けるかもしれない。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
<!--
if (Prototype.Browser.Gecko) {
  document.write("<a href=\"/\" " 
    + "onclick=\"window.external.AddSearchProvider"
    + ('http://host.com/example.xml');" 
    + "return false;\">検索バーに追加</a>");
}
// -->
</script>