このサイトにはそれを検索する手段がありませんでした。
なぜかってそれはひとえに、MovableTypeの用意している検索が重いから(*1)。
時間掛かるし、負荷も大きいし…と言うわけで、
このたび、Googleを利用したサイト内検索を付けてみました。
サイト内検索
とはいえ、ただ検索ボックスを付けるのも何なので、
Google AJAX Search APIを利用した検索ボックスを。
以下、導入に当たってのメモ。
参考サイト
1. API Key取得
まず、Google APIを利用できるようにしなくてはならないので、Googleアカウントを用意した上で、API Keyを取得する。
手順をざっくり書き出すとこんな感じ。
（詳細は、参考サイト1を参照のこと）
- Google AJAX Search API – Sign Upへ行く。
- 対象とするサイト（自分のサイト）のURLを入力して、Generate API Keyを押す。
- 表示された”Your key”が、API Key。
2. スクリプトを作成
次に、このAPI Keyを埋め込んだスクリプトを作成する。作成すると言ったって特に難しいことはなくて、
API Keyを取得したときに表示されたサンプルをそのまま貼っても、
とりあえずはなにがしか出来る。
デフォルトのサンプル
とはいえ、これにはサイト内検索は含まれていないので、
スクリプトを書き換えてみる(*2)。
これについては、参考サイト2が参考になる。
えーと、どこをどう変えればいいかというと、
function onLoad()の中ね。
デフォルトではこうなっているけれども、
var searchControl = new google.search.SearchControl();
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
localSearch.setCenterPoint("New York, NY");
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute("Google");例えばこれを、こう書き換える。
var searchControl = new google.search.SearchControl();
var siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("検索対象にしたいURI");
searchControl.addSearcher(siteSearch);
searchControl.draw(document.getElementById("searchcontrol"));すると、WEB検索でサイトを絞ったときの結果が表示される。
（サイト内検索もWEB検索の一部ってことですね）
サンプル 01
“ウェブ”の表示を任意の文字にしたいときには、
さらに1行追加する。
var searchControl = new google.search.SearchControl();
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("ラベルの名前");
siteSearch.setSiteRestriction("検索対象にしたいURI");
searchControl.addSearcher(siteSearch);
searchControl.draw(document.getElementById("searchcontrol"));サンプル 02
タブ表示にするなら、drawにオプションを。
例えばこう。
searchControl.draw(document.getElementById("searchcontrol"));
↓
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);サンプル 03
ロードまでの表示を変えたければ、次の場所を変更。
<div id="searchcontrol">Loading...</div>
↓
<div id="searchcontrol">準備中…</div>サンプル 04
参考：Loading用画像作成サイト
3. CSSカスタマイズ
とまぁそんな感じで、参考サイトを参考に、自分が欲しい機能を追加していけば出来るはず。
これは特に難しいことはない、ですが。
一番面倒なのは、実は、CSSのカスタマイズ。
一応全てにきちんと割り振られてるんだけど、
JavaScriptで書き出している関係上、ソースを見ても表示されていないわけで、
どこをいじればいいか把握するのがまず面倒。
僕なりの解決策は、サンプルのHTMLを、
Firebug入りのFireFoxで見て、
そのCSS構造を解析した上で、
適用されるCSSファイル、つまり、
http://www.google.com/uds/css/gsearch.css
と見比べながら、調整、でした。
まぁ、何とか色々出来てるのでOKかな。
一個だけ例を挙げると、
参考サイト1で、
