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

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

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

どうやって使うの？ ウェブ検索サンプル サンプル 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); サンプル

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

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

Googleの検索だけどGoogleの検索結果と一致してません まだv0.1なので・・・ バグあり 英語以外のローカル検索に不具合 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/