別々のURLを対象としたGoogleカスタム検索を1ページ内に複数設置することに関して:メモ

調べて知ったことをメモとして。調べ方が悪いのか日本語で調べてもあまり情報がでてこなかったので、英語圏のサイトから得た情報を記事の形で残したいと思います。

テーマは、Googleカスタム検索を1ページに2つや3つなど複数つけ、それぞれの検索窓が別々のURLを対象に検索できるようにすることに関してです。

前提と実現したいこと

前提と実現したいことは以下の通り。

• Googleカスタム検索(V2?)を使用
• 「デザイン」は「オーバーレイ」
• 1ページに2つ以上の検索窓を設置する
• それぞれ別のサイトのURLを入れて検索可能にする(例:google.comで検索できる検索窓と、yahoo.comで検索できる検索窓の2つを1ページ内に設置する)

少々ややこしいですが、検索対象のURLが同じなら複数でも簡単に設置は可能であり、検索対象URLが違う場合には問題がおきて複数設置できない、という状態になってしまいます。

具体的には、複数設置してコードを書き換えるなどで検索対象URLを変えても、複数設置したその全ての検索窓が同じURLを対象に検索する状態になります。
目指しているのは検索窓毎に別URLを検索することなので、これでは目的を達成していません。

結論

とりあえず調べた範囲の結論です。

• 検索対象URLが違う場合、現在のGoogleカスタム検索では複数設置が実現できない
• 以前のV1ならできた（らしい)
• 「絞り込み」を使えばそれらしき動作と見映えにはできる

以前のV１に関しては以下のページなどに方法が記載されています。

• search box disappears when I use two different custom search in one page!

基本的には、コードを書き変えてCustom Search Element Control API に送る値を変え、gnameの指定で検索窓と検索結果を紐づけて必要数設置し、それを利用して別々の検索結果を表示させる、という方法のようです。

この調査過程で「絞り込み」を使えばそれらしき動作と見映えにはできることまではわかったので、その件を次項に記載します。

絞り込みを使って複数のGoogleカスタム検索ができているように見せる方法

内容は以下の３ページを見れば概ね把握できるかと思います。

1. Multiple GCSE’s on page at one time.
2. Use Refinements to narrow the scope of search
3. Two different custom search engines on the same page

コード自体は1だけで良いのですが、それを可能にするためには２や3という事前準備が必要になる、という感じです。
詳細は上記のページで確認いただきたいですが、以下ではスクリーンショットで一応簡単に説明します。

まず、Googleカスタム検索の「検索機能」から「絞り込み」タブを選び、任意の名称でラベルを作成します。

続いて、「設定」の「基本」タブ（最初から開いているはずです)の「検索するサイト」の箇所に必要なURLを記載し、先ほどのラベルをそれぞれに設定して紐づけます。

<script>
  (function() {
  //以下のcxに各自のidを設定
  var cx = 'your-cse-id-here';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
  })();
</script>

<!--以下を検索窓を設置したい場所に記述。defaultToRefinementの値にラベルの１つを設定-->
<gcse:search defaultToRefinement="site1"></gcse:search>

<!--以下を検索窓を設置したい場所に記述。defaultToRefinementの値にラベルの１つを設定-->
<gcse:search defaultToRefinement="site2"></gcse:search>

後は1に書かれているコードを上記のように必要箇所修正して、<gcse:search>のタグを任意の場所に設置します。

動作的には「絞り込みで設定したタブの内のどれを初期状態で開いておくかを任意で決めている」というだけなのですが、この状態でタブを以下のようなCSSで消せばそれっぽく見えるというわけです。

/* 消す手がかりとなるクラスやIDとその変更方法は要確認 */
.gsc-tabsArea {
  display: none !important;
}

結び

諸事情で本番実装には至っていないため細かい動作確認をしていません。
そのため何らかの問題がでる可能性もありますから、使用される場合は自己責任でお願いします。