DSAS開発者の部屋

●検索結果の横幅をいじる

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 を参照して指定しています．これは件の iframe に id も class も指定されていなかったためです．親の 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 も指定していますが，これは無くても問題ありません．)