WebOS Goodies

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

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

Firefox 検索プラグインの作成方法(実践編)

最近アクセス解析を始めてみてわかったのですが、Firefox検索プラグイン の需要がけっこうあるようですね。とくに最近、作成方法を解説した記事にいくつかのサイトさんからリンクしていただいたようで、いつもアクセス数の上位にきています。さらに、先日はとむさんからトラックバックまでいただきました。

それならということで、もう少しフォローしてみようと思います。とくに前の記事は個々の設定の紹介をメインにしてしまったため具体性にかけていたので、今回は実践編として、ひとつの検索プラグインを作成する過程を順を追ってご紹介しようと思います。

どのサイトの検索プラグインを作るか迷ったのですが、Yahoo!辞書がパラメータもそれほど複雑でなく、かつ必要な要素を含んでいたので、今回はこれでいきましょう。

2006/7/27 追記
Firefox 2.0 検索プラグインの作り方(実践編)として、 Firefox 2.0 の新しい検索プラグインの作成方法を記事にしました。併せてご参照ください。

テンプレート

まずは、ほとんどの検索サイトで共通と思われる設定を記述したテンプレートを書いておきます。

<search
   name="サイト名"
   method="GET"
   action="http://www.siteurl.com/"
   queryCharset="UTF-8"
   sourceTextEncoding="1"
>

この内容をプロファイルディレクトリの "searchplugins"(WindowsXP ならば "C:\Documents and Settings\<ユーザー名>\Application Data\Mozilla\Firefox\Profiles\<ランダムな文字列>.default\searchplugins")に拡張子を ".src" にして保存します。名前はなんでもかまいませんが、ここでは "YahooDic.src" としておきましょう。

その後 Firefox を起動すると、検索ボックスのメニューに「サイト名」が表示されるはずです。あとは必要な設定を記述すれば、実際に検索ができるようになります。

※Windows 以外のプラットフォームでのプロファイルディレクトリの場所は、Firefox のページを参照してください。

検索プラグインのカスタマイズ

それでは、テンプレートをもとにして Yahoo!辞書のプラグインを作成しましょう。基本的には、プラグインのタイトル、URL、文字コード、パラメータなどを修正・追加すれば OK です。

検索結果ページの URL を把握する

検索プラグインに記述する内容は、タイトルや文字コードの指定以外は検索結果ページの URL を構築するための情報がほとんどです。したがって、Firefox の検索プラグイン作成のポイントは検索結果ページの URL を把握することになります。

そのための一番手っ取り早い方法は、実際に適当な単語を検索してみることです。例えば Yahoo! 辞書で「Gentoo」を検索すると、以下の URL になります。

http://dic.yahoo.co.jp/bin/dsearch?p=Gentoo&stype=0&dtype=0

これを見ると、"p" というパラメータで検索語が渡されているのがわかります。"stype", "dtype" が何を表しているのかはわかりませんが、とりあえずこのとおりに指定することにします。

この URL をもとにして検索プラグインをカスタマイズしていきましょう。

サイト名の指定

まずは手始めに <search> タグの name 属性にサイト名を指定します。これは、検索ボックスのメニューに表示される名前です。ここでは、「Yahoo!辞書」としておきましょう。

name="Yahoo!辞書"

検索フォームのURL の指定

<search> タグの action 属性には検索ページの URL を指定します。通常は、検索結果ページの URL の "?" より前の部分を指定します。ここでは、"http://dic.yahoo.co.jp/bin/dsearch" ですね。

action="http://dic.yahoo.co.jp/bin/dsearch"

文字コードの指定

検索語に日本語が使用できるように、 <search> タグの queryCharset 属性で文字コードを指定します。テンプレートでは仮に UTF-8 が指定されていますが、検索サイトの仕様に合わせて変更する必要があります。ほとんどの場合、これは検索結果ページの文字コードと同じです。Firefox で表示中のページの文字コードを調べるには、メインメニューの [ツール]-[ページの情報] を使うとよいでしょう。Yahoo!辞書では EUC-JP が使われているので、それを指定します。

queryCharset="EUC-JP"

もし日本語が化けるようなら、"UTF-8", "Shift_JIS", "ISO-2022-JP" などを試してみてください。

検索語を受け渡すパラメータを指定

さて、いよいよ佳境です。検索語を受け渡すためのパラメータ名を指定しましょう。そのためには、以下のような要素を記述します。

<input name="<パラメータ名>" user>

前述のように、Yahoo! 辞書で検索後を受け渡すパラメータは "p" になっているので、以下の記述を追加します。

<input name="p" user>

その他のパラメータを指定

さらに、固定のパラメータは以下のように指定します。

<input name="<パラメータ名>" value="<値>">

これは HTML のフォームと同じですね。Yahoo! 辞書では stype=0 と dtype=0 の 2 つのパラメータがありますので、以下の記述を追加します。

<input name="stype" value="0">
<input name="dtype" value="0">

完成

これで Yahoo!辞書検索プラグインが完成しました。念のためソース全体を掲載しておきます。

<search
   name="Yahoo!辞書"
   method="GET"
   action="http://dic.yahoo.co.jp/bin/dsearch"
   queryCharset="EUC-JP"
   sourceTextEncoding="1"
>

<input name="p" user>
<input name="stype" value="0">
<input name="dtype" value="0">

Firefox を再起動した後、実際に検索を行って動作を確認してください。

アイコンの指定

ここまでで検索プラグイン自体は完成しましたが、検索ボックスのメニューにアイコンが表示されないのでちょっとわかりづらいですね。メニューに表示するアイコンを指定するには、"searchplugins" ディレクトリに同じ名前(拡張子は画像に合わせる)で画像ファイルをコピーします。

ここでは、Yahoo!辞書の favicon(アドレスバーの左端に表示される小さなアイコン) を使わせてもらいましょう。favicon の画像ファイルは通常、"http://<ドメイン名>/favicon.ico" という URL で用意されています。ここでは "http://dic.yahoo.co.jp/favicon.ico" ですね。それを直接ブラウザでアクセスすれば、ダウンロードすることができます。ただし、ico という拡張子は Firefox が画像だと認識してくれないので、それを騙すために拡張子を ".gif" などに変更してコピーしましょう(^^;

具体的には、上記のファイルをダウンロードして "C:\Documents and Settings\<ユーザー名>\Application Data\Mozilla\Firefox\Profiles\<ランダムな文字列>.default\searchplugins\YahooDic.gif" として保存すれば OK です。

その後、Firefox を再起動すると、検索ボックスのメニューに Yahoo! のアイコンが表示されるはずです。

今回は実際に Yahoo! 辞書の検索プラグインを作る過程をご紹介しました。作成方法のイメージを掴んでいただくことを主眼にしましたので、細かい記述などには触れていません。さらに詳細な設定項目などは、「Firefox 検索プラグインの作成方法」を参照してください。両方読めば、検索プラグインに関するほとんどの知識が網羅できると思います。皆さんもよく使うサイトの検索プラグインを作成して、ブラウジングをより快適にしてしまいましょう!(^^)

関連記事

この記事にコメントする

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