1. ホーム
  2. Web制作
  3. XML/XSLT

XML锛歄penSearch 湔湔蝣?

2022-01-12 06:23:16

最近のブラウザの多くは、アドレスバーの右側に検索ボックスがあり、デフォルトでインストールされているのはGoogle検索などです。下図に示すように

これは実はOpenSearchの応用で、対応するマイクロフォーマットのxmlファイルを記述することで、適切な検索ボックスを開発することができます。基本的なxmlフォーマットは、OpenSearchの定義文書を参照することで得ることができます。例えば、典型的な検索のxmlファイルは、このように指定することができます。

{オプションの説明
{入力エンコーディング ユーティーエフエイト
{{ショートネーム 短縮名
{説明文 説明
画像 ファビコン


上記のxmlファイルは、固定されたxmlルートを除いては、文字通り定義がわかりやすく InputEncodingは、サイトの実情に応じて、検索のエンコーディングを指定します。 ShortName "Google検索 "のような、検索の短い名前です。 説明 "淘宝網ショッピング検索-あなただけが考えられない、見つからない "のような検索ボックスの説明です。 ウェブページのファビコンに類似した画像で、検索を識別するために使用されます。 Url 検索へのリンクを指定する、最も重要なパラメータです。多くのパラメータがありますが、一般的には{searchTerms}パラメータを使用して検索語を指定します。type="text/html" パラメータは、返すページを指定します(ブラウザはこのページにジャンプします)。他の形式の場合は、対応するデフォルトプログラムで開かれます(例:type="application/rss xml " は、RSSリーダーで開かれることになります)。
OpenSearchを記述するためのxmlフォーマットは完成しており、詳細はそのOpenSearchの定義文書に記載されています。この検索をページに追加する方法は、基本的に2つあります。ページの先頭にリンクタグを追加する方法(RSSと同様)と、Javascriptを利用する方法(ボタンを定義して発動させるなど)です。リンクタグを追加する方法は非常に簡単で、次のような形式になっています。

href="http://who.am.i/search.xml" title="ShortName"(ショートネーム)。

RSSと同様、relとtypeは固定で、主にhref(上記xmlのurlパス、念のため絶対パスを使用、すなわちhttp:// 最初)とtitle(すなわち検索のショートタイトル)を指定します。したがって、エクスプローラとFirefoxでこのページを開くには、図のように、対応するメニューを見ることができるようになります。

Javascriptで追加するのは少し厄介です(最近はだいぶマシになったかもしれません)。主にブラウザの拡張機能を使うことになりますが、エクスプローラーにwindow.external.AddSearchProviderパラメータがあります(詳細なドキュメント)。典型的な呼び出しは次のとおりです。
window.external.AddSearchProvider('http://who.am.i/search.xml');
引数のリンクは、上記のリンクの内容です。Firefoxでは
window.sidebar.addSearchEngine()で検索します。
"http://who.am.i/search.xml", /* エンジンURL *.
"favicon.ico"、/* アイコンURL *。
"ShortName"、/*エンジン名 *。
"説明" ); /* カテゴリ名 *.

パラメータや例は、サンプルコード(公式ドキュメント)に記載されています。なお、Firefox2以降では、Explorerのwindow.external.AddSearchProvider呼び出しメソッドと「互換」になっています(詳細)。そうすると、対応するJavascriptのコードは次のように書くことができます(Firefox2以前のバージョンとの互換性を判断する場合はelseを追加し、必要ないと思う場合は省きます)。
関数 addEngine(){
/
if (window.external || window.external.AddSearchProvider) {。
window.external.AddSearchProvider('http://who.am.i/search.xml')。
} else if (window.sidebar && window.sidebar.addSearchEngine) {.
window.sidebar.addSearchEngine()。
"http://who.am.i/search.xml"。
"favicon.ico", /* アイコンのURL *.
"ShortName"、/*エンジン名 *。
"説明" ); /* カテゴリ名 *.
}}

このように、リンクやボタンのクリックイベントにこの機能を登録することで、ユーザーが確認のためにクリックした後に図のような確認ボックスがポップアップし、ブラウザの検索ボックスに追加されるようになるのです。