映画とネットのDIARY(tDiary版）

■ Google検索結果を同一ページに表示

Google AJAX Search API とGoogle カスタム検索エンジン を組み合わせると、そういうことができるようになる。Sorry, Wrong Accessの関連３サイト総合検索とシネマ１９８７onlineの詳細な検索に設置してみた。画面の遷移なしで非同期通信を行うAJAXの威力はこういうところに感じる。

検索向けAdSenseのIDだとうまくいかなかった。最初、これで随分悩んだ。カスタム検索エンジンにAdSenseと関連づけていないものを作っていたのでそれを利用したら、すんなり。

コードは以下の通り。

<script type="text/javascript" src="http://www.google.com/jsapi?key="ここに取得したAPI_KEYを書く"></script>
<script type="text/javascript" language="Javascript">
<!--
google.load("search", "1");
function OnLoad() { var searchControl = new google.search.SearchControl();
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("サイト内検索");
siteSearch.setSiteRestriction("ここにカスタム検索エンジンのIDを書く");
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(siteSearch, options);
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF);
searchControl.execute("");
} google.setOnLoadCallback(OnLoad, true);
// -->

表示したいところに

<div id="searchcontrol">Loading...</div>

と書く。このコードはオプションとして検索結果の最大表示（８件）とリンクターゲットのセルフなどを指定している。カスタマイズの詳細はClass Referenceに書いてあった。ブログに設置する場合、JavaScriptをヘッダー内に書けず、Bodyに書くことになるので、少し具合が悪い。HTMLファイルに書いた方が良いのではないかと思う。