レベル: 中級 Brett D. McLaughlin, Sr. (brett@newInstance.com), Author and Editor, O'Reilly Media, Inc.
2007年 1月 23日 非同期要求を行うということは、自分のサーバー・サイド・プログラムと対話するというだけの話ではありません。Google や Amazon が提供しているような公開 API と通信すれば、独自のスクリプトやサーバー・サイド・プログラムが提供する以上の機能を Web アプリケーションに追加することもできます。この記事では Brett McLaughlin が、Google で提供しているような公開 API との要求・応答方法を伝授します。
この連載ではこれまで、クライアント・サイドの 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 ページ
まず、Sign up for a Google AJAX Search API key リンクをクリックして、Google API を使用するためのサインアップ・ページを表示してください。いくつかの利用条件 (私が知る限り、いずれの条件もまったく害がありません) を受諾して、アプリケーションを実行する Web サイトの URL を入力します (図 2 を参照)。
図 2. Google Ajax Search API を使用するためのサインアップ
 |
どの URL を使えばいいか
Google で必要な URL は基本的に、該当サイトを実際に実行するドメインです。私のように独自のドメインを持っているのであれば、単に http://www.newinstance.com と入力できます (もちろん、私のドメインのところをご自分のドメインと置き換えてください)。これより限定的な URL が必要となるのは、サブドメインを使用しているサイト、あるいは大規模なドメイン内で特定のパスを使っているサイトの場合だけです。その場合は、例えば http://www.earthlink.net/~bmclaugh or http://brett.earthlink.net のような URL を使用します。このような特殊な場合を除き、Google に指定する URL はあまり限定しすぎないようにしてください。Web サイト全体にアクセスするためのルート URL を指定すれば、その URL 内のどこででも 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="http://www.google.com/uds/api?file=uds.js&v=1.0&key=
YOUR KEY HERE
"
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 の最も単純な検索フォーム
これだけのことですが、このシンプルなコントロールの背後には Google の力が結集されています。
検索を実行する
検索語を入力し、Search をクリックして Google を実行に移します。たちまち図 4 に示す検索結果がポップアップ表示されるはずです。
図 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="http://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 を理解するのはそれほど簡単ではありません。まず、uds.js JavaScript ファイルがローカルの設定を把握し、Google 固有のタスクを処理して Google キーを検証した後、他の 2 つのスクリプト、http://www.google.com/uds/js/locale/en/uistrings.js と http://www.google.com/uds/js/uds_compiled.js をロードします。興味があるなら実際にこの 2 つのファイルを引っ張り出してきて内容を調べることもできますが、拡張コードは難解で、フォーマットも複雑であることを覚悟してください。ほとんどの人にとっては、これらのファイルの使い方を知ることが目標であって、内容の詳細を行ごとに理解する必要はありません。
|
|
ただし、ここでもまた、舞台裏では 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、あるいは他の場所のサーバーに保管されているかもしれません。そのデータを独自のビジネスやプロジェクトのアプリケーションで利用すれば、自分のコーディング・スキルをはるかに超えた極めて強力で堅牢なソリューションになります。
自分で作成したコードだけに捕われずに、あらゆる場所のデータを使って大々的なアプリケーションを作成してください。この連載の次回の記事では、今度はデータ・フォーマットなどの技術的な問題を取り上げる予定です。
参考文献 学ぶために
製品や技術を入手するために
議論するために
著者について  | 
|  | Brett McLaughlin氏は、Logo (小さな三角形を覚えていますか?) の時代からコンピューターの仕事をしています。現在の専門は、JavaおよびJava関連のテクノロジーを使ったアプリケーション・インフラストラクチャーの構築です。ここ数年は、Nextel Communications and Allegiance Telecom, Inc. でこれらのインフラストラクチャーの実装に携わっています。Brett氏は、Javaサーブレットを使ってWebアプリケーション開発のための再利用可能なコンポーネント・アーキテクチャーを構築するJava ApacheプロジェクトTurbineの共同設立者の1人です。同氏はまた、オープン・ソースのEJBアプリケーション・サーバーであるEJBossプロジェクトと、オープン・ソースのXML Web公開エンジンであるCocoonにも貢献しています。Brettの連絡先は、brett@oreilly.com です。 |
記事の評価
|