[google] Google AJAX Search API でサイト内検索結果をページ内に表示する

Googleのカスタム検索エンジンの検索ボックスと検索結果をページ内に埋め込む方法（オーバーレイではない）について。
Mapと同じくSearchもAPIで色々することが出来ます。

サイト内検索の検索ボックスをサイトに埋め込むのは、登録した時に作成されるコードを埋め込むだけなので簡単ですが
APIを利用する場合はJavascriptとAPIの仕様が分かってないとややこしいので、分からない人向けに説明を書いてみた。
この記事では、サイト内検索の検索ボックスと検索結果をAPIを利用して既存ページに埋め込む初歩についてまとめてます。
更に詳しいカスタマイズ方法についてはDeveloper’s Guideなどを参照してください。

Step1. 新しいカスタム検索エンジンを作成

作成にはGoogleアカウントが必須なので、無いならまずアカウントから作る。
アカウントにGoogleカスタム検索エンジンを有効にした後で、ホームの右にあるボタンとかを押せばＯＫ。
必要事項を明記して検索エンジンを作ってください。

作成が終わると、マイ検索エンジンに作成した検索エンジン一覧に表示されます。
この状態で　コントロールパネル»コード　に進むと、検索ボックスとかのソースを得る事ができます。

Step2. AJAX Search API Keyを取得

Mapsと同じくKeyが必要なのでこちらから取得してください。

Step3. 検索ボックスと検索結果が表示される要素（のID）を用意

大抵は検索ボックスと結果は別の場所に置くと思うので、適当に空要素を用意してください。
既存コンテンツエリアの中に結果を表示する場合は、検索ボックスだけでＯＫです。

たとえば次のようなもの：

<div id="searchForm">Loading...</div>
<div id="searchResult"></div>

当然ながら、Javascriptオフ環境では検索ボックスが表示されないので、noscriptタグ等で
コントロールパネル»コードのGoogle ページで検索結果をホストで出力されるソースを貼っておいた方が良いかもしれません。

Step4. カスタム検索エンジンのIDを取得

マイ検索エンジンの一覧で作った検索エンジンにそれぞれ「ホームページ」というリンクがありますが、
検索エンジンのホームページURLの「cx=」の後に続いてる文字列がカスタム検索エンジンのIDです。
取得した検索ボックスのコードにもhidden要素とかで入ってます。

Step5. 基本ソースをページ内にコピペ

Step2～4をふまえて以下のソースを適当に変更し、ページ内（head内とかbody閉じタグ前など）に貼ってください。

<script defer="defer" src="http://www.google.com/jsapi?key=YourApiKey" type="text/javascript"></script>
<script type="text/javascript" defer="defer">
//<!&#91;CDATA&#91;
	google.load("search", "1");
	function initialize() {
		
		//検索ボックスを表示させる要素のID
		var serchform = document.getElementById("searchForm");
		
		//検索結果を表示させる要素のID
		var serchresult = document.getElementById("searchResult");
		
		var searchControl = new google.search.SearchControl();
		var siteSearch = new GwebSearch();
		
		//カスタム検索エンジン検索結果のタイトル
		siteSearch.setUserDefinedLabel("サイト内");
		
		//カスタム検索エンジンのID
		siteSearch.setSiteRestriction("My Custom Search ID");
		
		//カスタム検索エンジンの結果表示に使用されるクラス名
		siteSearch.setUserDefinedClassSuffix("siteSearch");
		
		searchControl.addSearcher(siteSearch);
		
		/* その他の検索（上からWeb、ビデオ、ブログ、ニュース、画像、ブック）*/
		searchControl.addSearcher(new google.search.WebSearch());
		searchControl.addSearcher(new google.search.VideoSearch());
		searchControl.addSearcher(new google.search.BlogSearch());
		searchControl.addSearcher(new google.search.NewsSearch());
		searchControl.addSearcher(new google.search.ImageSearch());
		searchControl.addSearcher(new google.search.BookSearch());
		
		
		var drawOptions = new GdrawOptions();
		drawOptions.setSearchFormRoot(serchform);
		searchControl.draw(serchresult, drawOptions);
		//初期文字列
		searchControl.execute("Google AJAX Search API");
	}
	google.setOnLoadCallback(initialize);
//&#93;&#93;>
</script>

※defer属性一応つけてみた

結果このようになります。

出力されるHTMLは定型なので、CSSを反映させたい場合は
APIリファレンスの結果オブジェクトにあるHTMLソースを参考にスタイリングをすればおｋ。
カスタム検索はGwebResultになるのですが、setUserDefinedClassSuffix()メソッドによってクラス名を変更することが出来ます。

上記サンプルの”siteSearch”を使用した場合のHTML

<div class="gsc-webResult gsc-result gsc-result-siteSearch">
<div class="gs-result gs-webResult">
  <div class="gs-title">
    <a class="gs-title">検索結果のタイトル</a>
  </div>
  <div class="gs-snippet">検索結果の概要</div>
  <div class="gs-visibleUrl gs-visibleUrl-short">短いURL</div>
  <div class="gs-visibleUrl gs-visibleUrl-long">長いURL</div>
  <div class="gs-watermark">Google からクリップ</div>
</div>
</div>

その他のオプション

検索結果に埋め込まれたリンクで使われるリンクターゲットを設定
デフォルトはtarget=”_blank”です。

//target="_top"
searchControl.setLinkTarget(google.search.LINK_TARGET_TOP);
//target="_self"
searchControl.setLinkTarget(google.search.LINK_TARGET_SELF);
//target="_parent"
searchControl.setLinkTarget(google.search.LINK_TARGET_PARENT);

検索結果を4件から8件に設定

var siteSearch = new GwebSearch();	
siteSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET);

検索結果のJSONデータをgetしてアレコレすることも可能らしい
けどそこまで弄るのは正直ﾒﾝﾄﾞｲので出来ないフリしといたほうが楽だお…

検索された時だけ結果を指定要素内に表示する

serchform, serchresult, searchControl をグローバル変数に変更。
GSearchForm()で検索フォーム表示
setOnSubmitCallback()で呼び出される関数OnSearch()を追加

<script type="text/javascript" defer="defer">
//<!&#91;CDATA&#91;
	var serchform,serchresult,searchControl;

	google.load("search", "1");
	function initialize() {
		
		//検索ボックスを表示させる要素のID
		serchform = document.getElementById("searchForm");
		
		//検索結果を表示させる要素のID
		serchresult = document.getElementById("searchResult");
		
		searchControl = new google.search.SearchControl();
		var siteSearch = new GwebSearch();
		
		//サイト内検索結果のタイトル
		siteSearch.setUserDefinedLabel("サイト内");
		
		//カスタム検索エンジンのID
		siteSearch.setSiteRestriction("My Custom Search ID");
		
		//カスタム検索エンジンの結果で使用されるクラス名
		siteSearch.setUserDefinedClassSuffix("siteSearch");

		searchControl.addSearcher(siteSearch);
		
		/* その他の検索（上からWeb、ビデオ、ブログ、ニュース、画像、ブック）*/
		searchControl.addSearcher(new google.search.WebSearch());
		searchControl.addSearcher(new google.search.VideoSearch());
		searchControl.addSearcher(new google.search.BlogSearch());
		searchControl.addSearcher(new google.search.NewsSearch());
		searchControl.addSearcher(new google.search.ImageSearch());
		searchControl.addSearcher(new google.search.BookSearch());
		
		var gSearchForm = new google.search.SearchForm(true, serchform);
		gSearchForm.setOnSubmitCallback(null, OnSearch);
		
	}
	
	function OnSearch(searchForm) {
		var drawOptions = new GdrawOptions();
		drawOptions.setSearchFormRoot(serchform);
		searchControl.draw(serchresult, drawOptions);
		searchControl.execute(searchForm.input.value);
		return false;
	}
	
	google.setOnLoadCallback(initialize);
//&#93;&#93;>
</script>

サイト内検索結果のみ表示

サイト内検索結果のみ表示するサンプル。
検索が完了したら結果のHTMLを出力し、複数結果がある場合はページリンクを末尾につけます。
※Using Raw Searchersのソースを簡略化したものです。

google.load(‘search’, ‘1.0’);
var siteSearch,serchresult,Contents;
function initialize() {

//検索ボックスを表示させる要素のID
var serchform = document.getElementById(“searchForm”);

//検索結果を表示させる要素のID
serchresult = document.getElementById(“searchResult”);

siteSearch = new google.search.WebSearch();
siteSearch.setResultSetSize(google.search.Search.LARGE_RESULTSET);

//htmlを作成しない
siteSearch.setNoHtmlGeneration();

//カスタム検索エンジンのID
siteSearch.setSiteRestriction(“My Custom Search ID”);
siteSearch.setSearchCompleteCallback(null, OnSearch,[siteSearch]);

var gSearchForm = new google.search.SearchForm(true, serchform);
gSearchForm.setOnSubmitCallback(null, SubmitForm);
gSearchForm.setOnClearCallback(this, Reset);

//ロゴの隣に表示
//gSearchForm.userDefinedCell.innerHTML=”Sample”;
}

//元に戻す
function Reset(){
OnClear();
serchresult.innerHTML = Contents;
}
//要素削除
function OnClear(){
while (serchresult.firstChild) {
serchresult.removeChild(serchresult.firstChild);
}
}
function OnSearch(searcher) {

//空に
Contents = serchresult.innerHTML;
OnClear();

//タイトル
var el = document.createElement(“h1”);
el.innerHTML = “サイト内検索結果”;
serchresult.appendChild(el);

if (searcher.results && searcher.results.length > 0){

for (var i = 0; i < searcher.results.length; i++) { //setNoHtmlGeneration()を使用しない場合 //serchresult.appendChild(searcher.results[i].html); //setNoHtmlGeneration()を使用する場合 var result = searcher.results[i]; searcher.createResultHtml(result); if (result.html) { div = result.html.cloneNode(true); } else { div = createDiv("検索結果を作成出来ませんでした。"); } serchresult.appendChild(div); } //ナビゲーション if (siteSearch.cursor) { var cursorNode = createDiv(null, "gsc-cursor"); for (var i=0; i

[google] Google AJAX Search API でサイト内検索結果をページ内に表示する

Step1. 新しいカスタム検索エンジンを作成

Step2. AJAX Search API Keyを取得

Step3. 検索ボックスと検索結果が表示される要素（のID）を用意

Step4. カスタム検索エンジンのIDを取得

Step5. 基本ソースをページ内にコピペ

その他のオプション

検索された時だけ結果を指定要素内に表示する

サイト内検索結果のみ表示

関連

コメントを残すコメントをキャンセル

Step1. 新しいカスタム検索エンジンを作成

Step2. AJAX Search API Keyを取得

Step3. 検索ボックスと検索結果が表示される要素（のID）を用意

Step4. カスタム検索エンジンのIDを取得

Step5. 基本ソースをページ内にコピペ

その他のオプション

検索された時だけ結果を指定要素内に表示する

サイト内検索結果のみ表示

シェア

関連

コメントを残すコメントをキャンセル