Google AJAX Search APIのお勉強

Presentation on theme: "Google AJAX Search APIのお勉強"— Presentation transcript:

1 Google AJAX Search APIのお勉強
2006/07/07 FFLab 技術勉強会

2 http://code.google.com/apis/ajaxsearch/ サイトにGoogle検索JS APIキーはGmapと同じ
Google AJAX Search API サイトにGoogle検索JS APIキーはGmapと同じ バージョン 0.1 (2006/07/07現在) 1.0になったら検索連動広告が入るよ 1.0になったらコードは変わるよ

3 Web Search - GwebSearch() Local Search - GlocalSearch()
なにができるの？ Web Search - GwebSearch() Local Search - GlocalSearch() Video Search - GvideoSearch() Blog Search - GblogSearch() Coming Soon Image Search - GimageSearch()

4 どうやって使うの？ ウェブ検索サンプル サンプル Window.onload = function() {
// seach control 生成 var sc = new GSearchControl(); // searcher 追加 sc.addSearcher(new GwebSearch()); // search control 描画 sc.draw(document.getElementById(“search-control”)); // 検索実行 sc.execute(“ルート・コミュニケーションズ”); } サンプル

5 スタイル自由なのでサイトにあわせてスタイルシートを適用できる
CSS重要 スタイルシートをあてないとこうなる スタイル自由なのでサイトにあわせてスタイルシートを適用できる 要素はGoogleのスタイルシート参照 (使っていいか分からんけど使ってます。)

6 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(“ルート・コミュニケーションズ”); } サンプル

7 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); サンプル

8 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); サンプル

9 setOnKeepCallback True Potentialはこれらしい サンプル
// 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); }); サンプル

10 サイト内検索などで重宝するよ ラベルを変えられます サンプル // create a web search
var ws = new GwebSearch(); // サイト内検索設定 ws.setSiteRestriction(“item.rakuten.co.jp”); // ラベル ws.setUserDefinedLabel(“楽天商品検索”); // add searcher sc.addSearcher(ws); サンプル

11 Googleの検索だけどGoogleの検索結果と一致してません
まだv0.1なので・・・ バグあり 英語以外のローカル検索に不具合 Googleの検索だけどGoogleの検索結果と一致してません undocumentedな機能 Developer Forum 参考ドキュメント Google AJAX Search API Documentation