kwLog

サイト内検索ネタその3。
Google カスタム検索をさらにカスタマイズする。つまりカスタム Google カスタム検索！

Google カスタム検索は結構イケてる。
http://www.google.co.jp/coop/cse/
Google カスタム検索でGoogle AJAX Search APIを使ってAjaxな検索機能をサイトに置くこともできる。むろん技術的な知識はあまり必要なく、設定をいろいろするだけでhtmlをはき出してくれる。

デフォルトでは検索ボックスはほとんどデザインされておらず、サイトのテイストと合わないことがあるかもしれない。ただcssでstyleを設定しようにもGoogle カスタム検索で出力されたhtmlではjavascriptでstyleを上書きしているため変更することができなかった。
なのでデフォルトのhtmlを書き換えてみた。
まず、カスタム検索のことは忘れてデザインをつくる。今回は
HOWTO: spruce up your search box with CSS and a background imageを参考にさせてもらった。
Fireworksで背景画像とサーチボタンの画像を作る。背景は長方形に丸みをつける(160×24、丸み80%)。

検索ボタンは２つ丸のパスを交差してドーナッツをつくり、さらに長方形を45°傾けたものをパス合成する。合成したパスに対して軽くドロップシャドウをかける。色をサイトのテイストに合わせばそれらしくなる。
ここでポイントをあげるとするとエディットボックスの背景画像に

を使う場合、この画像の高さが16pxあるのでこれが入りきるサイズでデザインしておく必要がある。
さてここからカスタム検索で出力されたhtmlをいじっていく。今回はカスタム検索で、[検索結果のホスティング オプション] > 自サイトで検索結果をホスト: > オーバーレイ – 1 ページですがモーダル オーバーレイで結果を表示しますで作成されたコードをベースにした。
デフォルトだとこんな感じ。

<form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
<div>
<input type="text" name="q" size="40"/>
<input type="submit" value="Search"/>
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003122074834180947232%3Aomul0da14we&lang=ja"></script>
<div id="results_003122074834180947232:omul0da14we" style="display:none">
<div class="cse-closeResults">
<a>&times; 閉じる</a>
</div>
<div class="cse-resultsContainer"></div>
</div>
<style type="text/css">
@import url(http://www.google.co.jp/cse/api/overlay.css);
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAJeJU0o6FZh4wCRoY2rR1hBSMcL7SouxgcRP3eM7gifYIAxifSRRui72u-FxNMVGc5XOm17HJdpuoTw&hl=ja" type="text/javascript"></script>
<script src="http://www.google.co.jp/cse/api/overlay.js" type="text/javascript"></script>
<script type="text/javascript">
function OnLoad() {
new CSEOverlay("003122074834180947232:omul0da14we",                 document.getElementById("searchbox_003122074834180947232:omul0da14we"),                 document.getElementById("results_003122074834180947232:omul0da14we"));
}
GSearch.setOnLoadCallback(OnLoad);
</script>

HOWTO: spruce up your search box with CSS and a background imageに沿ってフォームをいじる。具体的にはsubmitボタンを画像にする。
before:

<form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
<div>
<input type="text" name="q" size="40"/>
<input type="submit" value="Search"/>
</div>
</form>

after:

<div id="search-box">
<form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
<div>
<input class="search-text" type="text" name="q"/>
<input type="image" src="/css/img/layout/search-go.png" width="19" height="18" class="search-go" alt="Search" title="Search" />
</div>
</form>
</div>

なんということで(ry
で検索ボックスにcssを適応する。

#search-box { position:absolute; top:6px; right:4px; display:block; width:160px; height: 24px; background: url(./img/layout/search-bg.png); }
#search-box input.search-text { float:left; margin: 2px 0 1px 6px; padding:0; border:0; width: 120px; }
#search-box input.search-go { float: right; margin: 3px 4px 0 0; }

しかし、前述の通りinputのcssはjavascriptによるstyleの上書きにより適応されない。そこでjavascript部分に手を加える。
styleに手を入れているのはformの次にある

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003122074834180947232%3Aomul0da14we&lang=ja"></script>

である。
これを次に置き換える。

<script type="text/javascript">
(function() { var f = document.getElementById('searchbox_003122074834180947232:omul0da14we'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = ''; } var b = function() { if (q.value == '') { q.style.background = 'transparent url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = 'none'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
</script>

なんという(ry
minifyされているのでわかりにくけどだいたい以下のような変更をしている。

 (function() {
var f = document.getElementById('searchbox_003122074834180947232:omul0da14we');
if (!f) { f = document.getElementById('searchbox_demo'); }
if (f && f.q) {
var q = f.q; var n = navigator; var l = location;
if (n.platform == 'Win32') { q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;'; }
var b = function() {
if (q.value == '') {
q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat';
q.style.background = 'transparent url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; 
}
};
var f = function() {
q.style.background = '#ffffff';
q.style.background = 'none'
};
q.onfocus = f; q.onblur = b;
if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

（流用する場合は’searchbox_003122074834180947232:omul0da14we’のところを置き換えてください）
これでcssが適応されデザインされた検索ボックスが表示されるはず。
before

after

なんということでしょう。匠の手によって味気なかった検索ボックスが見事にサイトに溶け込みました!!

kwLabsにカスタム検索を追加したことを記念して３回にわかって個人ウェブサイトにおけるサイト内検索ネタを書いてみようと思う。今日はGoogleでサイト内検索をする際にどういうものが利用できたかを時系列に考えてみた。
・検索システムの導入
検索エンジンがポピュラーになるその昔。ホームページに検索機能をつけようと思うとNamazuのような検索システムを導入する必要があったと思う。しかし、構文解析をしたり、インデックスを作ったり、簡単なようで検索システムというのは結構大変な仕事をしている。この時代にサイトを作ろうとするような人はイノベーターという位置に属する人たちだがそれでも導入は大変だったのではないかと思う。ただ残念なことにこのようなシステムを使っているサイトであまり良い検索ができた記憶がない。
・検索エンジンを使う
Googleがメジャーになり、Webで情報を探すことを指す言葉がネットサーフィンよりもググるという言葉が適切になってきたころ、検索エンジンを利用してサイト内検索するTipsがあった。Googleでは検索キーワードに”site:blog.makotokw.com”といった文字を追加するとそのURL以下のサイトで検索を行ってくれる。自分のサイトが滞りなく検索エンジンにクロールされていれば、検索キーワードに”site:○○”という文字列を追加したものをGoogleに投げれば、サイト内検索として使うことができる。Formの使い方さえ知っていれば高度な技術的な知識は必要なかった。
・Ajax Search APIとCustom Search Engine

Googleの検索をsubsetとして使うツールとしてAjax Search APIとCustom Search EngineがGoogleから2006年にリリースされる。Custom Search Engineは特定のURL以下（他にもいろいろ機能はあるが）を検索するための検索ボックスやパラメータを簡単な設定で自動的に作ってくれるのでWebの知識があまりない人でも使うことができたと思う。
Ajax Search APIではJavascriptを使って検索結果を取得することができ、site:○○で制限するような機能ももっているのでこれを使ってサイト内検索を行うことができる。APIなのでプログラミングの知識がどうしても必要になるが、その気になればデータの取得だけをAPIで行ってそれをどうデザインして表示するかをコントロールすることもできる（はず、やったことない）。ただ、Custom Search Engineで十分事足りるせいか、Ajax Search APIはもっぱら画像検索や地図検索などサイト内検索以外の用途での利用が多いような気がする。
そんなこんなで現状はGoogleを使ってサイト内検索をするのにはCustom Search Engine(カスタム検索エンジン) http://www.google.co.jp/coop/cse/ を使うのが良さそうだ。
Movable TypeやWordpressのようなブログのツールも検索機能を持っているがやはりGoogle様と比べるとパフォーマンスは芳しくない。（まぁツールよりもインフラの違いによるものが大きいと思うが。。。）
ブログツールの検索機能の方が本文で効果的に検索できるけど、ブログ検索みたいなものもあるし、賢い検索エンジンはサイトがブログであることを判定して、記事の本文はどれかも判断することもできそうだ。そのうちブログツールの検索機能も検索エンジンに依存していくのかもしれない。
というわけでAjax Search APIを使ったMovable Typeプラグインでも書いてみようかなと思う今日この頃。