Google AJAX Search APIを導入してみました。

へぇ～、こんな検索機能があるんだぁと思い、調子に乗って、自分のMovableTypeにも実装してみました。右上にある検索フォームです。使ってみてください。苦戦するだろうと思っていたが、意外と簡単にできました。

ポイントだけ。手順を簡単に。
1)まず、Google AJAX Search APIにて、APIを取得します。

2)headタグ内にソースを追加。

<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのAPI Key" type="text/javascript"></script>
  <script type="text/javascript">
    var coreSearch;

    function SolutionLoad() {
	var controlRoot = document.getElementById("searchControl");

    // create the search control
    coreSearch = new GSearchControl();
    coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
    coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

    // prep for decoupled search form
    var searchFormElement = document.getElementById("searchform");
    var drawOptions = new GdrawOptions();
    drawOptions.setSearchFormRoot(searchFormElement);
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

    // populate - web, this blog, all blogs
    var searcher = new GblogSearch();
    searcher.setSiteRestriction("http://あなたのサイトアドレス");
    searcher.setUserDefinedLabel("あなたのサイト名");
    coreSearch.addSearcher(searcher);

    searcher = new GwebSearch();
    searcher.setUserDefinedLabel("Google");
    coreSearch.addSearcher(searcher);
    // option
	
    // option
    coreSearch.draw(controlRoot, drawOptions);

    }

    function doCoreSearch(q) {
      coreSearch.execute(q);
    }

    registerLoadHandler(SolutionLoad);

    function registerLoadHandler(handler) {
      var node = window;
      if (node.addEventListener) {
        node.addEventListener("load", handler, false);
      } else if (node.attachEvent) {
        node.attachEvent("onload", handler);
      } else {
        node['onload'] = handler;
      }
      return true;
    }
  </script>

3)フォームを設置したいところに以下のソースを記述。

<div id="searchform">Loading...</div>

4)検索結果を表示したいところに以下のソースを記述。

<div id="searchControl">Loading...</div>

5)CSSで見た目を修正。

基本的には上記方法で実装可能なはずです。やりながら気づいたことは2)のsearcher = new GblogSearch(); ってなってるのはGoogleのブログ検索内での結果を表示。searcher = new GwebSearch();にすると一般のウェブ検索結果となります。

参考サイト：Movable TypeにGoogle AJAX Search APIを利用した検索機能を実装