Custom Search Element V1

新しいバージョンのCustom Search Element V2があります。

ここで解説するGoogle Custom Search APIは、Googleカスタム検索のAPIです。よってGoogle Web Search APIとは趣旨の異なるものです。またCustom Search Elementは、Custom SearchにHTMLによる出力機能を持たせたものです。

Custom Searchとの比較
  HTMLの出力 使用制限
Custom Search × 1日のクエリは100回まで。これを越える場合は有料
Custom Search Element なし

CustomSearchControlオブジェクト

メソッド 説明
setResultSetSize 結果の数を設定する。指定値は、
  • 1~20の数値
  • google.search.Search.SMALL_RESULTSET … 1ページあたり4つ
  • google.search.Search.LARGE_RESULTSET … 1ページあたり8つ
  • google.search.Search.FILTERED_CSE_RESULTSET … 1ページあたり最大10で、10ページまで
のいずれか
setSearchStartingCallback 検索開始時に呼び出されるメソッドを設定する
setSearchCompleteCallback 検索完了時に呼び出されるメソッドを設定する
draw 検索フォームと検索結果を表示する
startHistoryManagement タブの変更や検索の実行を、ブラウザの履歴に記録するようにする
CustomSearchControl Object | Google Developers

コンストラクタ

google.search.CustomSearchControl(
    cseId,      // CSE ID (カスタム検索エンジンID)
    opt_options // 検索のオプション設定
    );

cseIdには、カスタム検索エンジンIDを指定します。

オプション設定

var options = {
    enableImageSearch: true,
    defaultToRefinement: 'LABEL_1'
    };
options[ google.search.CustomSearchControl.autoCompleteOptions ] = { matchType: 'any' };
options[ google.search.Search.RESTRICT_EXTENDED_ARGS ] = { lr: 'lang_ja', sort: 'date' };

var customSearchControl
    = new google.search.CustomSearchControl( id, options );

オプション名がプロパティで定義されているものは、連想配列の形式で指定する必要があります。

google.search.Search.RESTRICT_EXTENDED_ARGS
パラメータ 説明 指定可能な値のリスト
lr 言語 Language Collection Values
cr

Google Web検索は、

  • URLのトップレベルドメイン
  • サーバの位置

から国を判別している。 cr - XML API reference

Country Collection Values
gl 地方 Country Codes

setSearchStartingCallback

customSearchControl.setSearchStartingCallback(
    this,
    function( searchControl, searcher, query )
    {
        //
    } );

検索キーワードをGoogle Analyticsで記録するには、このハンドラでキーワードqueryを取得して、トラッキングコードをカスタマイズします。Google アナリティクスのサイト内検索の設定 - カスタム検索 ヘルプ

setSearchCompleteCallback

customSearchControl.setSearchCompleteCallback(
    this,
    function( searchControl, searcher )
    {
        //
    } );

startHistoryManagement (検索履歴)

検索履歴を有効にすると、タブの変更や検索の実行がブラウザの履歴に記録されるようになり、ブラウザの「戻る」や「進む」で検索履歴をたどれるようになります。ただしこの機能はIE6とIE7では利用できません。

// 先にコントロールを描画する
customSearchControl.draw( 'cse-search-form' );

var historyStarted = customSearchControl.startHistoryManagement(
    function()
    {
        // 必要ならば、ここで既定のクエリで検索を実行する
        // ここでの検索は履歴に記録されない
        customSearchControl.execute( defaultQuery );
    } );

if( historyStarted )
{
    // 履歴が有効ならば、検索結果のページから戻ったときには、その検索を実行した状態に確実に戻れるため
    // 検索結果を同一ウィンドウに表示するようにする (必ずしも同一ウィンドウに表示する必要はない)
    customSearchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF );
}

検索条件の設定

WebSearchおよびImageSearchオブジェクトにより、検索結果をカスタマイズできます。これらのオブジェクトはCustomSearchControlオブジェクトの2つのメソッド、

  • .getWebSearcher() … WebSearchオブジェクト (Web検索)
  • .getImageSearcher() … ImageSearchオブジェクト (画像検索)

により取得できます。

var webSearcher = customSearchControl.getWebSearcher();
webSearcher.setResultSetSize( google.search.Search.SMALL_RESULTSET );

検索結果の表示設定

作成したDrawOptionsオブジェクトをCustomSearchControl.draw()の引数に与えることで、コントロールに設定を適用させます。

var drawOptions = new google.search.DrawOptions();
drawOptions.setAutoComplete( true );
drawOptions.enableSearchboxOnly( '/search/' );

customSearchControl.draw( 'results', drawOptions );
メソッド 説明
setAutoComplete trueのとき、キーイベントでオートコンプリートが有効となる
enableSearchboxOnly 検索結果を新しいページで表示する
DrawOptions Object | Google Developers

enableSearchboxOnly

enableSearchboxOnly(
    resultUrlPrefix,    // 結果ページのURL
    opt_queryParamName, // クエリパラメータの名前
    opt_newWindow,      // trueのとき、結果ページを新しいウィンドウで開く
    opt_paramSeparator  // URLのパスとクエリの区切り文字
    )

※ 結果ページを新しいウィンドウで開くとき、ブラウザの設定によってはポップアップとしてブロックされることがあります。

Loading...
※ 結果ページを新しいウィンドウで開きます。

サンプルコード

<div id="cse-search-form">Loading</div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

  google.load( 'search', '1', { language : 'ja' } );
  google.setOnLoadCallback( function()
    {
      var cseId = 'partner-pub-00000:xxxxx';

      var customSearchControl
          = new google.search.CustomSearchControl( cseId );

      customSearchControl.draw( 'cse-search-form' );
    },
    true );

</script>
Loading...