Google AJAX Search APIのお勉強 - F.Ko

Feed
Force
Google AJAX Search APIのお勉強
2006/07/07
FFLab 技術勉強会
Google AJAX Search API
http://code.google.com/apis/ajaxsearch/
Feed
Force
• サイトにGoogle検索JS
• APIキーはGmapと同じ
• バージョン 0.1
(2006/07/07現在)
• 1.0になったら検索連動
広告が入るよ
• 1.0になったらコードは
変わるよ
なにができるの？
•
•
•
•
Web Search - GwebSearch()
Local Search - GlocalSearch()
Video Search - GvideoSearch()
Blog Search - GblogSearch()
Feed
Force
– Coming Soon
• Image Search - GimageSearch()
どうやって使うの？
• ウェブ検索サンプル
Feed
Force
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重要
• スタイルシートをあてないとこうなる
Feed
Force
• スタイル自由なのでサイトにあわせてスタイ
ルシートを適用できる
要素はGoogleのスタイルシート参照
http://www.google.com/uds/css/gsearch.css
(使っていいか分からんけど使ってます。)
ウェブ検索以外は？
• addSearcherに放り込む
Feed
Force
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
Feed
Force
– 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)
Feed
Force
// 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
Feed
Force
// 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);
});
ラベルを変えられます
• サイト内検索などで重宝するよ
Feed
Force
// create a web search
var ws = new GwebSearch();
// サイト内検索設定
ws.setSiteRestriction(“item.rakuten.co.jp”);
// ラベル
ws.setUserDefinedLabel(“楽天商品検索”);
// add searcher
sc.addSearcher(ws);
サンプル
まだv0.1なので・・・
• バグあり
Feed
Force
– 英語以外のローカル検索に不具合
• Googleの検索だけどGoogleの検索結果と一
致してません
• undocumentedな機能
– Developer Forum
http://groups-beta.google.com/group/Google-AJAX-Search-API
参考ドキュメント
Google AJAX Search API Documentation
http://code.google.com/apis/ajaxsearch/documentation/

Download Report