各ページに関連ページ(Google検索)を表示

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;
}