Blogger in beta に検索ウィジェット

Blogger in beta に、ブログ内検索用のウィジェットが登場した。

• Official Google Blog: Search your blog world
• Blogger in Draft: New feature: Search Box
• Hit Okano's Blog: Search This Blog (日本語の解説)
• クリボウの Blogger Tips: Blogger in draft に検索ウィジェット「Search Box」登場

検索ウィジェットのデザインはシンプルなもの。検索用ボックスと「検索」ボタンの二つだけ。

例えば、「マンガ」といふキーワードを入れて「検索」ボタンを押してみませう。

検索結果は、ブログの記事部分の上に挿入される。表示されるのは、記事タイトルと投稿日、記事の概要と URL。記事タイトルをクリックすると、別ウィンドウでページが開く。検索結果の右上にあるペケ (×) を押すと、検索結果をクリアできる。

この検索用ウィジェットの面白いところは、「ブログ内検索」だけにおさまらないところ。検索結果の上に付いてるタブで、複数のサイトの検索結果を表示する。具体的には、こう。

This Blog

ブログ内検索 (デフォールト)

Linked From Here

検索範囲を、ブログ内だけでなく、(ブログの中の) 記事からリンクを張っているサイトにまで広げる

Useful Sites

検索範囲を、Blogger のリンクリスト・ウィジェットでリンクを張ってるサイトに設定する。タブ名は、リンクリストのタイトルが使われる (スクリーン・ショットでは、「Useful Sites」というリンクリストを作っていた)

The Web

Google ウェブ検索

ブログ内検索及び「Linked from here」検索には、Google Blog Search が使われている。

リンクリスト検索については、クリボウさんの目の付け所が面白い。

リンクリストウィジェットに登録したサイトから探せるというのは、簡単に カスタムサーチ が作れる感じで、面白いですね。

クリボウの Blogger Tips: Blogger in draft に検索ウィジェット「Search Box」登場 より引用

「ウェブ検索」は、ページ内検索で目的のページが見付からなかった時に、スムーズに検索範囲を広げるのに役に立つ。せっかくブログ・サービスに付けてる検索なんだから、「Google Blog Search」の検索結果もあればいいと思うけどね。

なお、ぼくの環境だと「Linked From Here」と「リンクリスト検索」が正常に動かない。「This Custom Search Engine is loading. Try again in a few seconds.」というメッセージだけが表示される。これもまた、in draft quality かな?

Navbar のブログ内検索との違い

Blogger には、デフォールトでブログ内検索が付いている。ブログの一番上、Navbar にある検索ボックスがそれ。こちらの検索で使われているのも、Google Blog Search。なので、検索精度に Nabvar 版と検索ウィジェット版に違いはない (はず)。

では、わざわざ検索ウィジェットを付ける必要はあるのか?

もちろん、ある! 一番の理由はスピード。

Nabvar を使って検索をすると、検索結果は別ページに表示される。ページが表示されるまで、ユーザーは一寸待つ必要がある。一方、検索ウィジェットは Google AJAX Search と同じ技術を使っている。だから検索結果は、ページ遷移することなく表示される。つまり、検索結果が表示されるまでのタイムラグが圧倒的に小さい。

特に適切な検索キーワードが浮かばなくて、何度も検索キーワードを変えて検索を試みる場合、検索結果が表示されるまでの時間の短さは有難い。検索語を打ち間違えた場合なんかもさう。同じ長所は、Google AJAX Search にも言える。

Google AJAX Search との違い

Google は、Blog やウェブページに AJAX な検索ボックスを提供している。それが、Google AJAX Search。いわば、検索ウィジェットの汎用版のやうなもの。詳細及び Blogger への導入方法は過去記事をどうぞ。

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

検索ウィジェットの長所は、何といっても導入のしやすさ、設定のしやすさ。他のウィジェットを付けるのと同じやうに、Blogger のテンプレート編集から導入できる。設定も難しいことは要求しない。

一方、Google AJAX Search の長所はその柔軟さ。ブログ内検索とウェブ検索を同時に行なうことはもちろん、ブログ検索や地図検索、ビデオ検索なんかとも同時に検索することが出来る。また、このやうな複数の検索エンジンをメタ検索した場合、各々の検索エンジンの一番最初の検索結果を表示することができる。何気にこれは便利。

Google AJAX Search は clmemo@aka に、検索ウィジェットは life@aka に導入しているので、是非違いを比べてみて欲しい。

• clmemo@aka
• life@aka

導入方法

Blogger in Draft の管理画面に入り、「テンプレート > ページ要素」から「ページ要素を追加」をクリック。「検索ボックス」を選ぶ。

設定は、「タイトル検索」の他、表示するタブの種類をチェックボックスから選ぶだけ。

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 を使うには、以下のものが必要になる。

1. Google アカウント
2. テンプレートで JavaScript を編集できるブログ・サービス
3. 300px のサイドバー (Google AJAX Search の横幅は最低 300px は必要っぽい)
4. 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 については、次のブログも参考になる。

• Google AJAX Search API Blog
• AJAX Search API Playground