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/

  • このエントリーをはてなブックマークに追加
Feedforce Developer Blog

新しいブログへ移行しました!こちらもよろしくお願いします。