お気に入り | 日本語 | ログイン

デベロッパー ガイド

Google AJAX Search API は、Google Searchをウェブページやその他のウェブ アプリケーションに埋め込むことを可能にする Javascript ライブラリです。Flash や、その他の JavaScript を使用しない環境において、API では直接の RESTful インターフェースを公開しますNew!。これは、ほとんどの言語やランタイムで簡単に処理できる JSON エンコードされた結果を返します。

Google AJAX Search API では、多くの Google サービス(ウェブ検索、ローカル検索、動画検索、ブログ検索、ニュース検索、ブック検索、画像検索、特許検索)において、インライン検索を実行するシンプルなウェブ オブジェクトを利用できます。あなたのウェブページがユーザーによるコンテンツ作成を支援するタイプである場合(掲示板、ブログなど)、API はユーザーが検索結果をメッセージに直接コピーできるようにして、作業をサポートします。

この API は新しい API で、その機能は主として利用者のアクティブな関与により決定されます。Google AJAX Search API ヘルプグループに参加してフィードバックを送ったり API について話し合ったりして、Google による API や機能の作成に力を貸してください。


AJAX Search API は AJAX API ローダーを利用するようになりました。このローダーでは、複数の Google AJAX API を同じページで容易に使えるようになり、また、それらの名前空間も統一されます。コードを変更したくない場合は、それでもかまいません。問題は特になく、古い名前空間も引き続き機能します。詳細情報:

目次

対象読者

このドキュメントは、JavaScript プログラミングとオブジェクト指向プログラミングの概念に精通している方を対象に作成されました。ウェブ上で、多数の JavaScript チュートリアルを入手できます。

はじめに

はじめての Google AJAX Search API

この API について学習を始める近道は、単純な例をご覧いただくことです。次のウェブ ページには、「VW GTI」を検索語句とするインライン検索結果のコレクションが表示されます。検索結果には、ローカル、ウェブ、ブログ、ニュース、画像、特許New!、ブック検索の結果を含みます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    google.load('search', '1');
    
    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint("New York, NY");

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("VW GTI");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading</div>
  </body>
</html>

この例をダウンロードし、編集して試すことができます。

ウェブサイト内で SEARCH API を使うには、Google AJAX API ローダー(http://www.google.com/jsapi)の URL を記述する必要があります。このライブラリによって、google.load('api', 'version') を介して各種の API を読み込むことができます。詳細については、ここを参照してください。検索コントロール機能を使う前に、必ず <script> タグにこのライブラリをインクルードしてください。

Google AJAX Search API が使うメイン オブジェクトは、さまざまな検索サービスからの検索を調整する SearchControl のインスタンスで、そのオブジェクトの子として記述されます。

上の例にあるように、LocalSearchWebSearchVideoSearchBlogSearchNewsSearchImageSearchPatentSearchBookSearch の各タイプの子オブジェクトは、addSearcher() メソッドを使用して検索コントロールに追加され、これらの検索オブジェクトによって、検索コントロールが動作する検索サービスが決まります。

検索コントロールは SearchControl draw() メソッドの呼び出しを介してウェブ ページにそれ自身を表示します。このメソッドはまた、検索コントロールをページにバインドします (DOM 内)。デフォルトでは、検索コントロールはリニア レイアウトで描画されます。タブ レイアウトで描画されるようにすることもできます。描画モードについては、後で説明します。

タブ レイアウト オプションに加え、検索コントロールでは、検索結果と検索フォームを離して置くことも簡単にできます。これにより、検索フォームをページのサイド バーに置き、検索結果をページの中心にまとめて置くといった使い方ができます。

検索コントロールのテキスト フィールドに検索語句を入力し、Enter キーを押すか、入力フィールドの右にある検索ボタンをクリックすると、検索が開始されます。検索コントロールは、リクエストされた Google サービスを横断する並行検索を自動的に開始します。プログラムで検索を開始することもできます。検索コントロールの execute() メソッドを呼び出して、検索語句の引数を渡します。

Google AJAX API ローダーを使用

Google AJAX Search API は、Google AJAX API ローダーに全面的に統合されました。ローダーを使うことで、サポートされているすべての Google AJAX API に使用できる API キー 1 つですべての API をロードできます (Google Maps API、Google AJAX Feed API を含む)。また、Google AJAX API ローダーは共通の名前空間スキームを指定するため、異なる Google API の併用がより簡単になります。ただし、既存のアプリケーションを更新しなくて済むように、古い名前空間スキームも引き続きサポートされます。

Google AJAX API ローダーの使い方は比較的シンプルです。ローダーを使うようにアプリケーションを変更するには、次の手順が必要です:

  • http://www.google.com/uds から AJAX Search API をロードする代わりに、http://www.google.com/jsapi から共通のローダーをロードします。次に示すように、既存の Google AJAX Search API キーを渡すことができます:
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
  • 次に示すように、google.load メソッドを使って AJAX Search API をロードします。google.load メソッドをロードするには、特定の API とバージョン番号を示す引数を取ります:
  • <script type="text/javascript">
      google.load("search", "1");
    </script>
  • 現在 Google AJAX Search API で使っているすべてのクラス、メソッド、プロパティで google.search.* 名前空間を使います。接頭辞 G の部分をこの名前空間に置き換えます。Google AJAX API ローダーを使う場合、たとえば、GSearchControl オブジェクトは google.search.SearchControl にマップされます:
  • <html>
      <head>
        <script src="http://www.google.com/jsapi?key=ABCDEFG"
            type="text/javascript"></script>
        <script type="text/javascript">
          google.load("search", "1");
    
          // Call this function when the page has been loaded
          function initialize() {
            var searchControl = new google.search.SearchControl();
            searchControl.addSearcher(new google.search.WebSearch());
            searchControl.addSearcher(new google.search.NewsSearch());
            searchControl.draw(document.getElementById("searchcontrol"));
          }
          google.setOnLoadCallback(initialize);
        </script>
    
      </head>
      <body>
        <div id="searchcontrol"></div>
      </body>
    
    </html>
  • ドキュメントがロードされたら、GSearch.setOnLoadCallback の代わりに google.setOnLoadCallback を使って、指定された呼び出し対象のハンドラ関数を登録します。
  • AJAX Search API には、いくつかの省略可能なローダー設定があります。New!
    • 動的ロード - 動的ロードのドキュメントをご覧ください。
    • CSS をロードしない - デフォルト CSS をロードしない場合、"nocss"true に設定します。
      google.load("search", "1", {"nocss" : true});
    • 古い名前空間をロードしない - 古い名前空間 (GSearch、GSearchControl など) をロードしない場合、"nooldnames"true に設定します。
      google.load("search", "1", {"nooldnames" : true});
      注: 大部分のサンプルでは、まだ古い名前空間を使っているため、この設定では機能しません。Google AJAX Search API で、ばらばらの名前空間を使用しないカスタム アプリケーションがあるためです。
    • UI 言語指定 - UI コンポーネント(SearchControl、ブランド表示など)の言語を、自動検出に任せるのでなく具体的に指定したい場合、"language" を en、ja、es、zh-CN、pt-PT などの言語コードに設定します。
      google.load("search", "1", {"language" : "en"});
  • Google AJAX API ローダーの使用に関する詳しいドキュメントは http://code.google.com/apis/ajax/documentation/ にあります。

    ブラウザの互換性

    Google AJAX Search API は、Firefox 1.5+、IE 6、Safari、Opera 9+、および Chrome をサポートします。

    API のアップデート

    google.load('search', '1.0'); に含まれる 2 番目のパラメータは、この API で予期されているバージョン レベルです(この例ではバージョン 1.0)。Google が API に重要なアップデートを行う場合、バージョン番号を上げ、AJAX Search API のヘルプグループにお知らせを投稿します。この場合、必要なコード変更をメモしておき、コードが対応したら、URL を新しいバージョンに更新します。

    新しいバージョンがリリースされた後、Google はしばらくの間 (およそ数ヶ月)、古いバージョンと新しいバージョンの両方を並行してサポートします。この期間が経過した後は、古い API を使用したクライアント リクエストは受け付けられなくなるため、新しいバージョンに気付いたらすぐにコードを変更してください。

    また Google AJAX Search API チームは、定期的に API を更新して、バージョンのアップデートが必要ないバグ修正とパフォーマンス強化に努めています。これらの修正の大部分はデベロッパーに対して透過的ですが、Google の不注意により API クライアントが破損することもあります。このような問題がありましたら、AJAX Search API のヘルプグループでご報告ください。

    注: 次のそれぞれの例は、HTML ファイル全体ではなく、関連する Javascript コードのみを表示しています。先に示したスケルトン HTML ファイルにコードをプラグインすることもできますし、例の後に示したリンクをクリックして、それぞれの例の HTML ファイル全体をダウンロードすることもできます。

    基本

    次の例(先に示した Hello World コード サンプル内の Javascript コードと同一)は、検索コントロールを作成し、ローカル検索、ウェブ検索、動画検索、ブログ検索、ニュース検索、画像検索、ブック検索を横断検索するようにコントロールを設定し、ページに配置します。

    // create a search control
    var searchControl = new google.search.SearchControl(null);
    
    // add in a full set of searchers
    searchControl.addSearcher(new google.search.LocalSearch());
    searchControl.addSearcher(new google.search.WebSearch());
    searchControl.addSearcher(new google.search.VideoSearch());
    searchControl.addSearcher(new google.search.BlogSearch());
    searchControl.addSearcher(new google.search.NewsSearch());
    searchControl.addSearcher(new google.search.ImageSearch());
    searchControl.addSearcher(new google.search.BookSearch());
    searchControl.addSearcher(new google.search.PatentSearch());
    
    // tell the searcher to draw itself and tell it where to attach
    // Note that an element must exist within the HTML document with id "search_control"
    searchControl.draw(document.getElementById("search_control"));

    例を表示(helloworld.html)

    検索コントロールの描画モード

    検索コントロールは、さまざまな描画モードで表示するようプログラムできます。google.search.DrawOptions オブジェクトは setDrawMode() メソッドを介してこの挙動を制御します。このメソッドは次の引数を取ります:

    • google.search.SearchControl.DRAW_MODE_LINEAR
    • google.search.SearchControl.DRAW_MODE_TABBED
    実際に検索コントロール オブジェクトの描画モードを設定するには、検索コントロールの draw() メソッドに google.search.DrawOptions オブジェクトをパラメータとして渡します。

    // create a drawOptions object
    var drawOptions = new google.search.DrawOptions();
    
    // tell the searcher to draw itself in linear mode
    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_LINEAR);
    searchControl.draw(element, drawOptions);
    // tell the searcher to draw itself in tabbed mode
    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
    searchControl.draw(element, drawOptions);

    例を表示(tabbed.html)

    このメソッドを介して利用できるもう 1 つの一般的なオプションは、検索結果と検索フォームを切り離す機能です。google.search.DrawOptions オブジェクトは setSearchFormRoot() メソッドを介してこの挙動を制御します。このメソッドは、検索フォームのコンテナの役を務める DOM 要素を受け入れます。

    // create a drawOptions object
    var drawOptions = new google.search.DrawOptions();
    drawOptions.setSearchFormRoot(document.getElementById("searchForm"));
    
    searchControl.draw(element, drawOptions);
    

    例を表示(searchformroot.html)

    サーチャー オブジェクト

    検索コントロール オブジェクトの addSearcher() メソッドは、検索コントロールがどの検索サービスに適用されるかを決定します。このメソッドは、サービス オブジェクトを指定する引数と、サービスのためのオプションを指定する引数の 2 つの引数を取ります。現在、次のサーチャー オブジェクト (サービス) がサポートされています:

    • google.search.LocalSearch
    • google.search.WebSearch
    • google.search.VideoSearch
    • google.search.BlogSearch
    • google.search.NewsSearch
    • google.search.ImageSearch
    • google.search.BookSearch
    • google.search.PatentSearchNew!
    Google AJAX Search API が開発中の場合、サポートされているサービスがリストに随時追加されていきます。

    google.search.SearcherOptions

    検索コントロールに個々のサーチャーを追加すると、省略可能な 2 番目のパラメータである google.search.SearcherOptions オブジェクトは、ウェブ ページのそのサービスの場所に、検索結果の表示方法に影響する各サービスのデフォルト拡張モードを制御します。拡張モードは次のいずれかです:

    google.search.SearchControl.EXPAND_MODE_OPEN
    できる限り多くの結果がオブジェクト内に表示されます。
    google.search.SearchControl.EXPAND_MODE_CLOSED
    UI 要素 (矢印など) から開かれた場合を除いて結果が表示されません。
    google.search.SearchControl.EXPAND_MODE_PARTIAL
    結果がオープン拡張モードのサブセットとして表示されます。
    // create a searcher options object
    // set up for open expansion mode
    // load a searcher with these options
    var options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    searchControl.addSearcher(new google.search.WebSearch(), options);

    拡張モードの制御

    次の例は、各サーチャーが異なる拡張モードで動作している検索コントロールの使用法を示します。サーチャーがタブ モードで描画されている場合、拡張モードが無視されることに注意してください。その場合、サーチャーは常にオープン モードで動作します。

    // local search, partial
    options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_PARTIAL);
    searchControl.addSearcher(new google.search.LocalSearch(), options);
    
    // web search, open
    options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    searchControl.addSearcher(new google.search.WebSearch(), options);

    例を表示(expandmode.html)

    サーチャーの結果を表示する場所の制御

    一部のアプリケーションでは、指定されたサービスを検索した結果を、ウェブ ページ上の任意の場所に表示すると好都合です。この動作モードは、そのサービスの、対応するサーチャー オブジェクトの setRoot() メソッドを使ってサポートされます。

    // web search, open, alternate root
    var options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    options.setRoot(document.getElementById("somewhere_else"));
    searchControl.addSearcher(new google.search.WebSearch(), options);

    例を表示(somewhere-else.html)

    検索結果の保持

    これまでのサンプルは、結果を別のアプリケーションに格納する機能を持たず、表示することのみを目的に、ページに検索結果を埋め込むことに専念してきました。これも Google AJAX Search API の最適用途ですが、真の潜在能力は示されていません。Google AJAX Search API は、ユーザーが他のもの、主にブログ投稿、掲示板などのコンテンツ作成アプリケーションに、検索結果を配布できるように設計されています。

    google.search.SearchControl オブジェクトは setOnKeepCallback() メソッドを介してこの機能を提供します。ユーザーが結果の下にある [Copy] リンクをクリックして、検索結果を保存する意思を示したときに呼び出されるオブジェクトとメソッドを、アプリケーションはこのメソッドを使って指定します。

    このリンクが提供されるのは、アプリケーションが setOnKeepCallback() メソッドを呼び出した場合だけです。ユーザーがリンクをクリックすると、登録されたコールバックが検索結果を表す GResult インスタンスを受け取ります。この検索結果オブジェクトには、多数のサーチャー固有のプロパティと、検索結果全体を表す HTML 要素を含む統一 html プロパティが含まれます。コールバックを処理する最も単純な方法は、html ノードをクローニングし、アプリケーションの DOM にあるノードにアタッチすることです。

    // establish a keep callback
    searchControl.setOnKeepCallback(this, MyKeepHandler);
    
    function MyKeepHandler(result) {
      // clone the result html node
      var node = result.html.cloneNode(true);
    
      // attach it
      var savedResults = document.getElementById("saved_results");
      savedResults.appendChild(node);
    }

    例を表示(keephandling.html)

    サイト制限の設定

    状況によっては、ウェブ検索、ニュース検索、ブログ検索を、特定のサイトやブログに制限するとよい場合があります。このような制約を適用する場合、通常は検索結果のそのセクションに、カスタムのラベルを設定したり、スタイルを変更したりします。

    これらの機能はすべて、サーチャー オプションによって表示されるメソッドの組み合わせを使うことによってサポートされます。次のサンプルは .setUserDefinedLabel().setUserDefinedClassSuffix().setSiteRestriction() の使用法を示しています。サンプルでは、google.search.WebSearch の 1 つのインスタンスが amazon.com からの結果だけを返すようにサイト制限されており、検索セクション ラベルが「Amazon.com」で、このセクションにカスタムの css 書式 (太字タイトル、オレンジ色のキーパー ボタンなど) がいくつか適用されています。google.search.BlogSearchgoogle.search.NewsSearch に対するサイト制限を示す類似のセクションも表示されています。

    <style type="text/css">
    /* customize checkbox for -siteSearch section and
     * set section title and keep label to bold
     */
    .gsc-resultsRoot-siteSearch .gsc-keeper {
      background-image : url('../../css/orange_check.gif');
      font-weight : bold;
    }
    .gsc-resultsRoot-siteSearch .gsc-title { font-weight : bold; }
    ...
    
    // site restricted web search with custom label
    // and class suffix
    var siteSearch = new google.search.WebSearch();
    siteSearch.setUserDefinedLabel("Amazon.com");
    siteSearch.setUserDefinedClassSuffix("siteSearch");
    siteSearch.setSiteRestriction("amazon.com");
    searchControl.addSearcher(siteSearch);
    
    // site restricted web search using a custom search engine
    siteSearch = new google.search.WebSearch();
    siteSearch.setUserDefinedLabel("Product Reviews");
    siteSearch.setSiteRestriction("000455696194071821846:reviews");
    searchControl.addSearcher(siteSearch);
            

    例を表示(sitesearch.html)

    検索コントロール コールバック

    状況によって、必要な UI をすべて提供するという理由で検索コントロールを使いたいが、受け取る検索結果を順次認識して部分的に処理する必要があることもあります。google.search.Search レイヤーにはこの機能がありますが、デベロッパーが UI を提供する必要があります。一方、検索コントロールは 1 組のコールバックを表示します。それらのコールバックを使用して、検索の実行前や、検索の完了後に、通知をリクエストすることができます。指定された実行が完了することを前提にはできないことに注意してください。完了が発生しないことがあります。誤ったコーディングで行き詰まることがないようにしてください。典型的な例は、ローカル検索の結果を近辺の地図にプロットする場合です。

    次のコード スニペットはこの機能の使用法を示しています。

    searchControl.setSearchCompleteCallback(this, App.prototype.OnSearchComplete);
    searchControl.setSearchStartingCallback(this, App.prototype.OnSearchStarting);
    
    
    App.prototype.OnSearchComplete = function(sc, searcher) {
    
      // if we have local search results, put them on the map
      if ( searcher.results && searcher.results.length > 0) {
        for (var i = 0; i < searcher.results.length; i++) {
          var result = searcher.results[i];
    
          // if this is a local search result, then proceed...
          if (result.GsearchResultClass == GlocalSearch.RESULT_CLASS ) {
            ...
    
    App.prototype.OnSearchStarting = function(sc, searcher, query) {
      alert("The Query is: " + query);
      ...
            

    次のサンプルは、これらの API の、より完全な実証例です。これら 2 つのコールバックを使ってローカル検索の結果を処理し、隣にある地図に配置する方法を示しています。例を表示(sc-callbacks.html)

    カスタムの検索フォーム

    google.search.SearchControl を使う場合、アプリケーションは統合検索フォームを活用することがあります。このフォームには、テキスト入力要素、検索ボタン、クリア ボタン、Google のブランド表示があります。アプリケーションが検索コントロールを使わず、google.search.Search レイヤーそのものを使っている場合、google.search.SearchForm() オブジェクトが役に立ちます。このオブジェクトを使うと、検索コントロールに統合されているが、動作と配置の両方を制御できるスタンドアロン オブジェクトとしてパッケージされている検索フォームのすべての利点とブランド表示を利用できます。

    次のコード スニペットはこの機能の使用法を示しています。

    // create a search form without a clear button
    // bind form submission to my custom code
    var container = document.getElementById("searchFormContainer");
    this.searchForm = new google.search.SearchForm(false, container);
    this.searchForm.setOnSubmitCallback(this, App.prototype.newSearch);
    
    // called on form submit
    App.prototype.newSearch = function(form) {
      if (form.input.value) {
        this.searchControl.execute(form.input.value);
      }
      return false;
    }
            

    次のサンプルはこのオブジェクトの使用法を示しています: 例を表示(places.html)

    高度なブランド表示

    google.search.SearchControl または google.search.SearchForm を使うと、ユーザーには「powered by Google」ブランド表示が表示されます。ユーザーは、サイトに表示される検索サービスが Google によるものだと判断できます。アプリケーションでこれらのフォームのいずれかを使わない場合でも、ユーザーに対して Google ブランドを知らせることが重要です。google.search.Search.getBranding() メソッドはそれを後押しするよう設計されています。このメソッドは HTML DOM 要素を受け入れ、その要素に「powered by Google」ブランド表示を付加します。別の方法として、「powered by Google」HTML DOM 要素が返されるようにして、それを直接付加することも可能です。

    次のコード スニペットはこの機能の使用法を示しています。

    // attach "powered by Google" branding
    google.search.Search.getBranding(document.getElementById("branding"));
    ...
    <div id="branding">Loading...</div>
            

    次のサンプルはこのオブジェクトの使用法を示しています: 例を表示(branding.html)

    その他のサンプル

    その他の使用法のサンプルは、これらのコンセプトの多くを、より大きいアプリケーション フラグメントのコンテキストで示しています。

    API 概要

    Google AJAX Search API はいくつかのオブジェクトのクラスで構成されています:

    • google.search.SearchControl - このクラスはいくつかのサーチャー オブジェクトのユーザー インターフェースを提供し、調整を行います。各サーチャー オブジェクトはここで検索を実行し、特定の結果クラス(ウェブ検索、ローカル検索など)を返すように設計されています。
    • google.search.Search - この基本クラスは、すべてのサーチャーが継承するクラスです。すべてのサーチャー サービスが実装する必要があるインターフェースを定義しています。
    • GResult - この基本クラスは、サーチャー オブジェクトが作成した検索結果をカプセル化します。
    • google.search.SearcherOptions - このクラスは、検索コントロールに追加されたときのサーチャー オブジェクトの動作を設定します。

    これらのクラスの予想される使用パターンを次に示します:

    // create a searcher object
    var sc = new google.search.SearchControl();
    
    // add one or more searchers, specifying options as needed
    var options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    sc.addSearcher(new google.search.WebSearch(), options);
    ...
    
    // activate the search control by calling it's .draw() method
    sc.draw(document.getElementById("myDiv"));

    これらの基本手順に従うと、検索コントロールがアクティブになります。検索コントロールが描画されると、追加のサーチャーを追加することも、サーチャー オプションを変更することもできません。検索コントロールの挙動を変更する必要がある場合、新しい検索コントロールを構築し、アクティブ化する必要があります。

    詳細はSearch API のクラス リファレンスをご覧ください。

    検索結果のスタイル設定New!

    各検索結果には、CSS スタイルを念頭に作成されたデフォルトの .html プロパティが含まれます。結果として、各セマンティック情報は、適切なクラス マーカーのセットを使う HTML マークアップで囲まれます。これにより、必要に合わせて、HTML を整える独自のカスタム CSS ルールと組み合わせてこの HTML を使うことができます。

    次のセクションで示すように、各検索結果は、gs-result の汎用検索結果クラスや結果タイプ固有のクラス (gs-webResultgs-localResult など) を示す div 要素で囲まれます。この構造により、すべての結果に適用される汎用 CSS ルールやタイプ固有のルールを容易に定義できます。

    この構造のほか、結果が google.search.SearchControl により管理されている場合、各検索結果は、gsc-result の汎用検索結果クラスや結果タイプ固有のクラス (gsc-webResultgsc-localResult など) を示す div 要素で囲まれます。各結果セクションはさらに、gsc-results の汎用の検索コントロール結果クラスや結果タイプ固有のクラス (gsc-webResultgsc-localResult など) を示す div 要素でラップされます。

    この構造は、結果として次のスケルトンをもたらします:

    <!-- A collection of web search results in the search control -->
    <div class="gsc-results gsc-webResult">
    
      <!-- A single web result in the search control -->
      <div class="gsc-result gsc-webResult">
    
        <!-- A single web result, full structure defined below -->
        <div class="gs-result gs-webResult"></div>
      </div>
      ...
    </div>
    
    <!-- Similar pattern for local, blog, etc. -->
    <div class="gsc-results gsc-localResult"></div>
    <div class="gsc-results gsc-blogResult"></div>
      

    各検索結果の CSS 構造の詳細は、次のセクションをご覧ください。

    Flash やその他 JavaScript を使用しない環境New!

    Flash のデベロッパーや、JavaScript を使用しない環境で AJAX Feed API にアクセスする必要のあるデベロッパーに対して、API ではシンプルな RESTful インターフェースを公開しています。どの場合でも、サポートされるメソッドは GET で、応答の形式は、ステータスコードが埋め込まれた JSON エンコードされた結果です。このインターフェースを使用するアプリケーションは、既存のすべての利用規約に従うものとします。特に注意する必要があるのは、要求において自身を正しく識別することに関連する部分です。アプリケーションでは、有効かつ正確な HTTP referer ヘッダーを常に要求に含める必要があります。さらに、必須ではありませんが、それぞれの要求に有効な API キーを組み込んでください。キーを提供することで、アプリケーションにより二次的な識別構造が提供され、問題が発生した場合のコンタクトに使用できます。

    このインターフェースについて簡単に学ぶ方法は、使用してみることです。コマンド ライン ツール curlwget を使って次のコマンドを実行してください。

    curl -e http://www.my-ajax-site.com \
            'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton'
    

    このコマンドは、Paris Hiltonq=Paris%20Hilton)をウェブ検索(/ajax/services/search/web)します。応答には text/javascript; charset=utf-8Content-Type が含まれます。次に示す応答を見ると、responseDataBase Search Object のドキュメントで説明されているresults プロパティ、cursor プロパティと一致することがわかります。

    {"responseData": {
     "results": [
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "visibleUrl": "en.wikipedia.org",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:TwrPfhd22hYJ:en.wikipedia.org",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e - Wikipedia, the free encyclopedia",
       "titleNoFormatting": "Paris Hilton - Wikipedia, the free encyclopedia",
       "content": "\[1\] In 2006, she released her debut album..."
      },
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
       "url": "http://www.imdb.com/name/nm0385296/",
       "visibleUrl": "www.imdb.com",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:1i34KkqnsooJ:www.imdb.com",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
       "titleNoFormatting": "Paris Hilton",
       "content": "Self: Zoolander. Socialite \u003cb\u003eParis Hilton\u003c/b\u003e..."
      },
      ...
     ],
     "cursor": {
      "pages": [
       { "start": "0", "label": 1 },
       { "start": "4", "label": 2 },
       { "start": "8", "label": 3 },
       { "start": "12","label": 4 }
      ],
      "estimatedResultCount": "59600000",
      "currentPageIndex": 0,
      "moreResultsUrl": "http://www.google.com/search?oe\u003dutf8\u0026ie\u003dutf8..."
     }
    }
    , "responseDetails": null, "responseStatus": 200}
    

    この応答形式に加えて、このプロトコルは、callback 引数を指定して呼び出される従来の JSON-P 形式のコールバックもサポートします。この引数がある場合、JSON オブジェクトは指定されたコールバックに引数として渡されます。

    curl -e http://www.my-ajax-site.com \
     'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton&callback=processResults'
    

    このコマンドはフィードのロードを実行し、前のロードと同じですが、callback を渡すように変更されています。この引数を使用すると、JSON オブジェクトが返される代わりに JavaScript 呼び出しが返され、JSON オブジェクトは results パラメータを介して渡されます。

    processResults({"responseData": {
     "results": [
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "visibleUrl": "en.wikipedia.org",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:TwrPfhd22hYJ:en.wikipedia.org",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e - Wikipedia, the free encyclopedia",
       "titleNoFormatting": "Paris Hilton - Wikipedia, the free encyclopedia",
       "content": "\[1\] In 2006, she released her debut album..."
      },
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
       "url": "http://www.imdb.com/name/nm0385296/",
       "visibleUrl": "www.imdb.com",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:1i34KkqnsooJ:www.imdb.com",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
       "titleNoFormatting": "Paris Hilton",
       "content": "Self: Zoolander. Socialite \u003cb\u003eParis Hilton\u003c/b\u003e..."
      },
      ...
     ],
     "cursor": {
      "pages": [
       { "start": "0", "label": 1 },
       { "start": "4", "label": 2 },
       { "start": "8", "label": 3 },
       { "start": "12","label": 4 }
      ],
      "estimatedResultCount": "59600000",
      "currentPageIndex": 0,
      "moreResultsUrl": "http://www.google.com/search?oe\u003dutf8\u0026ie\u003dutf8..."
     }
    }
    , "responseDetails": null, "responseStatus": 200})
    

    最終的に、プロトコルは callback 引数と context 引数をサポートします。この URL の引数が指定されると、応答は callback(context, results, status, details, unused) の署名で JavaScript を直接呼び出すようエンコードされます。次のコマンドと応答に、微妙な違いがあることに注意してください。

    curl -e http://www.my-ajax-site.com \
     'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton&callback=foo&context=bar'
    

    このコマンドはフィードのロードを実行し、前のロードと同じですが、callbackcontext を渡すように変更されています。この引数を使用すると、JSON オブジェクトが返される代わりに JavaScript 呼び出しが返され、JSON オブジェクトは results パラメータを介して渡されます。

    foo('bar',{
     "results": [
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
       "visibleUrl": "en.wikipedia.org",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:TwrPfhd22hYJ:en.wikipedia.org",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e - Wikipedia, the free encyclopedia",
       "titleNoFormatting": "Paris Hilton - Wikipedia, the free encyclopedia",
       "content": "In 2006, she released her debut album \u003cb\u003eParis\u003c/b\u003e..."
      },
      {
       "GsearchResultClass": "GwebSearch",
       "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
       "url": "http://www.imdb.com/name/nm0385296/",
       "visibleUrl": "www.imdb.com",
       "cacheUrl": "http://www.google.com/search?q\u003dcache:1i34KkqnsooJ:www.imdb.com",
       "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
       "titleNoFormatting": "Paris Hilton",
       "content": "Self: Zoolander. Socialite \u003cb\u003eParis Hilton\u003c/b\u003e was..."
      },
      ...
     ],
     "cursor": {
      "pages": [
       { "start": "0", "label": 1 },
       { "start": "4", "label": 2 },
       { "start": "8", "label": 3 },
       { "start": "12","label": 4 }
      ],
      "estimatedResultCount": "59600000",
      "currentPageIndex": 0,
      "moreResultsUrl": "http://www.google.com/search?oe\u003dutf8..."
     }
    }
    , 200, null)
    

    コード スニペットNew!

    次のセクションでは、Flash、Java、PHP から API にアクセスする方法を説明するコード スニペットを示します。JSON 応答の処理中に問題が発生した場合は、JSON.org サイトのさまざまな JSON ライブラリの参照が記載されているページの後半を注意して確認してください。前のセクションで説明されている各種の Google API サービスを REST API を介して使用可能にする方法の詳細については、このベース URL に対するテーブル マッピング メソッドを参照してください。

    Flash アクセス

    次のコード スニペットは、Flash から AJAX Search API に要求する方法を示します。ActionScript 3.0(AS3)コア ライブラリから JSON を使用してください。

    var service:HTTPService = new HTTPService();
    service.url = 'http://ajax.googleapis.com/ajax/services/search/web';
    service.request.v = '1.0';
    service.request.q = 'Paris Hilton';
    service.resultFormat = 'text';
    service.addEventListener(ResultEvent.RESULT, onServerResponse);
    service.send();
    
    private function onServerResponse(event:ResultEvent):void {
      try {
        var json:Object = JSON.decode(event.result as String);
        // now have some fun with the results...
      } catch(ignored:Error) {
      }
    }
    

    Java アクセス

    次のコード スニペットは、Java から AJAX Search API に要求する方法を示します。JSON ライブラリは、http://www.json.org/java/ にあります。

    URL url = new URL("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton");
    URLConnection connection = url.openConnection();
    connection.addRequestProperty("Referer", "http://www.mysite.com/index.html");
    
    String line;
    StringBuilder builder = new StringBuilder();
    BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
    while((line = reader.readLine()) != null) {
     builder.append(line);
    }
    
    JSONObject json = new JSONObject(builder.toString());
    // now have some fun with the results...
    

    PHP アクセス

    次のコード スニペットは、PHP から AJAX Search API に要求する方法を示します。このサンプルは、PHP 5.2 を前提にしています。PHP のそれ以前のインストールについては、このコメントを参照してください。

    $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton";
    
    // sendRequest
    // note how referer is set manually
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_REFERER, "http://www.mysite.com/index.html");
    $body = curl_exec($ch);
    curl_close($ch);
    
    // now, process the JSON string
    $json = json_decode($body);
    // now have some fun with the results...
    

    このインターフェースについて網羅したドキュメントは、クラス リファレンス マニュアルをご覧ください。

    トラブルシューティング

    コードについて問題が発生した場合は、次のことを実行してください。

    • ご使用の API キーが有効であることを確認します。
    • ミスタイプがないかどうかを確認します。JavaScript では大文字と小文字が区別されるため、正しく記述されていることを確認します。
    • JavaScript デバッガを使用します。Firefox の場合は、JavaScript コンソールまたは FireBug、IE の場合は Microsoft Script Debugger を使用できます。
    • AJAX Search API ヘルプグループを検索します。疑問に対する答えが投稿されていない場合は、問題を具体的に示しているウェブ ページへのリンクを含めて、グループに質問を投稿してください。