clmemo@aka: Google AJAX Search でブログ内検索

Blogger Beta になってから、ナビゲーション・バーのブログ検索 (「SEARCH THIS BLOG」とあるやつね) が使いものにならなくなった。英語はいいんだけど、日本語の検索が全く通らない。仕方がないので、Blog Search の検索ボックスを、サイドバーに自前で付けようと考えたのだけど、せっかく付けるのなら最近 1.0 がリリースされたばかりの Google AJAX Search を付けてみようと思いたった。

Google AJAX Search API

Google AJAX Search は、ウェブサイトに検索結果を AJAX に表示するツール。JavaScript をちょこちょこ書くだけで、Google ウェブ検索はもとより、Blog 検索、ニュース検索、Google Video、Google Maps などと連携した検索結果を表示できる。

検索結果の表示が素早いことと、ブログから離れずに検索できるのがメリット。

論より証拠。Blog 検索とウェブ検索を、当ブログのサイドバー上端に付けたのでお試しあれ。

Google AJAX Search を取り付ける

Google AJAX Search のインストール方法を、今回ぼくがやった手順をもとに説明しませう。

Google AJAX Search を使うには、以下のものが必要になる。

Google アカウント
テンプレートで JavaScript を編集できるブログ・サービス
300px のサイドバー (Google AJAX Search の横幅は最低 300px は必要っぽい)
Google AJAX Search のバージョン・アップに追随する覚悟 (後方互換性は考慮されないとある)

全て揃っていれば、まず API key を手に入れやう。API key は、サイトごとに割り当てられる。

Google AJAX Search API - Sign Up

上記サイトに行き、利用条件を読む。OK なら、「I have read and agree with the terms and conditions」にチェックを入れ、「My web site URL:」に貴方のブログの URL を入力。「Generate API Key」ボタンを押す。サイト URL は、ぼくの場合「http://at-aka.blogspot.com」と入力した。

API キー生成ボタンを押すと、86 文字の API キーと簡単なサンプル・コードが表示される。サンプル・コードの中には、既に貴方の API キーが埋め込まれている。こちらも参考の為に、保存しとくとよいでせう。

次は、テンプレートの編集。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&amp;v=1.0&amp;key=貴方のAPIキー" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function OnLoad() {
  // Create a search control
  var searchControl = new GSearchControl();

  // Add in a full set of searchers
  var blogSearch = new GblogSearch();
  searchControl.addSearcher(blogSearch);
  searchControl.addSearcher(new GwebSearch());

  // BlogSearch
  blogSearch.setSiteRestriction("貴方のブログ URL");

  // Tell the searcher to draw itself and tell it where to attach
  searchControl.draw(document.getElementById("searchcontrol"));
  }
//]]>
</script>

そして、body 要素の編集。開きタグを次のように編集する。

<body onload="OnLoad()">

最後に、検索ボックスを表示させたい場所に、次のコードを挿入する。

<div id="searchcontrol"></div>

これでお終い。

一行分だけ説明。blogSearch.setSiteRestriction("http://at-aka.blogspot.com/"); というコードは、blog 検索の範囲を当ブログ (http://at-aka.blogspot.com/) に制限している。これは、当初の目的のブログ内検索を実現するため。ここの部分は、各々のブログ URL に併せて変えられたし。

Blogger Beta の場合

Blogger Beta の場合、body 要素に onload を指定すると、何故か navbar が消えてしまう。従って、上のやり方は少々よろしくない。従って、ぼくは次のようにした。

まず、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&amp;v=1.0&amp;key=貴方のAPIキー" type="text/javascript"></script>

次に、Templete の Page Elements の編集から、サイドバー部分に「HTML/JavaScript」ウィジェットを追加する。そして中身には次のように書く。

<div id="searchcontrol"></div>
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var blogSearch = new GblogSearch();
searchControl.addSearcher(blogSearch);
searchControl.addSearcher(new GwebSearch());

// BlogSearch (○○は自分のサイト用に書き換える)
blogSearch.setSiteRestriction("http://○○.blogspot.com/");

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

以上。

Google AJAX Search については、次のブログも参考になる。

clmemo@aka

Pages

2006-10-12

Google AJAX Search でブログ内検索

Google AJAX Search を取り付ける

Blogger Beta の場合

No comments:

Post a Comment