Google AJAX Search API
- 2006.07.07
- 勉強会資料
Official Site
http://code.google.com/apis/ajaxsearch/
Developer Forum
http://groups.google.com/group/Google-AJAX-Search-API
どうやって使うの?
ウェブ検索サンプル
Window.onload = function() {
// seach control 生成
var sc = new GSearchControl();
// searcher 追加
sc.addSearcher(new GwebSearch());
// search control 描画
sc.draw(document.getElementById("search-control"));
// 検索実行
sc.execute("ルート・コミュニケーションズ");
}
CSS重要
- スタイルシートをあてないと こうなる
- スタイル自由なのでサイトにあわせてスタイルシートを適用できる
- 要素はGoogleのスタイルシート参照
http://www.google.com/uds/css/gsearch.css(使っていいか分からんけど使ってます。)
ウェブ検索以外は?
addSearcherに放り込む
Window.onload = function() {
// seach control 生成
var sc = new GSearchControl();
// searcher 追加
sc.addSearcher(new GwebSearch());
sc.addSearcher(new GlocalSearch());
sc.addSearcher(new GblogSearch());
sc.addSearcher(new GvideoSearch());
// search control 描画
sc.draw(document.getElementById("search-control"));
// 検索実行
sc.execute("ルート・コミュニケーションズ");
}
タブにできるよ
GdrawOption
- DRAW_MODE_TABBED
- DRAW_MODE_LINEAR
// draw options
var opt = new GdrawOptions();
// 描画モードの指定
opt.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// オプションつけて描画
sc.draw(document.getElementById("search-control"), opt);
検索結果を任意の場所に
setRoot(element)
// searcher options
var opt = new GsearcherOptions();
// id="web-search" をセット
opt.setRoot(document.getElementById("web-search"));
// ウェブ検索はweb-searchの場所に表示
sc.addSearcher(new GwebSearchControl(), opt);
// ブログ検索はデフォルト位置に
sc.addSearcher(new GblogSearchControl);
True Potentialはこれらしい
setOnKeepCallback
// establish a keep callback
sc.setOnKeepCallback(this, function(result) {
// 要素取得
var titles = document.getElementById("result-title");
// pタグ生成
var p = document.createElement("p");
// 検索結果のタイトルをappend
p.appendChild(document.createTextNode(result.titleNoFormatting));
// pタグをappend
titles.appendChild(p);
});
ラベルを変えられます
サイト内検索などで重宝するよ
// create a web search
var ws = new GwebSearch();
// サイト内検索設定
ws.setSiteRestriction("item.rakuten.co.jp");
// ラベル
ws.setUserDefinedLabel("楽天商品検索");
// add searcher
sc.addSearcher(ws);
まだv0.1なので・・・
- バグあり
- 英語以外のローカル検索に不具合
- Googleの検索だけどGoogleの検索結果と一致してません
- undocumentedな機能
参考ドキュメント
Google AJAX Search API Documentationjavascript
http://code.google.com/apis/ajaxsearch/documentation/