Google AJAX Search APIを導入してみました。
へぇ~、こんな検索機能があるんだぁと思い、調子に乗って、自分のMovableTypeにも実装してみました。右上にある検索フォームです。使ってみてください。苦戦するだろうと思っていたが、意外と簡単にできました。
ポイントだけ。手順を簡単に。
1)まず、Google AJAX Search APIにて、APIを取得します。
2)headタグ内にソースを追加。
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのAPI Key" type="text/javascript"></script> <script type="text/javascript"> var coreSearch; function SolutionLoad() { var controlRoot = document.getElementById("searchControl"); // create the search control coreSearch = new GSearchControl(); coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF); coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET); // prep for decoupled search form var searchFormElement = document.getElementById("searchform"); var drawOptions = new GdrawOptions(); drawOptions.setSearchFormRoot(searchFormElement); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); // populate - web, this blog, all blogs var searcher = new GblogSearch(); searcher.setSiteRestriction("http://あなたのサイトアドレス"); searcher.setUserDefinedLabel("あなたのサイト名"); coreSearch.addSearcher(searcher); searcher = new GwebSearch(); searcher.setUserDefinedLabel("Google"); coreSearch.addSearcher(searcher); // option // option coreSearch.draw(controlRoot, drawOptions); } function doCoreSearch(q) { coreSearch.execute(q); } registerLoadHandler(SolutionLoad); function registerLoadHandler(handler) { var node = window; if (node.addEventListener) { node.addEventListener("load", handler, false); } else if (node.attachEvent) { node.attachEvent("onload", handler); } else { node['onload'] = handler; } return true; } </script>
3)フォームを設置したいところに以下のソースを記述。
<div id="searchform">Loading...</div>
4)検索結果を表示したいところに以下のソースを記述。
<div id="searchControl">Loading...</div>
5)CSSで見た目を修正。
基本的には上記方法で実装可能なはずです。やりながら気づいたことは2)のsearcher = new GblogSearch(); ってなってるのはGoogleのブログ検索内での結果を表示。searcher = new GwebSearch();にすると一般のウェブ検索結果となります。
2007年05月