本文へ移動

みやすい解析 × メールソナー　FAQ

みやすい解析　FAQ

一覧へ戻る

Googleカスタム検索によるサイト内検索機能の利用方法を教えてください

カテゴリ：みやすい解析の標準機能
Googleカスタム検索を利用してサイト内検索を実現しているサイトで、みやすい解析のサイト内検索機能を利用する方法を説明します。

みやすい解析のサイト内検索機能を使う場合、検索結果画面の、HTMLやJavaScriptにカスタマイズを行う必要があります。
 
みやすい解析では、URL上に表示されている検索語句を必要とするため、検索された際に、検索結果画面全体がリロードされ、検索されるたびにURL上に表示される検索語句が変化する必要があります。ここでは以下の方法による実装における、カスタマイズ方法をご紹介します。
 
 
Google Search Element V2をご利用の場合
Google Search Element V2をご利用の場合、JavaScriptではなく「gcse:」で始まる専用のタグにて構成されます。

 通常は、検索結果のページに対して、以下のような専用タグが設置され、そのタグ中に、検索ボックスと検索された結果が表示されます。
 

<div id="cse-search-form">
　　<gcse:search></gcse:search>
</div>

 
この内容を以下のように「<gcse:searchbox-only>」と「<gcse:searchresults-only>」というタグに分離します。
なお、「<gcse:searchbox-only>」タグは検索ボックスのみを、「<gcse:searchresults-only>」タグは検索結果のみを表示するタグです。
 

<div id="cse">
	<gcse:searchbox-only resultsUrl="検索結果ページへのURL"></gcse:searchbox-only>
	<gcse:searchresults-only resultSetSize="large"></gcse:searchresults-only>
</div>

 
このような変更を行うことで、みやすい解析でサイト内検索の結果を取得することができるようになります。
 
 



Google Search Element Control V2をご利用の場合
Google Search Element Control V2をご利用の場合、JavaScriptにて記述された内容で検索結果が表示されます。
 
通常は、以下のような記述になっています。
 
 


■JavaScript部分
 
(function(){
	var initCse = function(){
		google.search.cse.element.render({
			div: 'cse',	//検索ボックスと検索結果を表示するdivタグに対するid名
			tag: 'search',	//検索ボックスと検索結果を表示することを指示
			attributes: {
				queryParameterName: 'q',	//検索語句のGETパラメータ名
				enableAutoComplete: true
			}
		} );
	}
			
	window.__gcse = {
		parsetags: 'explicit',
		callback: function(){
			if( document.readyState == 'complete' ){
				initCse();
			}
			else{
				google.setOnLoadCallback( function(){ 
				initCse(); 
				}, true );
			}
		} 
	};
})();

 
 
■HTML部分
 
<div id="cse"></div>

 
これを以下のように、検索ボックス用のものと、検索結果用のものに分離したJavaScriptと、表示領域のdivタグを分離します。
 
 


■JavaScript部分
 
(function(){
	var initCse = function(){
		//
		//検索ボックスのみの表示
		//
		google.search.cse.element.render({
			div: 'cse-searchbox',	//検索ボックス用のdivタグに対するid名
			tag: 'searchbox-only',	//検索ボックスのみの表示を指定する
			attributes: {
				queryParameterName: 'q',	//検索語句のGETパラメータ名
				enableHistory: false,
				enableAutoComplete: true,
				resultsUrl: '検索結果ページのURL'	//再検索された場合に表示する検索結果ページのURL
			}
		} );
					
					
		//
		//検索結果のみの表示
		//
		google.search.cse.element.render( {
			div: 'cse-searchresults',	//検索結果用のdivタグに対するid名
			tag: 'searchresults-only',	//検索結果のみの表示を指定する。
			attributes: {
				queryParameterName: 'q'	//検索語句のGETパラメータ名
			}
		} );
	}
				
				
	window.__gcse = {
		parsetags: 'explicit',
		callback: function(){
			if( document.readyState == 'complete' ){
				initCse();
			}
			else{
				google.setOnLoadCallback( function(){ 
					initCse(); 
				}, true );
			}
		} 
	};
})();

 
 
■HTML部分
 
<!-- 検索ボックスを表示する領域 -->
<div id="cse-searchbox"></div>
			
<!-- 検索ボックスを表示する領域 -->
<div id="cse-searchresults"></div>
 

 このような変更を行うことで、みやすい解析でサイト内検索の結果を取得することができるようになります。

 
Google Search Element V1をご利用の場合
旧来のGoogle Search Element V1をご利用の場合、JavaScriptにて記述された内容で検索結果が表示されます。

通常は、以下のような記述になっています。
 
(function(){
	var SEARCH_WORD_PARAM_NAME  = 'q';	//検索語句のGETパラメータ名
	var CUSTOM_SEARCH_ENGINE_ID = 'カスタム検索エンジンのID';		//Googleカスタム検索エンジンのID
	var searchWord        = getQueryValue( SEARCH_WORD_PARAM_NAME );	//URLから検索語句を取得
				
				
	google.load( 'search', '1', {language: 'ja'} );
	google.setOnLoadCallback( function()
	{
		//
		//表示オプション指定
		//
		var drawOptions = new google.search.DrawOptions();
		drawOptions.setAutoComplete( true );
					
					
		//
		//コントロール制御
		//
		var customSearchControl = new google.search.CustomSearchControl( CUSTOM_SEARCH_ENGINE_ID );
		customSearchControl.draw( 'cse', drawOptions );
		customSearchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF );
		customSearchControl.setResultSetSize( google.search.Search.FILTERED_CSE_RESULTSET );
					
					
		//
		//検索実行
		//
		if( searchWord != '' ){
			customSearchControl.execute( searchWord );
		}
	}, true );
				
				
	/**
	 * URLのクエリ文字列から、指定したパラメータの値を取得する。
	 * 
	 * @param String  paramName  クエリ文字列内のパラメータ名
	 * @param Boolean isDecode   省略可能。省略時はtrueとなる。
	 *                           パラメータに対応した値をURLデコードする場合にはtrueを指定する。
	 * @return String  パラメータ名に対応する値を返す。
	 *                 パラメータ指定がない場合には空文字列を返す。
	 */
	function getQueryValue(paramName, isDecode)
	{
		isDecode = isDecode || true;
					
		var regExp = new RegExp( paramName + '\=([^\&]*)', 'i' );
		var result = window.location.search.match( regExp );
					
		return ( 
			result == null ? 
			'' : 
			( isDecode ? decodeURIComponent(result[1]) : result[1] )
		);
	}
})();
 
これを以下のように、setSearchStartingCallback()を用いて、検索実行前の処理を追記します。
 
そのコードの中では、検索結果ページの検索ボックスで検索された場合、現状のURLの中で検索語句を表すパラメータ部分を新しい検索語句で置換したもので、ページリロードを行うようにします。

(function(){
	var SEARCH_WORD_PARAM_NAME  = 'q';	//検索語句のGETパラメータ名
	var CUSTOM_SEARCH_ENGINE_ID = 'カスタム検索エンジンのID';		//Googleカスタム検索エンジンのID
	var searchWord              = getQueryValue( SEARCH_WORD_PARAM_NAME );	//URLから検索語句を取得
	var isReSearch              = false;	//検索結果ページでの再検索の検知用の変数
				
				
	google.load( 'search', '1', {language: 'ja'} );
	google.setOnLoadCallback( function()
	{
		//
		//表示オプション指定
		//
		var drawOptions = new google.search.DrawOptions();
		drawOptions.setAutoComplete( true );
					
					
		//
		//コントロール制御
		//
		var customSearchControl = new google.search.CustomSearchControl( CUSTOM_SEARCH_ENGINE_ID );
		customSearchControl.draw( 'cse', drawOptions );
		customSearchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF );
		customSearchControl.setResultSetSize( google.search.Search.FILTERED_CSE_RESULTSET );
					
		/** このようなコードを追加 **/
		customSearchControl.setSearchStartingCallback( this, function(control, searcher, query)
		{
			//前の画面で指定された検索語句にて結果表示する場合には、何もしない。
			if( !isReSearch ){
				isReSearch = true;
				return;
			}
						
			//この画面で入力された、新しい検索語句でページをリロードする。
			reloadCurrentPage( query );
		});
					
					
			//
			//検索実行
			//
			if( searchWord != '' ){
				customSearchControl.execute( searchWord );
			}
			isReSearch = true;	//検索結果ページでの再検索の検知用の変数にtrueを設定
		}, true );
				
				
		/**
		 * URLのクエリ文字列から、指定したパラメータの値を取得する。
		 * 
		 * @param String  paramName  クエリ文字列内のパラメータ名
		 * @param Boolean isDecode   省略可能。省略時はtrueとなる。
		 *                           パラメータに対応した値をURLデコードする場合にはtrueを指定する。
		 * @return String  パラメータ名に対応する値を返す。
		 *                 パラメータ指定がない場合には空文字列を返す。
		 */
		function getQueryValue(paramName, isDecode)
		{
			isDecode = isDecode || true;
					
			var regExp = new RegExp( paramName + '\=([^\&]*)', 'i' );
			var result = window.location.search.match( regExp );
					
			return ( 
				result == null ? 
				'' : 
				( isDecode ? decodeURIComponent(result[1]) : result[1] )
			);
		}
				
				
		/**
		 * 指定された検索語句のパラメータに置換して、ページをリロードする。
		 * 
		 * @param String  query  新しい検索語句
		 * @return void
		 */
		function reloadCurrentPage(query)
		{
			var prefix      = SEARCH_WORD_PARAM_NAME + '=';
			var queryString = '';
					
					
			//
			//新しい検索語句でのパラメータに置換する
			//
			if( location.search.indexOf(prefix) >= 0 ){
				queryString = location.search.replace( new RegExp(prefix + '[^\&]+', 'i'), prefix + query );
			}
			else if( location.search.length == 0 ){
				queryString = '&' + prefix + query;
			}
			else{
				switch( location.search.substr(-1, 1) ){
					case '?':
					case '&':
						queryString = location.search + prefix + query;
						break;
								
					default:
						queryString = location.search + '&' + prefix + query;
						break;
				}
			}
					
					
			//
			//ページリロード
			//
			location.search = queryString;
		}
})();
 
このような変更を行うことで、みやすい解析でサイト内検索の結果を取得することができるようになります。
 
TOPへ戻る