目次


Ajax をマスターする

第 9 回 Google Ajax Search API を使う

非同期アプリケーションで公開 API を活用する

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: Ajax をマスターする

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:Ajax をマスターする

このシリーズの続きに乞うご期待。

この連載ではこれまで、クライアント・サイドの Web ページがサーバー・サイドのスクリプトとプログラムに要求を行う場合に限って話を進めてきました。Ajax アプリケーション (XMLHttpRequest オブジェクトを使用する非同期 Web アプリケーション) のおそらく 80 パーセントから 90 パーセントは、クライアントからサーバーへの要求で機能するからです。ただし、この手法にはかなり厳しい制約があります。それは、自分の知恵とプログラミング・スキルの枠、あるいは会社内であればチームのプログラマーたちの知恵とプログラミング・スキルの枠から抜け出せないということです。

必ずと言っていいほどあるのは、何かをしようとして、自分にはその目標を実現するだけの専門知識がないと思い知らされるという事態です。それは、一部の構文を知らなかったり、正しいアルゴリズムを考え出す方法がわからないせいかもしれません。あるいは、必要を満たすだけのデータやリソース (人的資源またはデータ・リソース) がないという場合もあります。こういったとき、「他の人のコードを使っていれば良かったのに!」と後悔している自分に気付くことでしょう。この記事は、そんな事態に対処するためのものです。

オープン・ソースのスクリプトとプログラム

この記事の本題 (Web アプリケーションで公開 API を使用する方法) に入る前に、オープン・ソースのスクリプトとプログラムの存在について触れておく価値はあります。詳細は省きますが、オープン・ソースとは、独自のアプリケーションである程度自由に使用および再利用できるコードを表すために使われる用語です。関連リンクは「参考文献」に記載していますが、10,000 フィートのビューから他の誰かが作成したオープン・ソース・コードを入手して自分の環境にそのまま組み込むことができます。使用料もかからず、(それほどの) 制約もありません。

オープン・ソース・コードを利用する場合、アプリケーションにドキュメンテーションを追加したり、あるいはオープン・ソースのプログラムまたはスクリプトに行った変更をコミュニティーに寄与しなければならないことがあります。プログラムのどの部分を使うにせよ、結果的には、自分で作成しなくてもコードを使用できたり、あるいは自分で作成するにはあまりにも支援やリソースが足りなかったコードを使用できることになります。Apache のようなプロジェクトでは、他の人々の成果を手軽に利用できます。心配には及びません。成果を共有するのが、このプロジェクトの目的だからです。

オンラインの記事とチュートリアル

IBM developerWorks に掲載される記事なのに、インターネットで入手できる記事やチュートリアル、そしてホワイト・ペーパーに至るまでの豊富な資料について触れなかったとしたら、かなり間抜けでしょう。オンラインには文字通り数十万の資料があり、Ajax に関する記事はおそらく 1,000 近くにのぼります。この連載だけでも約 10 の記事があるほどです。これらの記事のほとんどには、実際に使えるコード、例、ダウンロード、そして目的に応じて使用できるさまざまな特典があります。

使用したいサーバー・サイド・プログラムまたはスクリプトのコードを作成するには力が及ばない場合、あるいは必要なことを実行するオープン・ソースのプログラムまたはスクリプトが見つからないという場合は、Google にアクセスして、探し物の基本的な説明を入力してみてください。あなたの目的に役立つ記事やヒント、または何らかのスニペットがオンラインで見つかることがよくあります。developerWorks にもアクセスして同じように検索してください。探しているコードそのもの、さらには完全なスクリプトが役に立つコメントと機能に関する説明付きで見つかることも珍しくありません。

公開 API の使用方法

技術的なことではない問題に直面することは何度もあるはずです。つまり、特定のスクリプトやコードの作成支援が必要というわけではなく、単にデータやリソースがないといった問題です。そのような場合、助けになるチュートリアルやオープン・ソースのスクリプトが利用できるとしても、それだけではまだ足りません。例えば、Web ページに検索エンジンを配置するというケースを考えてみてください。ここで前提となるのは検索対象のデータが手元にあることですが、もし会社や組織で利用できるデータ以外のデータも検索したいとしたらどうでしょう。

技術的手腕だけではなく、データによって制限されるような場合には、公開 API が問題解決に役立つことがあります。公開 API では、他の誰かのサーバーでホストされているプログラムによって他の誰かのデータを使用できます。通常は API 自体がプログラムとの対話方法を定義します。例えば、Google 検索エンジンの公開 API ではユーザーが検索要求を行いますが、Google のデータを検索して結果をユーザーのプログラムに戻すのは Google のコードです。こうしたプログラムを作成するにあたって、他人のプログラミング・スキルを利用できるだけでなく、自分や自分の会社がサポート可能な範囲をはるかに超えたデータ・ストアを利用できることにもなります。

Google Ajax Search API を使えるようにセットアップする方法

Google はほぼ間違いなく、オンライン時代の画期的アプリケーションとしてその地位を維持しています。お年寄りや 4 才の子供でも、オンラインの他の仕組みは理解していないとしても Google については知っています。このように絶大な人気を誇る Google は便利な検索エンジンで、しかも (ほとんど) 無料のサービスを提供するのに献身的なので、ユーザー独自のプログラムで使用できる公開 API を提供しているのも驚くにはあたりません。このセクションでは Google API を使えるようにセットアップして、非同期アプリケーションと Google との対話を可能にする方法を理解する準備を整えます。

Google からデベロッパー・キーを取得する

この記事では具体的に Google の Ajax Search API を取り上げます。この API についての詳細をオンラインで調べるには、図 1 に示す Google Ajax Search API ホーム・ページにアクセスしてください (「参考文献」にリンクを記載しています)。

図 1. Google Ajax Search API ページ
図 1. Google Ajax Search API ページ
図 1. Google Ajax Search API ページ

まず、Sign up for a Google AJAX Search API key リンクをクリックして、Google API を使用するためのサインアップ・ページを表示してください。いくつかの利用条件 (私が知る限り、いずれの条件もまったく害がありません) を受諾して、アプリケーションを実行する Web サイトの URL を入力します (図 2 を参照)。

図 2. Google Ajax Search API を使用するためのサインアップ
図 2. Google Ajax Search API を使用するためのサインアップ
図 2. Google Ajax Search API を使用するためのサインアップ

同意内容を読んでチェック・ボックスにチェック・マークを付けたら、URL を入力し、Generate API Key をクリックして 1、2 秒待ちます。この時点で、Google にログインするか、アカウントを作成することになります。これは一般的なプロセスなので自力で行えるはずです。このプロセスが完了すると応答画面が表示され、かなり長いキーと確認用の URL、そしてサンプル・ページも提供されます。キーは、以下のようなものになります。

ABQIAAAAjtuhyCXrSHOFSz7zK0f8phSA9fWLQO3TbB2M9BRePlYkXeAu8lHeUgfgRs0eIWUaXg

Google の API ドキュメンテーション

割り当てられたキーを使い始める前に、Google の API ドキュメンテーションを一読してみてください (キーを提供したページの下にリンクがあります。このリンクは、この記事の「参考文献」にも記載しています)。この記事でまったく問題なく API を使い始めることができたとしても、Google の API ドキュメンテーションを読めば、読むだけの価値があると納得できるはずです。また、独自のアプリケーションの独自のサイトで Google を独創的に使う方法を思い付くきっかけになるかもしれません。

最も単純な Google 検索 Web アプリケーション

可能な操作を見慣れてもらうため、Google が提供するサンプル Web ページにちょっとした変更を加えて、どのように機能するかを説明することにします。

検索ボックスを作成する

リスト 1 は、かなり単純な Web ページです。これをお好みのエディターに入力して保存し、前のセクションで Google に指定したドメインまたは URL にアップロードしてください。

リスト 1. 単純な Google 検索アプリケーション用 HTML
<html>
 <head>
  <title>My Google AJAX Search API Application</title>
  <link href="http://www.google.com/uds/css/gsearch.css"
        type="text/css" rel="stylesheet" />
  <script 
        src="//www.google.com/uds/api?file=uds.js&v=1.0&key=" 
        type="text/javascript"> </script>
  <script language="Javascript" type="text/javascript">
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      // These allow you to customize what appears in the search results               
      var localSearch = new GlocalSearch();                                     
      searchControl.addSearcher(localSearch);                                   
      searchControl.addSearcher(new GwebSearch());                              
      searchControl.addSearcher(new GvideoSearch());                            
      searchControl.addSearcher(new GblogSearch());                             

      // Tell Google your location to base searches around                      
      localSearch.setCenterPoint("Dallas, TX"); 

      // "Draw" the control on the HTML form
      searchControl.draw(document.getElementById("searchcontrol"));
    }
  </script>
 </head>

 <body onload="OnLoad()">
  <div id="searchcontrol" />
 </body>
</html>

太字のテキストは必ず、Google から提供された自分のデベロッパー・キーに置き換えてください。このページをロードすると、図 3 のようなフォームが表示されます。

図 3. Google の最も単純な検索フォーム
図 3. Google の最も単純な検索フォーム
図 3. Google の最も単純な検索フォーム

これだけのことですが、このシンプルなコントロールの背後には Google の力が結集されています。

検索を実行する

検索語を入力し、Search をクリックして Google を実行に移します。たちまち図 4 に示す検索結果がポップアップ表示されるはずです。

図 4. Google の検索結果
図 4. Google の検索結果
図 4. Google の検索結果

事前検索を追加する

検索を実行すると、ビデオ、ブログ、そして検索結果のおかげでページの見映えは一変して良くなります。そこで、事前検索を追加するという方法が考えられます。つまり、検索語を定義して、ユーザーがページを初めてロードすると、その検索語の検索結果が表示されるようにするということです。事前検索は、リスト 2 の太字の行を JavaScript に追加するだけで追加できます。

リスト 2. 事前検索語の追加
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      // These allow you to customize what appears in the search results
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());

      // Tell Google your location to base searches around
      localSearch.setCenterPoint("Dallas, TX"); 

      // "Draw" the control on the HTML form
      searchControl.draw(document.getElementById("searchcontrol"));

      searchControl.execute("Christmas Eve");
    }

当然のことながら、ページがロードされたときの表示は、コードに挿入する初期検索語を変更することによってカスタマイズできます。

JavaScript の概要

話を先に進める前に、上記の基本コマンドの実行内容を簡単に説明しておきます。まず、リスト 3 に示すように GSearchControl が新規に作成されています。これは、あらゆる検索を実行できる構文です。

リスト 3. 新規 GSearchControl の作成
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      ...
    }

コードは次に、GlocalSearch を使用して新規ローカル検索をセットアップしています。GlocalSearch は特殊な Google 構文で、特定のロケーションを基準にした検索を実行するためのものです。リスト 4 に、ローカル検索を示します。

リスト 4. 新規ローカル検索のセットアップ
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      // These allow you to customize what appears in the search results
      var localSearch = new GlocalSearch();
      ...                             

      // Tell Google your location to base searches around
      localSearch.setCenterPoint("Dallas, TX"); 

      ...
    }

呼び出すオブジェクトとメソッドがわかれば、すべては一目瞭然です。リスト 4 のコードは、まず新規ローカル・サーチャーを作成し、それから検索の中心点を設定しています。

次のリスト 5 では、複数の行で検索コントロールに実行させる検索タイプをそれぞれ指示しています。

リスト 5. 許可する検索タイプ
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      // These allow you to customize what appears in the search results
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());

      // Tell Google your location to base searches around
      localSearch.setCenterPoint("Dallas, TX"); 

      ...
    }

上記の検索タイプについて、以下に簡単に説明します。

  • GwebSearch: Web を検索するオブジェクト。Google で最もよく知られたオブジェクトです。
  • GvideoSearch: 検索語に関連するビデオを検索するオブジェクトです。
  • GblogSearch: このオブジェクトは、他の Web コンテンツ・タイプとは多少異なる構造とタグを持つブログの検索を専門とします。

特定の検索を事前ロードする方法についてはすでに説明したので、残るはリスト 6 の draw() メソッド呼び出しの説明だけです。この呼び出しは HTML 内の DOM 要素に対して行います (DOM での更新機能については、「参考文献」に記載したこの連載の以前の記事を参照してください)。この呼び出しによって、すぐに使用できる状態のコンロトールが魔法の如くフォームに表示されます。

リスト 6. 検索コントロールの描画
    function OnLoad() {
      // Create the Google search control
      var searchControl = new GSearchControl();

      // These allow you to customize what appears in the search results
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());

      // Tell Google your location to base searches around
      localSearch.setCenterPoint("Dallas, TX"); 

      // "Draw" the control on the HTML form
      searchControl.draw(document.getElementById("searchcontrol"));

      searchControl.execute("Christmas Eve");
    }

ところで Ajax の出番は?

実は、この単純な検索ボックスのどこで非同期が行われるのかは簡単にはわかりません。独自の Web アプリケーションに Google 検索ボックスを組み込めるのは確かに素晴らしいことですが、この記事はあくまでも Google 検索ではなく Ajax アプリケーションについての連載です。それでは、Ajax の話題はどこに行ってしまったのでしょう。

検索語を入力して Search ボタンをクリックすると、非常に Ajax 的な応答に気づくはずです。つまり、ページがリロードされずに検索結果が表示されます。表示コンテンツの変更にページのリロードが伴わないのは、大抵の Ajax アプリケーションの特徴です。したがって、通常の要求/応答モデルの域を超えた何かが行われているのは確実ですが、XMLHttpRequest の存在が見当たりません。また、今までの一連の記事で学んできた request オブジェクトは一体どこにあるのでしょうか。getElementById() メソッド以外のどこで DOM とページの操作が行われているのでしょうか。実は、HTML に含まれる 2 つの行にすべてがラップされているのです。

Google による JavaScript の処理

まだあまり説明していませんでしたが、注目すべき最初の行はリスト 7 に示す行です。

リスト 7. 極めて重要な JavaScript ファイル
<script 
    src="//www.google.com/uds/api?file=uds.js
&v=1.0&key=
[YOUR GOOGLE KEY]" 
    type="text/javascript"> </script>

上記の構文にはとりたてて変わったところはありませんが、ここで重要な点は、検索ボックスの動作に必要なすべての JavaScript が含まれる uds.js というファイルを Google がホストしていることです。これは本当の意味での他人のコードの使用であり、さらにアプリケーションが使用するコードをサード・パーティーにホストさせてさえいます。これは非常に重要な点です。なぜなら、Google が正常な状態の維持とメンテナンスを受け持ち、そのメリットは会社が JavaScript ファイルをアップデートしたときに自動的に反映されるためです。Google が予告なしに API を変更することはないため、JavaScript ファイルが変更されたとしてもコードはそのまま機能します。

GSearchControl オブジェクト

表舞台に出てこないもう 1 つのものは、onLoad() JavaScript 関数で作成される GSearchControl オブジェクトのコードです。このオブジェクトはリスト 8 のコードを呼び出すだけで作成することができます。

リスト 8. GSearchControl オブジェクトの作成
// Create the Google search control
var searchControl = new GSearchControl();

必要な HTML もかなり平凡なもので、リスト 9 に示すように JavaScript が参照できる ID を持つ単なる div タグです。

リスト 9. 検索コントロールの作成に必要な単純な HTML
<div id="searchcontrol" />

ただし、ここでもまた、舞台裏では Google のコードが活躍しています。コードは新しいテキスト・ボックス、アイコン画像、そして JavaScript 関数を呼び出すボタンなどの作成を Google の JavaScript でも行うため、 あらゆる種類の振る舞いが無料で手に入ります。基本的な仕組みは理解する必要がありますが、このコードをそのまま使用して、後はアプリケーションの残りの部分に取り組めるというのは便利です。

自分で作成するコード以上の意味を持つ Ajax

このように、Ajax アプリケーションとは XmlHttpRequest を使用することだけではなく、Web アプリケーションに取り組む方法であり、そして非同期に基づいています。Ajax 固有のコードを一切作成しなかったとしても、Ajax アプリケーションを作成したことになります。ありがたいことに、Google がほとんどの作業を引き受けてくれるので、後はその利益を私たちが得るだけです。

Google Ajax Search API のさらなる拡張

上記のステップを独自のアプリケーションに取り入れて適合させるかどうかはあなた次第です。最も単純なレベルとしては、div を Web ページに組み入れてリスト 1 の JavaScript を追加するだけで Google 検索を使用できます。

ただし、お楽しみはそれだけではありません。この特定のオプションとコントロールのセットに縛られる必要はないからです。Web の検索結果、ブログの検索結果、そしてビデオの検索結果をいろいろと試してみて、適当なものがあれば Web アプリケーションに統合してください。例えば、特定タイプの検索結果に焦点を絞った検索コントロールを複数提供するのも一案です。Google 検索コントロールを span 要素に組み込んで、div の片隅ではなく残りのアプリケーション・コンテンツの真ん中に配置するということも考えられます。いずれにしても、Google に合わせてアプリケーションを変更するのではなく、自分なりの必要に合わせてGoogle 検索を変更することが肝心です。

※訳注: 列挙されている書籍の日本語版の URL はそれぞれ下記のとおりです。

Head Rush Ajax: http://www.oreilly.co.jp/books/4873113105/

Java 5.0 Tiger: http://www.oreilly.co.jp/books/4873112141/

Java & XML: http://www.oreilly.co.jp/books/4873110823/

※訳注: Java 5.0 Tiger は、原文は、Java 1.5 Tiger となっていますが、リンク先も Java 5.0 Tiger なので、日本語では Java 5.0 Tiger としてあります。

まとめ

この記事で学んだことを土台にして、Google 検索ボックスや Google API のその他の利用法を独自の Ajax アプリケーションに追加していくのは難しくはないはずです。ですがそれより重要なことは、あなたには今、一般的な公開 API をどのように使うべきか大体の察しがついていることです。例えば、Amazon.com が提供している公開 API では、Google を使って実行する Web 検索と同じような検索を Amazon ストアの本やその他の商品で実行できます。自分好みの公開 API を早速探して、自分自身のコーディング・スキルの枠を超えた世界に踏み出してください。事実、サイトにごく簡単に組み込めるものには、Google、Amazon.com、Flickr などの他にもたくさんあります。

Google の使い方を理解することは重要です (Google が提供する検索アルゴリズムと莫大なデータ・ストアのため)。その一方で、どのような公開 API でもその使い方を学ぶことは、理解すること以上に重要です。また、これからはアプリケーションを自分のコーディング・スキルの結集だとする見方を変えて、各種データへの単なるゲートウェイとしてアプリケーションを考えるようにしなければなりません。データは Google、Amazon.com、del.icio.us、あるいは他の場所のサーバーに保管されているかもしれません。そのデータを独自のビジネスやプロジェクトのアプリケーションで利用すれば、自分のコーディング・スキルをはるかに超えた極めて強力で堅牢なソリューションになります。

自分で作成したコードだけに捕われずに、あらゆる場所のデータを使って大々的なアプリケーションを作成してください。この連載の次回の記事では、今度はデータ・フォーマットなどの技術的な問題を取り上げる予定です。


ダウンロード可能なリソース


関連トピック

  • The open source definition: Open Source Initiative から情報を入手してください。
  • Google Ajax Search API Developer Guide: この資料で、Google キーと Ajax Search API を使用するにあたってのさまざまな側面を調べてください。
  • XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM レッドブックについては、developerWorks XML ゾーンを参照してください。
  • developerWorks Web development ゾーン: Web 2.0、Ajax、ウィキ、PHP、マッシュアップ、そしてその他の Web プロジェクトを専門に扱った記事とチュートリアルでサイトの開発手腕を磨いてください。
  • developerWorks Open source ゾーン: オープン・ソースの開発およびインプリメンテーションに関する資料が用意されています。
  • xml.com: XML のすべてに関する分かりやすいオンライン資料の 1 つです。XML プログラマーとしての経験がまだ浅い方は、ここから XML の学習を始めてください。
  • 「Build dynamic Java applications」(Philip McCarthy 著、developerWorks、2005年9月): Java パースペクティブを使って、サーバー・サイドからの視点で Ajax を説明しています。
  • 「Java object serialization for Ajax」(Philip McCarthy 著、developerWorks、2005年10月): Java パースペクティブから、ネットワークでオブジェクトを送信する方法、および Ajax を操作する方法を説明しています。
  • 「Call SOAP Web services with Ajax」(James Snell 著、developerWorks、2005年10月): Ajax を既存の SOAP ベースの Web サービスに統合する方法を説明した、かなり高度な記事です。
  • World Wide Web Consortium の DOM ホーム・ページ: すべての DOM 関連情報は、ここから探してください。
  • The DOM Level 3 Core Specification: 使用可能なタイプとプロパティーから DOM の使用方法まで、各種言語でコア Document Object Model を定義しています。
  • DOM 用 ECMAScript 言語バインディング: JavaScript プログラマーが独自のコードから DOM を使用する際には、この仕様が大変役立ちます。
  • 「Ajax: A new approach to Web applications」(Jesse James Garrett 著、Adaptive Path、2005年2月): Ajax の名前を作り出した記事です。すべての Ajax 開発者の必読書です。
  • Google Ajax Search API ホーム・ページ: Google 検索を Ajax アプリケーションに追加するプロセスは、ここから開始してください。
  • 『Head Rush Ajax ―学びながら読むAjax入門』(Brett McLaughlin 著、O'Reilly Media、2006年): ここに記載された Head First スタイルのアイデアを吸収してください。
  • 『Java & XML 第2版』(Brett McLaughlin 著、O'Reilly Media, Inc.、2001年):XHTML および XML 変換についての著者の考察を読んでください。
  • 『JavaScript』(David Flanagan 著、O'Reilly Media, Inc.、2001年): JavaScript と動的 Web ページの操作について広範に説明しています。次回の改版では、Ajax についての 2 つの章が追加されます。
  • 『Head First HTML with CSS & XHTML』(Elizabeth Freeman、Eric Freeman 共著、O'Reilly Media, Inc.、2005年): 標準 HTML および XHTML と、CSS の HTML への適用方法について詳しく説明しています。
  • IBM トライアル・ソフトウェア: developerWorks から直接ダウンロードできるソフトウェアで、次の開発プロジェクトを構築してください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, XML, Open source
ArticleID=250290
ArticleTitle=Ajax をマスターする: 第 9 回 Google Ajax Search API を使う
publish-date=01232007