(２ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

2014/02/19 2014/11/22

Google™カスタム検索エンジン(CSE)のデザインを行う際には、
様々なレイアウトを選択し、検索結果を表示するように選択することができます。

ここでは「２ページ」レイアウトの実際の動作を確認できるように例示しておきます。
また導入方法についてもご紹介しておきます。

２ページ

検索ボックスと検索結果を同じウィンドウ内の別々のページに表示します。

実際に「２ページ」の表示の確認は以下の投稿でご紹介しています。
CSE単独設置検証(CASE2-0) – ２ページ

表示の例

「２ページ」表示では検索した結果が検索フィールドを設置したページとは
別のサイトに結果を表示する表示方法です。

この表示方法では複数のWordPressなどのCMS(Content Management System)などが、
独自に持っているサイト内検索の機能を利用して、
検索結果の表示をCMSのコンテンツ内に統合することができます。

検索フィールドに対してキーワードを入力し検索を実行します。

レイアウト「２ページ」検索ボックス

検索結果が指定したURLのサイトへクエリパラメータで渡され表示されます。

レイアウト「２ページ」検索結果表示

※URLの指定方法とクエリパラメータの設定は後述します。

「２ページ」スクリプト例

（注意）
このタイプを選択した場合には、コードの取得画面で２つのコードを取得する流れになります。
また、検索結果を表示するURLおよびクエリパラメータの設定を行う必要があります。

※検索結果を表示するURLを指定しない場合には、
Googleでホストされる検索結果ページが開きます。

コードを取得する際に最初に検索ボックスのコードが表示されます。

検索ボックスコード

２ページ・検索ボックスコード

２ページ検索ボックススクリプト例

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

(function() {

var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchbox-only></gcse:searchbox-only>

検索結果コード

検索ボックスのコード表示画面から
[次へ：検索結果コードの取得]をクリックすると検索結果コードが表示されます。
またこのタイプでは[検索結果の詳細]ボタンが上部に表示されています。

２ページ・検索結果コード

２ページ結果コードスクリプト例

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

(function() {

var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:searchresults-only></gcse:searchresults-only>

[検索結果の詳細]ボタンをクリックすると検索エンジンを表示するサイトのURLと
URLに埋め込まれるクエリパラメータを指定するフィールドが表示されます。

２ページ・検索結果の詳細

検索エンジンを表示するサイトのURLを指定

ここに指定するURLは検索結果を表示するサイトのURLを指定することで、
指定したサイトでサイト内検索の結果を表示します。

これはWordPress標準のサイト内検索ウィジェットを設置した際に表示されるURLのように、
URLにクエリパラメータを含む形で検索要求を行います。

WordPressで利用されているクエリパラメータは「s」が利用されています。

独自サイト内検索クエリの確認

当サイト(http://algorhythnn.jp/blg/)のWordPress標準のサイト内検索ウィジェットは、
サイドバーの下部に設置していますが、
実際に検索を行うと、以下のようなsearch.phpによる検索結果表示を行っています。

WordPress検索動作

URLとクエリパラメータの設定

先ほどの[検索結果の詳細]ボタンをクリックし、
URLを当サイト(http://algorhythnn.jp/blg/)に設定します。
またクエリパラメータをWordPress標準の「s」として保存します。

２ページ・検索結果の詳細設定変更

作成したカスタム検索エンジンを別のサイトに表示し、検索を行います。
※ここでは「検索結果コード」はまだサイトに設定していません。

カスタム検索結果・２ページのボックスコード設置

実際に検索を行うと、指定したURLのサイトにて検索が行われ結果が表示されます。

指定URLによる結果表示

検索結果コードの指定

検索結果コードを設定した場合は以下のように表示されます。
URLに指定した当サイト(http://algorhythnn.jp/blg/)のサイドバーに「検索結果コード」を設定します。

カスタム検索結果・２ページの結果コード設置

先ほど同様に検索ボックスを設置した別のサイトにて検索を行うと、
当サイト(http://algorhythnn.jp/blg/)のサイドバーに対して、
カスタム検索エンジンによる検索結果が表示されます。

２ページ・検索結果

尚、今回はsearch.phpの変更を行いませんでしたが、
検索結果を表示するテンプレートを変更し「検索結果コード」に置き換えることで、
サイドバー以外の場所にカスタム検索エンジンの結果を表示させることもできます。

※運用中サイトの為、ここで例示はできませんが、以下のようなイメージです。
（レイアウト：２列のキャプチャイメージです）

カスタム検索エンジン・２列

このようにして、検索フィールドを設置するサイトと、
検索対象・検索結果表示を行うサイトを別に指定してカスタム検索エンジンを利用することができます。

さいごに

カスタム検索エンジンはこのデフォルト設定で設置されていることが多いように思いますが、
様々なレイアウトを選択して設置することができますので、
デフォルトにこだわらず自身のサイトにあったレイアウトを選択されるといいでしょう。

No	レイアウト	動作例
1	オーバーレイ	(オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2	２ページ	(２ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3	全幅	(全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4	２列	(２列)Google™サイト内検索のレイアウト導入方法と実際動作
5	コンパクト	(コンパクト)Google™サイト内検索のレイアウト導入方法と実際動作
6	結果のみ	(結果のみ)Google™サイト内検索のレイアウト導入方法と実際動作
7	Goolgeがホスト	(Googleがホスト)Google™サイト内検索のレイアウト導入方法と実際動作

カスタム検索エンジンのデザイン設定については以下で戻れます。

Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定

参考

Custom Search Element Control API – Custom Search — Google Developers#layout

Two-page

Simple

Multiple search boxes and results sections

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。