【実は簡単】Googleカスタム検索を1ページ内に同時に2つ設置する方法

【実は簡単】Googleカスタム検索を1ページ内に同時に2つ設置する方法

サイト内検索を利用するのにGoogleカスタム検索は無料で使えて非常に便利なので仕事でもプライベートでも利用している人が多いと思います。

【参考リンク】

カスタム検索エンジン

「Googleカスタム検索を1ページに複数設置したい!」という要件が発生した場合、どうすればいいのか?
顧客からそんな要望が飛び出したので色々試行錯誤した結果、やり方を見つけたので実装方法と諸注意について書きます。

 

この記事の対象者

  • Googleカスタム検索を1ページに同時に2つ設置したいという方
  • Googleカスタム検索の特殊な使い方を知りたいという方

 

Googleカスタム検索コード

サイト内にGoogleから指定された以下のコードを埋め込むと動的にhtmlを生成して検索フォームを生成してくれるという優れもの。

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

検索フォームの設置が1つだけでいいのであれば、特に何も気にすることなくこのコードを設置したい箇所に追加するだけでOKなのですが、今回の要件では1ページに複数の検索フォームが必要なので一筋縄ではいきません。

 

v1とv2を共存させる

そこで実現方法として使えるのが、Googleカスタム検索の1つ前のバージョン(v1)のコードを流用することです。
v1とv2では動的に生成されるhtmlタグはほとんど同じなのですが、Googleサーバ内側での処理が異なっているらしく、v1のコードを利用することで2つのGoogleカスタム検索を1ページ内に同時に設置することが可能となります。

 

Googleカスタム検索v1の設置

Googleカスタム検索(v1)のコードを検索フォームを表示させたい場所に挿入します。
(※ちょっと長いので、phpファイル化しincludeするのが良いかもしれません)

<div id='cse' style='width: 100%;'>Loading</div>
<script src='https://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
    google.load('search', '1', {
        language: 'ja',
        style: google.loader.themes.V1_DEFAULT
    });
    google.setOnLoadCallback(function () {
        var customSearchOptions = {};
        var orderByOptions = {};
        orderByOptions['keys'] = [{
            label: 'Relevance',
            key: ''
        }, {
            label: 'Date',
            key: 'date'
        }];
        customSearchOptions['enableOrderBy'] = true;
        customSearchOptions['orderByOptions'] = orderByOptions;
        customSearchOptions['overlayResults'] = true;
        var customSearchControl = new google.search.CustomSearchControl('******************:************', customSearchOptions);
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        customSearchControl.draw('cse', options);
    }, true);
</script>

上記の” * “の箇所はGoogleから取得できる専用コードを設定してください。
このコードを追加することで、1ページに2つのGoogleカスタム検索の設置が出来ます。

 

設置後の問題点

Googleカスタム検索のv1とv2ではCSSのclass属性やid属性が微妙に異なっているため、デザインを変更する際にCSS修正量が2倍になります。設置した2つのGoogleカスタム検索のデザインをそれぞれ異なるものにしようとした場合のデザイン調整が非常に面倒です。

デザインの変更方法については、他のサイト様が非常に上手くまとめていたのでそちらを参照する方がいいです。

【参考リンク】

「Googleカスタム検索」のデザインをCSSレベルで変更するテクニック

 

ちなみに

知ってるよ!って人にはどうでもいい事だと思うのですが、なぜ2つ同時設置ができないのかについて最後に書いておきます。

Googleカスタム検索(v2)から提供されるコードは処理の根幹部分はGoogleのサーバ内のスクリプトを読み込んでいます。検索フォームの識別IDや検索フォームの変数名を自サイト内のjavascriptを変更した変えたとしてもGoogleサーバ内からは決められた名前で読み込もうとするのでどうやってもGoogleが提供するコードを改変して2つ使う。という手は使えないのです。

 

ついでに

Googleカスタム検索を表示させた時に「Googleカスタム検索」とテキストエリア内に表示されますよね。実は有料ライセンスを契約していない限りあの文字をCSSHackで削除することは規約違反となり最悪はGoogleアカウント停止に繋がるので、こればっかりはたとえ出来たとしてもやらないほうが良いでしょう。どうしてもやりたいならGoogleと契約しましょう。検索結果に表示される広告や検索フォームの文字も全て消えてくれます。

 

さいごに

実は今回紹介したやり方は、Google側がカスタム検索のv1を削除せず放置している隙を上手く(?)突いた技となっています。
Googleは利用者が世界中に居たとしても古いバージョンを情け容赦なく切り捨てる事があるのでこの方法も未来永劫出来る訳ではないです。
現時点では他に対応策がないので別の対応策がありましたらぜひともご教授願いたいです。

 

らいか
Googleの仕様はコロコロ変わるので、もしかするとそのうちもっと便利に使える日が来るかもしれない。っていうか早く来てほしい。
【実は簡単】Googleカスタム検索を1ページ内に同時に2つ設置する方法

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。