2008/09/15
Google AJAX Search APIを用いて各ページにそのページと関連のあるGoogle検索の結果を表示するようにしました。以下、作業内容です。
APIキーの取得
AJAX Search API キーへの登録ページからAPIキーを取得する。検索コントロール定義
Developer's Guideを参照し、検索コントロールを定義する。当サイトでは以下のように定義した。
// AJAX Search APIロード(APIの種類とバージョンを指定) google.load("search", "1"); function OnLoad() { // 検索コントロール生成 var searchControl = new google.search.SearchControl(); // 検索種別設定(Web検索) var siteSearch = new google.search.WebSearch(); siteSearch.setQueryAddition("-site:l-w-i.net"); // 自サイト除外 var options = new GsearcherOptions(); options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN); // 検索結果を開く searchControl.addSearcher(siteSearch, options); // 検索種別設定(ブログ検索) searchControl.addSearcher(new google.search.BlogSearch()); // 検索オプション設定 searchControl.setNoResultsString("関連情報はありません。") // 検索結果なし // の時の文字列 // 検索結果オブジェクト生成 var search_control = document.getElementById("searchcontrol"); // 描画オプション設定 var drawOptions = new GdrawOptions(); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); // タブ表示 searchControl.draw(search_control, drawOptions); // 検索 searchControl.execute(search_query); // クエリはWiki // エンジン内で作成 } // OnLoadハンドラ指定 google.setOnLoadCallback(OnLoad);
Wikiエンジン
Google AJAX API共通ローダーのロード
<head> : <script type="text/javascript" src="http://www.google.com/jsapi?key=<取得したAPIキー>"></script> : </head>
検索コントロールで使用する検索クエリ作成
各ページのタイトルから検索に不要な文字(記号など)を除去し、検索コントロールのsearchControl.executeへの引数(search_query)を作成する。
検索結果ブロック定義
検索結果を出力したい場所に定義する。このブロックの内容が検索結果と置き換えられる。
<div id='searchcontrol'>searching...</div>
CSS
検索結果の見映えを調整する。
検索結果をブロックの幅全体に描画
.gsc-control { width: 100%; }
検索ボックスを非表示
.gsc-search-box { display: none; }
検索結果の各エントリタイトル、及び次ページへのリンクの文字色を当サイトと統一
.gs-title .gs-title, .gs-title .gs-title b, .gsc-trailing-more-results .gsc-trailing-more-results { color: #5986a7; }