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 – 検索エンジン に記載のスクリプトを参考にさせていただいた。

ページ要素を整理すべく、検索フォームの場所を（ヘッダ部分に）移動のうえ、Flickr 風なインタラクションをもったかたちに改良。あわせて input タグに accesskey 属性を追加し、キーボード操作で検索フォームにカーソル移動できるようにした。

HTML は以下のとおり。

<form method="get" action="http://blog.shimazu.org/index.php">
<input type="text" accesskey="f" name="s" id="searchinput" />
</form>

JavaScript コードは以下のとおり。実装において、Yahoo! UI Library (YUI) の yahoo-dom-event.js を使用した。最近よく見る直感的なインタラクションだけど、コードは思いのほか直感的ではない。

(function(){
var defalutvalue = 'Search...';
var edited = false;
var E = YAHOO.util.Event;
var D = YAHOO.util.Dom;
E.addListener('searchinput', 'focus', function(){
    if(this.value == defalutvalue && !edited) this.value = '';
});
E.addListener('searchinput', 'blur', function(){
    if(this.value == '') {
        this.value = defalutvalue;
        edited = false;
    } else {
        edited = true;
    }
});
E.addListener(this, 'load', function(){
    D.get('searchinput').value = defalutvalue;
});
})();

実装途中で気づいたけれど、Firefox の accesskey の操作がバージョン 2.0 から変わった模様。従来、[ Alt + Access Key ] だったのが、[ Alt + Shift + Access Key ] となっている。