blog.shimazu.org

Firefox 2 や IE 7 で使えるようになったブラウザに組み込めるサイト検索の仕組み「OpenSearch」をこのサイトも対応したのでメモしておく。

以下参考にさせていただいた。

• Home - OpenSearch
• A9.com - Innovations in Search Technologies - OpenSearch
• Mozilla Japan - アドオン - Firefox - 検索エンジン

定義XMLの作成

まず、検索URLなどを定義するXMLを作成する。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>blog.shimazu.org</ShortName>
  <Description>blog.shimazu.org</Description>
  <InputEncoding>utf-8</InputEncoding>
  <Image width="16" height="16">http://blog.shimazu.org/favicon.ico</Image>
  <Url type="text/html" method="GET" template="http://blog.shimazu.org/index.php?s={searchTerms}" />
</OpenSearchDescription>

Imageタグの箇所にはBase64形式のデータも格納可能で、[JavaScript] dataスキームURI生成（画像データのBase64変換） にて、「画像URL」の箇所に http://blog.shimazu.org/favicon.ico などと入力すると、

var data = 'data:image/x-icon;base64,'+
    'R0lGODlhEAAQALMAAP///+Xl5UBAQL+/v6ampllZWU1NTbOzs2ZmZvLy8oCAgMzMzJmZmebm5gAA'+
    'AAAAACH5BAAAAAAALAAAAAAQABAAAARGMMhJqwQ4a323xx0mDB8QAmN5jgSzbGthFALBBZqAYIRw'+
    '5wdMIgXCZYgoUjFnAwwEjcyqdijspEYRwSBQJH4lWDZctJglEQA7';

といった感じでBase64変換される。これを使うと以下のようになる。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>blog.shimazu.org</ShortName>
  <Description>blog.shimazu.org</Description>
  <InputEncoding>utf-8</InputEncoding>
  <Url type="text/html" method="GET" template="http://blog.shimazu.org/index.php?s={searchTerms}" />
<Image width="16" height="16" type="image/x-icon">data:image/x-icon;base64,R0lGODlhEAAQALMAAP///+Xl5UBAQL+/v6ampllZWU1NTbOzs2ZmZvLy8oCAgMzMzJmZmebm5gAAAAAAACH5BAAAAAAALAAAAAAQABAAAARGMMhJqwQ4a323xx0mDB8QAmN5jgSzbGthFALBBZqAYIRw5wdMIgXCZYgoUjFnAwwEjcyqdijspEYRwSBQJH4lWDZctJglEQA7</Image>
</OpenSearchDescription>

今回は単に画像URLの指定でXMLを作成し、 http://blog.shimazu.org/utils/opensearch.xml に置いた。

linkタグの追加

headタグの中に以下linkタグを追加する。

<link rel="search" type="application/opensearchdescription+xml" title="blog.shimazu.org" href="http://blog.shimazu.org/utils/opensearch.xml">

すると、以下のような登録メニューを出せるようになる。

aタグの追加

「Meta」サイトバーに「Add to Search Bar」リンクを追加するため、以下スクリプトを追加した。

function installOpenSearch(engineURL) {
    if (!engineURL) return true;
    window.external.AddSearchProvider(engineURL);
}

(function(){
    var E = YAHOO.util.Event;
    var D = YAHOO.util.Dom;
    E.addListener(this, 'load', function(){
        if (typeof window.external == "object" && typeof window.external.AddSearchProvider == "function") {
            var ul = D.getNextSibling('sidebarMeta');
            if(ul) ul.innerHTML += '<li><a href="javascript:void(0)" onclick="return installOpenSearch(\'http://blog.shimazu.org/utils/opensearch.xml\');">Add to Search Bar</a></li>';
        }
    });
})();

上記に記載の

typeof window.external == "object" && typeof window.external.AddSearchProvider == "function"

という条件式は、「OpenSearch」対応ブラウザか否かを判別するが、Mozilla Japan - アドオン - Firefox - 検索エンジン に記載のスクリプトを参考にさせていただいた。