2006年10月31日

Google Custom Search Engine を設置してみました

はてなブックマークに登録

先日,Google Custom Search Engine が公開されました.ちょっとみてみたところなかなか面白そうだったので,DSAS blog にも設置してみました.
Google Custom Search Engine (以下 CSE) の特徴として,特定のサイトのみを検索できる点と,検索結果を好きなページに組み込める点をうたっています.ただ,この DSAS blog に組み込もうとしたところ,少々苦労しました.まだ英語版の,しかも Beta サービスなためだと思われます,以下,DSAS blog に組み込むために弄った部分を上げてみます.ただし,ここに上げた物はこの記事執筆時点の物です.前述のように Beta サービスですので,今後状況は変わると思います.


●検索結果の横幅をいじる
CSE の検索結果は,2種類の表示方法があります.一つは検索結果を Google がホストするページ上で表示する形で,もう一つは自分がコントロールするページ上で表示する形です.後者の場合,検索結果は iframe の形で差し込まれます.DSAS blog では,基本的に後者を使ってます.
この iframe は CSE が提供する Javascript で描画されるのですが,その際に iframe の横幅や高さなどのパラメータをある程度ユーザがページ内で指定できるようにコードが書かれています.けれども,この横幅と高さの下限値が設定されていて,これを下回る設定は無視されてしまいます.今回は検索結果を DSAS blog のページに組み込みたかった(検索結果のページにも左のメニューが表示されて欲しかった)のですが,それには検索結果を表示するためのページを記事にしてしまうのが一番簡単な方法です.しかしこの記事本文を表示する領域は CSS で固定されていて,これを今から変えたのではほとんどデザインを作る直さなければなりません.ということで,この iframe の横幅の設定は,用意された Javascript を通じてではなくて,CSS を使って指定することにしました.次のようなものです.
div.googleSiF iframe {
  width: 510px;
  margin: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
目的の iframe を CSS で指定するために,その親要素の div を参照して指定しています.これは件の iframeidclass も指定されていなかったためです.親の div 要素は CSE が出力するテンプレートに含まれていますが,これに googleSiF という class は設定されていません.独自に指定しました.この div には id が設定されているのですが,id の中に : が含まれているために,CSS で id を参照できなかったので,回避策として設定しています.

●日本語の検索結果が化ける?
検索クエリの入力フォームが設置されるページの文字コード設定が UTF-8 以外の場合,日本語のキーワードの検索ができません.原因を追ってみたところ,検索結果を表示する際に動作する CSE の Javascript 内で,検索フォームから渡されたクエリ式を decodeURIComponent() 関数に渡しているところで落ちていました.データの流れを図にしてみると,次のようになります.
┏━検索もとページ━━┓ ┏━━━検索結果ページ━━━┓
┃          ┃ ┃             ┃
┃ 検索クエリ ==(URI escape)==> decodeURIComonent() ┃
┃                    ┃  ┃      ↓      ┃
┃          ┃ ┃    検索フォーム   ┃
┗━━━━━━━━━━┛ ┗━━━━━━━━━━━━━┛
検索もとページから検索結果のページに検索クエリを渡すには,URI エスケープしなければなりません.これはブラウザが自動的にしますが,その際検索クエリの文字コードは検索もとページの文字コードと同一と見なされ,その文字コードに従って URI エスケープされます.検索結果のページではこの URI エスケープされたクエリを,エスケープを解いた上で検索フォームに表示しようとするのですが,CSE の Javascript がエスケープを解くために使っている decodeURIComponent() 関数は,元の文字列が UTF-8 であることを仮定しているために,EUC-JP で記述された DSAS blog から渡された検索クエリを食わすと例外が発生していました.
この対策の正攻法は,検索元のページの文字コードを UTF-8 にすることですが,これはシステム側で設定されている物ですから変更できません.というわけで,ちょっと力わざな方法で解決しました.検索もとページから検索結果のページに遷移するときに,入力された検索クエリを encodeURIComponent() を使ってエスケープした物を検索クエリとは別に検索結果のページに渡して,結果のページでこの別に渡されたクエリ文字列を本来のクエリ文字列と置き換えています.

●Javascript が動いてないと,検索結果が表示されない
これは,検索結果を表示するための iframe を Javascript で描画しているため当然です.Javascript が動作していない場合は,CSE の検索結果のもう一つ別の表示方法である,Google のサイト上での結果表示をするようにしています.この仕掛けは単純で,検索フォームの action パラメータを,HTML の記述上は Google のサイト上で表示する物にしておき,ページが表示された際に起動する Javascript 内で, 検索フォームの action パラメータを DSAS blog の検索結果のページに変更しているだけです.Javascript が動作しないブラウザではこのコードは実行されませんので,Javascript などで条件判断する必要はありません.
と,これだけだと日本語のキーワード検索の結果を CSE の Google のサイト上で表示させた場合に,やっぱりちょっと文字化けが発生してしまいます.これを回避するために,フォームの hidden パラメータに,ie=euc-jp を追加しています.これは検索クエリの入力文字コードが EUC-JP であることを明示するものです.(同時に oe=euc-jp も指定していますが,これは無くても問題ありません.)


klab_gijutsu2 at 18:26│Comments(0)TrackBack(1)

トラックバックURL

この記事へのトラックバック

1. Google custome search engine  [ shibata(hi) shokudou ]   2006年11月28日 01:28
DSAS開発者の部屋:Google Custom Search Engine を...

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
Blog内検索
このブログについて
DSASとは、KLab が構築し運用しているコンテンツサービス用のLinuxベースのインフラです。現在5ヶ所のデータセンタにて構築し、運用していますが、我々はDSASをより使いやすく、より安全に、そしてより省力で運用できることを目指して、日々改良に勤しんでいます。
このブログでは、そんな DSAS で使っている技術の紹介や、実験してみた結果の報告、トラブルに巻き込まれた時の経験談など、広く深く、色々な話題を織りまぜて紹介していきたいと思います。
最新コメント
最新トラックバック
Archives