Ogawa::Memoranda

Google AJAX Search APIってのがあったんだな。まったくスルーしていた。あまり使われていないのかしら。

Movable Type 3.3のWidget Managerから簡単にプラグインする方法を少し考えてみた。私は3.3に移行していないし、Widget Managerを使う予定もないので(MTIncludeがあるから不必要ではないか、と)、例によって「試してない・やればできるにきまってる」メソッドである。

まず、Google AJAX Search API - Sign UpでサインアップしてAPI Keyを取得する。取得したAPI Keyはちらしの裏にでもメモしておくこと。

次にMovable Type 3.3のテンプレート・モジュールを作る。テンプレート名は「Widget: Google AJAX Search」とし、以下のコードを保存する。冒頭のYour API KeyのところにはさっきのAPI Keyを転記しておくこと。

<MTSetVar name="GoogleAJAXSearchAPIKey" value="Your API Key">
<div class="module-archives module">
  <h2 class="module-header">Google AJAX Search</h2>
  <div class="module-content">
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=<MTGetVar name="GoogleAJAXSearchAPIKey">" type="text/javascript"></script>
    <style type="text/css">
      @import "http://www.google.com/uds/css/gsearch.css";
      .gsc-control { width: auto; }
    </style>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    var gsc_onload = function() {
      var searchControl = new GSearchControl();
      var siteSearch = new GwebSearch();
      siteSearch.setUserDefinedLabel("<$MTBlogHost encode_js="1"$>");
      siteSearch.setUserDefinedClassSuffix("siteSearch");
      siteSearch.setSiteRestriction("<$MTBlogHost encode_js="1"$>");
      searchControl.addSearcher(siteSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.draw(document.getElementById("google-ajax-search"));
    };
    if (window.addEventListener) {
      window.addEventListener('load', gsc_onload, false);
    } else if (window.attachEvent) {
      window.attachEvent('onload', gsc_onload);
    }
    //]]>
    </script>
    <div id="google-ajax-search"></div>
  </div>
</div>

あとはWidget Managerの管理画面から適当なWidget Setに「Google AJAX Search」Widgetをdrag'n dropして保存した後、再構築すればよい。

動作風景。

見ての通り、サイト内検索結果とWeb検索結果が表示されるようにしてある。ローカル検索・ビデオ検索なども追加可能なので、カスタマイズしたい場合にはGoogle AJAX Search API Documentationを参照のこと。