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