ホーム>Web デザインのチュートリアル>WEB標準化

OpenSearch アプリケーションに関する予備調査

著者：Eve Cole 更新時間：2009-05-31 01:02:24

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

実際、これは OpenSearch のアプリケーションであり、対応するマイクロ形式の XML ファイルを作成するだけで、対応する検索ボックスを作成できます。 OpenSearch の定義書を参照すると、基本的な XML 形式を取得できます。たとえば、一般的な検索 XML ファイルは次のように指定できます。

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<InputEncoding>utf-8</InputEncoding>
<ShortName>ShortName</ShortName>
<説明>説明</説明>
<Image type="image/vnd.microsoft.icon">ファビコン</Image>
<URL type="text/html" template="http://who.am.i/search?word={searchTerms}"/>
</OpenSearchDescription>

上記の XML ファイルは理解しやすいですが、固定された XML ルートを除き、他の定義は文字通りに理解できます。

  • InputEncoding は、Web サイトの実際の状況に応じて検索のエンコーディングを指定します。
  • ShortName これは、「Google 検索」などの検索の短縮名です。
  • 説明 この検索ボックスの説明 (「淘宝網ショッピング検索 - 思いつかない場合のみ、見つからないものは見つかりません。」など)。
  • 画像は Web ページのファビコンに似ており、識別検索に使用されます
  • URL これは最も重要なパラメータであり、検索リンクを指定します。多くのパラメーターがあり、通常は {searchTerms} パラメーターを使用して検索用語を指定します。パラメータ type="text/html" は、ページが返されることを示します (ブラウザはこのページにジャンプします)。他の形式の場合は、対応するデフォルト プログラム (たとえば、type="application/) を使用して開かれます。 rss+xml」が使用されます) RSS リーダーが開きます)。

OpenSearch の XML 形式の作成が完了しました。詳細については、OpenSearch の定義ドキュメントを参照してください。次に、この検索をページに追加する必要があります。方法は基本的に 2 つあります。ページの先頭にリンク タグを追加する (RSS と同様) ことと、JavaScript を使用してリンク タグを追加する (トリガーするボタンを定義するなど) ことです。リンクタグの追加は非常に簡単で、フォーマットは次のとおりです。

<link rel="search" type="application/opensearchdescription+xml"
href="http://who.am.i/search.xml" title="短い名前" />

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 以降のバージョンは、エクスプローラーの 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", /* エンジン名 */
"説明" ); /* カテゴリ名 */
}}

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

関連記事