EC-CUBEで作成しているページに、Googleカスタム検索を導入する。
EC-CUBEのバージョンは問わない。
1 URLがGoogleに登録されていることが条件なので、はじめに登録。
上記のサンプル画像では、「アイス」というキーワードで検索したが、URLがGoogleに登録されていないので、検索結果なしと表示されている。
URL登録の有無は、Googleトップページの検索窓にURLを入力して確認することができる。
検索されれば登録済み。検索されなければ未登録。
2 管理画面のデザイン管理＞PC＞レイアウト設定
（1）新規ページを作成
①名称：Googleの検索結果
②URL：search_resulte
（http://ドメイン/user_data/search_resulte.php）
③共通のヘッダーを使用する 共通のフッターを使用する
（2）ブロックを新規作成
①ブロック名：Googleカスタム検索
②ファイル名：search_google
3 Googleカスタム検索で、「新しい検索エンジン」を作成
http://www.google.co.jp/cse/manage/all
（1）検索エンジンの設定
検索するURLを入力後、次へ
（2）スタイルの選択
選択後、次へ
（3）コードの取得画面
デザイン変更のページへ
（4）コントロールパネル画面
①レイアウトの選択で、「2ページ」を選択
②「保存してコードを取得」をクリック
（5）検索結果を表示するサイトのURLに、管理画面上で作成したページのURLを入力する。
①http://ドメイン/user_data/search_resulte.php
②URL に埋めこまれているクエリ パラメータ名はそのままで。
③「変更を保存」をクリック
（6）下にある「検索要素 V1 コードに切り替え」をクリックして表示されるコードをカスタマイズする。
①■search_google.tpl
<style type="text/css">
#cse-search-form {
width: 100% !important;
}
#cse-search-form table, #cse-search-form td {
padding: 0 !important;
border:none;
}
#cse-search-form input[type="text"] {
padding: 3px !important;
height: 19px;
width: 100%;
*width:120px;/*IE7用*/
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-webkit-appearance: none;
}
#cse-search-form input[type="button"] {
margin-left: 0 !important;
padding-left:4px;
cursor:pointer;
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
letter-spacing:4px;
height: 27px;
width: 40px;
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-webkit-appearance: none;
}
#cse-search-form .gsc-clear-button {
display:none;
}
#cse-search-form table.gsc-branding {
display:none;
}
#tit_google_search {
margin-bottom:-15px;
}
</style>
<div class="block_outer">
<div id="tit_google_search">すべて検索</div>
<div id="cse-search-form"></div>
</div>
<script src="http://www.google.co.jp/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja'});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'検索エンジン ID', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("http://ドメイン名/user_data/search_resulte.php");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
②■search_resulte.tpl
<style type="text/css">
#cse table.gsc-search-box, #cse table.gsc-branding {
display:none;
}
</style>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.co.jp/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'検索エンジン ID', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('\x26');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = "q";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
【補足】
下記を参考にCSSを修正する
<div style="width: 100%;" id="cse-search-form">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-ja" dir="ltr">
<form class="gsc-search-box" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<input type="text" autocomplete="off" size="10" class=" gsc-input" name="search" title="検索" style="background: url("http://www.google.com/cse/intl/ja/images/google_custom_search_watermark.gif") no-repeat scroll left center rgb(255, 255, 255);">
</td>
<td class="gsc-search-button">
<input type="button" value="検索" class="gsc-search-button" title="検索">
</td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="結果をクリア"> </div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined">
</td>
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img">
<img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</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 customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("http://google.com/cse?cx=XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<script type="text/javascript" src="http://www.google.com/uds/?file=search&v=1&hl=ja">
</script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.css">
<script type="text/javascript" src="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.I.js">
</script>
<link type="text/css" href="http://www.google.com/cse/style/look/default.css" rel="stylesheet">
