NOBODY:PLACE

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用画像作成サイト

• Ajaxload - Ajax loading gif generator

3. CSSカスタマイズ

とまぁそんな感じで、
参考サイトを参考に、自分が欲しい機能を追加していけば出来るはず。
これは特に難しいことはない、ですが。

一番面倒なのは、実は、CSSのカスタマイズ。
一応全てにきちんと割り振られてるんだけど、
JavaScriptで書き出している関係上、ソースを見ても表示されていないわけで、
どこをいじればいいか把握するのがまず面倒。


僕なりの解決策は、サンプルのHTMLを、
Firebug入りのFireFoxで見て、
そのCSS構造を解析した上で、
適用されるCSSファイル、つまり、

http://www.google.com/uds/css/gsearch.css

と見比べながら、調整、でした。
まぁ、何とか色々出来てるのでOKかな。


一個だけ例を挙げると、
参考サイト1で、

	Google AJAX Search の横幅は最低 300px は必要っぽい

と書かれているけども、これは、

.gsc-control

にwidthを指定してやれば自由に変えられる。
（ちなみにこのサイトでは、180pxということになっている）


他にも、CSSはいじると色々あるんだけど、
きりがないので、各自よろしく。



そんな感じで。

脚注

*1) 正直に言うと、僕個人は、
どのエントリがどのタグで分類されているか把握しているので、
目当ての記事を探し出すのにそんなに困ってはいなかった。
でも普通、タグってのは付けた人以外にとっては、
そんなに分かりやすいものでもないわけで…。

*2) ちなみに僕はJavaScriptが苦手なので、この作業が苦痛です。
やればやれないことはない（時間掛かるけど）んだけど、
どうしても、JavaScriptって言うと、トラウマが…