WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

Firefox 2.0 検索プラグインの作り方(基礎編)

先日、 Firefox 2.0 の Beta 1 がリリースされ、すでに使用されている方も多いと思います。 Firefox 2.0 では使い勝手の向上を中心に数多くの改良が施されており、Firefox検索プラグインも大きく変更されました。書式が整理されてシンプルになり、いくつか画期的な新機能も追加されています。以前投稿した Firefox 1.5 の検索プラグインに関する記事は今でも多くの方に閲覧していただいているので、今回はそのお礼も兼ねて Firefox 2.0 の検索プラグインの作り方をご紹介しようと思います。

Firefox 1.5 以前のFirefox検索プラグインの作り方についてはFirefox 検索プラグインの作成方法Firefox 検索プラグインの作成方法(実践編)などの記事をご参照ください。 Firefox 1.5 の検索プラグインは Firefox 2.0 でも使えるので、互換性を重視するならこちらを使うことをお勧めします。

なお、この記事の執筆時点では上述のとおり Firefox 2.0 の Beta 1 しかリリースされていません。正式版でなんらかの変更が加わる場合もありますので、その際はご容赦ください。

検索プラグインの保存場所

Firefox検索プラグインは、Firefox のインストールディレクトリ、もしくは各ユーザーのプロファイルディレクトリの中の "serachplugins" ディレクトリに格納されています。インストールディレクトリには主にデフォルトの検索プラグインが保存されており、後から追加したプラグインはプロファイルディレクトリに保存されます。ただし、両者に機能的な違いは存在せず、アクセス権さえあればインストールディレクトリに検索プラグインを追加することも可能です。インストールディレクトリやプロファイルディレクトリの位置はインストール時の指定やプラットフォームによって異なります。各プラットフォームのデフォルトのパスは以下のようになっています。

プラットフォーム インストールディレクトリ プロファイルディレクトリ
Windows 2000/XPC:\Program Files\Mozilla FirefoxC:\Documents and Settings\<ユーザー名>\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default
UNIX/Linux/usr/lib/firefox ~/.mozilla/firefox/xxxxxxxx.default
Mac OS X ~/Desktop/Firefox.app/Contents/MacOS ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default

"xxxxxxxx" はランダムに生成される文字列です。

"searchplugins" ディレクトリには、検索プラグインを記述した XML ファイルが格納されています。逆に言うと、後述の書式で必要な情報を記述した XML ファイルを "searchplugins" ディレクトリに置けば、それだけで検索プラグインが追加できます。 Firefox 1.5 以前とは異なり、アイコンは XML ファイルに含まれいるので、各検索エンジンごとにひとつの XML ファイルがあるだけです。

検索プラグインの概要

では、例として Google 検索プラグインのソースを見てみましょう。

<?xml version="1.0" encoding="UTF-8"?>
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Google</ShortName>
<Description>Google Search</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAA...中略...</Image>
<Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&amp;client=firefox&amp;qu={searchTerms}"/>
<Url type="text/html" method="GET" template="http://www.google.co.jp/search">
  <Param name="q" value="{searchTerms}"/>
  <Param name="lr" value="lang_ja"/>
  <!-- <Param name="num" value="100"/> -->
  <Param name="ie" value="utf-8"/>
  <Param name="oe" value="utf-8"/>
  <!-- Dynamic parameters -->
  <Param name="rls" value="{moz:distributionID}:{moz:locale}:{moz:official}"/>
  <!-- <Param name="hl" value="{moz:locale}"/> -->
  <Param name="hl" value="ja"/><!-- not to be replaced with ja-JP/ja-JP-mac or something eles -->
  <MozParam name="client" condition="defaultEngine" trueValue="firefox-a" falseValue="firefox"/>
</Url>
<SearchForm>http://www.google.co.jp/firefox</SearchForm>
</SearchPlugin>

Firefox 1.5 のときとは違い、まっとうな XML になっています。それぞれのタグで検索に必要な情報を与えてやることにより、Firefox検索プラグインになります。指定するタグは以下のとおりです。

タグ 機能
SearchPlugin ルートノード
ShortName 検索エンジンの名前
Description 検索エンジンの説明
InputEncoding 検索エンジンにデータを渡すときの文字コード
Image アイコンデータ
Url クエリーに使う URL
Param クエリーのパラメータ
SearchForm 検索フォームがあるページの URL

最低限、 ShortName タグと InputEncoding タグ、適切な Param タグを指定した Url タグを SearchPlugin タグの中に記述すればFirefox検索プラグインとして機能するようです。例えば上記の Google プラグインであれば、以下の記述だけでも機能します。

<?xml version="1.0" encoding="UTF-8"?>
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Google 最低限</ShortName>
<InputEncoding>UTF-8</InputEncoding>
<Url type="text/html" method="GET" template="http://www.google.co.jp/search">
  <Param name="q" value="{searchTerms}"/>
</Url>
</SearchPlugin>

とりあえずこのレベルのもので動作確認して、段階的に追加していくのが良いかと思います。

タグリファレンス

以下、それぞれのタグの詳細をご紹介します。

SearchPlugin

Firefox検索プラグインのルートノードです。 XML 宣言(先頭行の "<?xml 〜 ?>" というやつ)以外のタグはすべてこの SearchPlugin タグの中に記述しなければなりません(正確には、 XML 宣言はタグではありませんが)。 Google 検索プラグインでは xmlns 属性が指定されていますが、これは XML 名前空間の指定です。この指定はほぼ必須と考えて良いと思います。

面倒な話を抜きにすれば、すべてのFirefox検索プラグインは以下のような書式になっている、と考えてかまいません。

<?xml version="1.0" encoding="UTF-8"?>
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
  <!-- それぞれの検索エンジン特有の記述 -->
</SearchPlugin>

上記の「それぞれの検索エンジン特有の記述」というところに移行でご紹介するタグを記述していくわけです。

ShortName

検索エンジンの名前を指定します。ここで指定した文字列は Firefox 検索窓のメニューや「検索プラグインの管理」ダイアログに表示されるので、そこに収まる程度の長さで、かつ明確に識別できるものにするのが好ましいです。 UTF-8 であれば日本語も記述できます。

Description

検索エンジンの説明です。現時点ではとくに使用されていないようなので、任意の内容でかまわないと思います。

InputEncoding

検索窓や後述の Param タグで指定した文字列を検索エンジンに渡す際の文字コードを指定します。おそらく、こちらのページにリストアップされている文字コードが指定できるものと思われます。

Image

検索エンジンの名前とともに表示されるアイコンの URL を指定します。指定できる属性には width, height があります。画像のサイズの指定ですが、 "16" 以外を指定するとアイコンが認識されなくなるようです。どちらもかならず "16" を指定するようにしてください。

なお、ここに指定できるのは http: スキームの URL (もしくは後述の data: スキーム)のみのようです。ローカル PC にある画像を使うためには、後述の方法で "data:" スキームに変換する必要があります。

Url

Firefox が検索クエリーを構築するのに必要な情報を指定します。属性を使っておおまかな指定を行い、内部に記述した Param タグで個々のパラメータを指定します。前記の Google プラグインでは 2 つの Url タグが指定されていますが、最初のひとつは検索語の候補を取得するためのもので、 2 つめが通常のクエリーのためのものです。候補の表示に関しては後の記事で詳しくご紹介するつもりですので、今回は省略させていただきます。

Url タグに指定可能な属性は以下のとおりです。

method
HTTP リクエストのメソッドの指定です。 "GET", "POST" のいずれかが指定できます。
type
この URL が通常のクエリーで使用されるのか、候補の表示で使用されるのかを指定します。 "text/html" (通常のクエリー), "application/x-suggestions+json" (候補の表示)のいずれかが指定できます。
template
検索クエリーのベース URL を指定します。 method="GET" の場合、この URL の後に Param タグで指定した CGI パラメータが付加されます。

Param

検索クエリーで渡すパラメータの指定で、必ず Url タグの中に記述します。指定できる属性は以下のとおりです。

name
パラメータの名前です。
value
パラメータの値です。もし "{searchTerms}" という文字列が含まれていた場合、それはユーザーが検索窓に入力した文字列で置換されます。

最終的には Param タグで指定されたすべてのパラメータは InputEncoding の文字コードに変換され、 URLエンコードされてサーバーに渡されます。

SearchForm

検索エンジンのフォームがあるページの URL を指定します。検索窓になにも入力しないでリターンキーを押すと、この URL のページに飛ぶようです。

アイコンについて

検索エンジンの名前の横に表示されるアイコンの指定は、 Firefox 1.5 から大きく変わった部分です。従来は検索プラグインのソースと同じファイル名の画像を使用することになっていましたが、 Firefox 2.0 からは XML ファイルの中に Base64 エンコードで埋め込むようになっています。ちょっとわかりにくい部分なので、詳しくご紹介しようと思います。

data: スキームについて

アイコンの埋め込みには、 data: スキームという、少々特殊な URL を使います。通常の URL は「データの存在する場所」を表していますが、 data: を使用すると、 URL そのものにデータを埋め込むことができます。 data: スキームの URL は概ね以下のような書式になります。

data:[MIMEタイプ][;base64],<データ>

MIMEタイプ
ファイルのフォーマットを指定します。画像ファイルであれば、 "image/png", "image/jpeg" などです。 Firefox 2.0 に標準で含まれている検索プラグインでは、 "image/x-icon" (Windows のアイコンファイル)が使われています。
;base64
これを指定すると、後続のデータBase64 でエンコードされているものとして解釈されます。この指定がない場合は、通常の URL エンコードで解釈されます。
データ
データ本体です。 MIMEタイプ, base64 の指定に沿った形式でなければなりません。

例えば、以下のリンクをクリックしてみてください(Internet Explorer では機能しません)。

URL に埋め込まれた HTML

通常の HTML ページが表示されますが、アドレスバーに表示されているのは上記の "data:" スキームの URL です。このページはどこかのサーバーにあるのではなく、 URL に埋め込まれたデータを表示しています。このように、 "data:" スキームを使えば MIME タイプが規定されているものならなんでも URL に埋め込むことが可能です。ただ、あまり大きなものは無理かもしれませんが(^^;

データの作り方(The data: URI kitchen を使う)

それでは、アイコン画像をどうやって data: スキーマにコンバートすればよいかですが、ありがたいことに便利なページが公開されています。ここでは、画像をコンバートする手順に的を絞って手順をご紹介します。

  1. ブラウザでThe data: URI kitchen のページを表示させます。
  2. 以下の方法でコンバートする画像を指定します。
    • Web で公開されている画像を使用するなら、"Alternatively, give an HTTP URI to use as input:" という文の右にあるテキストボックスにその URL を指定します。
    • 画像を PC からアップロードするなら、 "Alternatively, upload a file:" でファイル名を指定し、 "Trust UA-provided MIME type" のチェックを ON にします。
  3. ページタイトルの下にある "base64" というチェックボックスを ON にします。
  4. 「Generate」ボタンをクリックします。

これで、指定した画像が表示されるはずです。アドレスバーから URL をコピーして、検索プラグインの Image タグの中にペーストしてください。

データの作り方(Firefox のみで作る)

上記のページが使えない場合、 Firefox のみでコンバートする方法もあります。ただし、画像が Web 上で公開されていて、 "http:" の URL でアクセスできる必要があります。

やり方は簡単、まずは普通にFirefox検索プラグインを作り、 Image タグの中に "http:" で始まる普通の URL を指定して Firefox を起動・終了させるだけです。こうすると、プラグインの XML が書き換えられ、 Image タグの中の URL が data: スキームに差し替えられます。ただし、 XML 全体が書き換えられて字下げなどはすべて無効になりますので注意してください。 XML ファイルをバックアップしておき、 URL のみをコピー&ペーストするのがよいでしょう。もちろん、そのまま使っても動作に問題はありません。

配布方法

Firefox の良いところは、検索プラグインを簡単に配布するための仕組みが整っているところです。 JavaScript によってFirefox検索プラグインの追加ボタンを実装する手法は Firefox 1.5 以前からありましたが、 Firefox 2.0 では検索窓のメニューにFirefox検索プラグインの追加を表示する方法が加わりました。こちらは JavaScript さえ必要ないので、より手軽に利用できます。ここでは、この 2 つの配布方法をご紹介します。

JavaScript による自動登録

JavaScriptwindow.external.AddSearchProvider メソッドを使用すると、 Web ページ上から簡単に検索プラグインのインストールが行えます。このあたりの仕組みは Firefox 1.5 以前とほぼ同じです。 AddSearchProvider メソッドの書式は以下のようになります。

window.external.AddSearchProvider(<ソースのURL>);

ソースのURL は上述の書式で検索プラグインを定義した XML ファイルの URL です。もちろんこのメソッドは Firefox の独自拡張なので、以下のようにしてサポートしているかを判別するのがよいでしょう。

if((typeof window.external == "object") &&
   (typeof window.external.AddSearchProvider == "function"))
{
    window.external.AddSearchProvider(<ソースのURL>);
}
else
{
    alert("このブラウザは、 MozSearch プラグインをサポートしていません。");
}

検索エンジンを自動検出させる

ページの HTML に情報を埋め込むことで、 Firefox にそのページに関連する検索プラグインを自動検出させることができます。こちらは Firefox 2.0 で新しく加わった機能ですね。実は、このページにはすでにその自動検出を仕込んであります。もし Firefox 2.0 で閲覧されている方は、検索窓のメニューを表示してみてください。以下のように、検索エンジンを追加するメニューが表示されるはずです。

Firefox 検索プラグインの自動検出

やり方は簡単、 HTMLhead タグの中に以下の書式で link タグを追加するだけです。

<link rel="search"
      type="application/opensearchdescription+xml"
      title="メニューなどに表示するタイトル"
      href="検索プラグインの XML の URL"/>

複数記述すれば、それらがすべてメニューに表示されます。

ただ、自動検出してもアピール度が低いのが難点です。検索窓の虫眼鏡アイコンの色が変わってはいるんですが、こんなの気付かないって・・・orz。せっかくの機能なのに、これではあまり活用されなさそうな気がします。 RSS フィードのように、アドレスバーにアイコンを表示するぐらいしてほしいところですね。

以上が Firefox 2.0 で拡張された検索プラグインの詳細です。この話題に関してはあと 2 回にわたって取り上げていく予定です。次回は実際にFirefox検索プラグインを作りながら、その手順をご紹介します。 3 回目では、今回は触れられなかった候補の表示機能の詳細に迫りたいと思います。とくに候補の表示機能はけっこう面白い使い方ができそうなので、ご期待ください!(^^)

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles