/ programing

Google AJAX Search APIを使ってサイト内検索してみる

サイト内検索ネタその2（３回に渡ってといいつつもうくじけそう。。。）
Google カスタム検索もあるけど、あえてGoogle AJAX Search APIを使ってサイト内検索を実現してみた。

phpで書くとおおよそ以下のようなコードになる。

<?php
$GOOGLE_API_KEY = "Your Api KEY";
$q = @$_REQUEST["q"];
?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Search</title>
  <link rel="stylesheet" type="text/css" charset="utf-8" href="http://www.google.com/uds/css/gsearch.css"/>
  <style type="text/css">.gsc-control { width: 100%; }</style>
</head>
<body>
  <div id="searchForm">Loading...</div>
  <table><tr><td>
    <div id="searchContent"><div id="searchResults">Loading...</div></div>
  </td></tr></table>
  <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=<?php echo $GOOGLE_API_KEY ?>" type="text/javascript"></script>
  <script language="Javascript" type="text/javascript">
//<![CDATA[
function initSearchControl() {
  var config = {
    label: 'kwLabs',
    siteRestriction: 'labs.makotokw.com',
    keyword: '<?php echo htmlspecialchars($q) ?>',
    applySearchFormEl: 'searchForm',
    applySearchResultsEl: 'searchResults'
  }
  var sc = new GSearchControl();
  var drawOptions = new GdrawOptions();
  drawOptions.setSearchFormRoot(document.getElementById(config.applySearchFormEl));
  var wsopt = new GsearcherOptions();
  wsopt.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
  var gs = new GwebSearch();
  gs.setUserDefinedLabel(config.label);
  gs.setSiteRestriction(config.siteRestriction);
  sc.addSearcher(gs,wsopt);
  sc.draw(document.getElementById(config.applySearchResultsEl), drawOptions);
  sc.execute(config.keyword);
}
GSearch.setOnLoadCallback(initSearchControl);
//]]>
</script>
</body>
</html>

たぶん、GwebSearchを使えば普通に検索だけできると思う。が、Formや検索結果の表示などの機能もAPIで用意されていてここではGSearchControlを使ってみた。

“q”パラメータを受けてそのままjavascriptでGSearchControl.executeを呼び出すことで、formからのPOST(GET)にも対応できる。

PHPの$GOOGLE_API_KEYのところと、javascrptのvar configの中を少し変えれば他のサイトでも流用できると思われる。実際PHPではたいしたことはやってないので他の言語の移植も簡単なはず。

Markdown with by ❤ wp-gfm