Custom Search Element V2

導入

V1との比較

Custom Search Element V2は、V1と比較して、

  • 文法が簡単で、JavaScriptの知識を必要としない。
  • スタイルの設定をカスタム検索の管理ページで行える。
  • すべてのJavaScriptが非同期で読み込まれる。

などの違いがあります。Custom Search Element Control API | Google Developers

ただし2012年10月現在、V1のすべての機能が実装されているわけではなく、V1の代替となるものではありません。

Custom Search Element V2の種類

Custom Search Element V2には、パラメータの設定方法の違いにより次の2種類があります。

種類 パラメータの設定方法
Custom Search elements HTMLの属性
Custom Search Element Control API (V2) JavaScript

Custom Search Element Control APIは、Custom Search elementsをJavaScriptから操作するためのAPIです。

Custom Search elements

Custom Search elementsを表示する位置に、gcse名前空間の要素 (<gcse:xx>) を記述します。

<gcse:search
    queryParameterName="query"
    enableHistory="true"
    enableAutoComplete="true">
</gcse:search>

そしてスクリプトを、カスタム検索エンジンIDを指定して読み込みます。

<script type="text/javascript">
var cx = '123:456'; // カスタム検索エンジンID

var gcse = document.createElement( 'script' );
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = ( document.location.protocol == 'https' ? 'https:' : 'http:' )
    + '//cse.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName( 'script' )[ 0 ];
s.parentNode.insertBefore( gcse, s );
</script>

要素の種類

検索ボックスの種類は、埋め込むタグの要素名によって選択できます。

種類 要素 説明
標準 <gcse:search> 検索ボックスと検索結果を、同じ<div>に表示する。
2列 <gcse:searchbox> A two-column layout with search results on one side and a search box on the other. If you plan to insert multiple elements in two-column mode in your webpage, you can use the gname attribute to pair a search box with a block of search results.
<gcse:searchresults>
検索ボックスのみ <gcse:searchbox-only> 独立した検索ボックス
検索結果のみ <gcse:searchresults-only> 独立した検索結果
Custom Search elements

パラメータの設定

基本的な設定はCustom Search control panelで行えますが、個別にカスタマイズするときには<gcse:xx>要素の属性として指定します。

種類 属性 型 説明 適用できる要素
General gname String CSE要素の名前 すべて
autoSearchOnLoad Boolean   すべて
enableHistory Boolean  
  • searchbox
  • searchbox-only
queryParameterName String   すべて
resultsUrl URL   searchbox-only
newWindow Boolean   searchbox-only
Autocomplete enableAutoComplete Boolean   すべて
autoCompleteMatchType String  
  • searchbox
  • searchbox-only
autoCompleteMaxCompletions Integer  
  • searchbox
  • searchbox-only
autoCompleteMaxPromotions Integer  
  • searchbox
  • searchbox-only
autoCompleteValidLanguages String  
  • searchbox
  • searchbox-only
Refinements defaultToRefinement String   すべて
refinementStyle String  
  • searchresults
  • searchresults-only
Image search enableImageSearch Boolean  
  • searchresults
  • searchresults-only
defaultToImageSearch Boolean   すべて
imageSearchResultSetSize Integer, String   すべて
imageSearchLayout String  
  • searchresults
  • searchresults-only
Web search disableWebSearch Boolean  
  • searchresults
  • searchresults-only
webSearchResultSetSize Integer, String   すべて
webSearchSafesearch String   すべて
Search results enableOrderBy Boolean   すべて
linkTarget String  
  • searchresults
  • searchresults-only
noResultsString String  
  • searchresults
  • searchresults-only
resultSetSize Integer, String   すべて
safeSearch String   すべて
Ads adchannel String   すべて
adclient String   すべて
adtest String   すべて
Google Analytics gaCategoryParameter String  
  • searchbox
  • searchbox-only
gaQueryParameter String  
  • searchbox
  • searchbox-only
Customizing Custom Search elements

参考

Custom Search Element Control API (V2)

JavaScriptでパラメータを指定する場合には、Custom Search elementsの代わりにCustom Search Element Control APIを使用します。

まずはCustom Search elementsを埋め込む要素を用意します。

<div id="test"></div>

スクリプト読み込み後に実行する初期化関数を、window.__gcseオブジェクトのcallbackプロパティに設定します。そしてCustom Search elementsのパラメータを、google.search.cse.elementオブジェクトのrender()メソッドから設定します。

<script type="text/javascript">
var InitCSE = function()
{
    var componentConfig = {
        div: 'test',
        tag: 'search',
        attributes: {
                queryParameterName: 'query',
                enableHistory: true,
                enableAutoComplete: true
            }
        };
    google.search.cse.element.render( componentConfig );
}

window.__gcse = {
    parsetags: 'explicit',
    callback: function()
    {
        if( document.readyState == 'complete' )
        {
            InitCSE();
        }
        else
        {
            google.setOnLoadCallback( function () { InitCSE(); }, true );
        }
    } };
</script>

以下のスクリプトの読み込みは処理は、Custom Search elementsと同一です。

<script type="text/javascript">
var cx = '123:456'; // カスタム検索エンジンID

var gcse = document.createElement( 'script' );
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = ( document.location.protocol == 'https' ? 'https:' : 'http:' )
    + '//cse.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName( 'script' )[ 0 ];
s.parentNode.insertBefore( gcse, s );
</script>

コールバック (Callbacks)

検索の開始や完了時に処理できます。コールバック - Programmable Search Element Control API  |  Programmable Search Engine  |  Google for Developers

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        starting: function (gname, query) {
            // 検索結果を要求した        
        },
        ready: function (gname, query, promos, results, div) {
            // 検索結果の準備が完了した
        },
        rendered: function (gname, query, promoElts, resultElts) {
            // 検索結果がレンダリングされる
        }
    },
};

検索の絞り込み (Refining Searches)

検索の絞り込み  |  Programmable Search Engine  |  Google for Developers

参考

参考

関連ページ