【メモ】 Google AJAX Search APIを利用して検索欄を設置。

膨大な数のエントリーがあるにもかかわらず、
このサイトにはそれを検索する手段がありませんでした。

なぜかってそれはひとえに、MovableTypeの用意している検索が重いから(*1)。
時間掛かるし、負荷も大きいし…と言うわけで、
このたび、Googleを利用したサイト内検索を付けてみました。


サイト内検索


とはいえ、ただ検索ボックスを付けるのも何なので、
Google AJAX Search APIを利用した検索ボックスを。

以下、導入に当たってのメモ。


参考サイト

  1. clmemo@aka: Google AJAX Search でブログ内検索
  2. FFTT : Google AJAX Search API

1. API Key取得

まず、Google APIを利用できるようにしなくてはならないので、
Googleアカウントを用意した上で、API Keyを取得する。

手順をざっくり書き出すとこんな感じ。
(詳細は、参考サイト1を参照のこと)

  1. Google AJAX Search API – Sign Upへ行く。
  2. 対象とするサイト(自分のサイト)のURLを入力して、Generate API Keyを押す。
  3. 表示された”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で、