前回は、アプリとシステムの間の境界 通信規約であるWeb APIについてまとめた。ここでは、サードパーティアプリとエコシステムを構築する Web APIの実例について解説する。
１ Web APIのカテゴリ
代表的なカテゴリをProgrammableWebから以下に引用する。
- Advertising：広告。Googleの1強
- Answers：ソーシャルQ&A。Yahoo AnswersをStack Overflow、Quoraなどが追う
- Blog Search：ブログサーチ。Technorati以降はやや下火
- Blogging：ブログ。Twitterに押されぎみでやや下火
- Bookmarks：ソーシャルブックマーク。del.icio.us以降はやや下火
- Calendar：カレンダー。Google Calendarの1強
- Chat：チャット。Twitter、Facebookに押されぎみでやや下火
- Database：データベース。NoSQLからRDBのCRUD操作のREST化など
- Dictionary：辞書
- Email：Webメール
- Enterprise：salesforce.comの1強
- Events：地域イベントの共有。EventfulとUpcoming.orgの2強
- Feeds：フィード
- File Sharing：オンラインファイル共有
- Financial：株価情報、外貨レートなど
- Food：レストランサーチなど
- Games：ゲーム。SecondLife以降はやや下火
- Internet：事実上、その他カテゴリ。Amazon EC2など
- Job Search：転職支援
- Mapping：地図。Google Mapsの1強
- Media Management：BBCのアーカイブの1強
- Messaging：メッセージング。411Syncなど
- Music：Last.fmの1強
- News：DiggやRedditなど
- Office：Google Docs、SlideShare、Zohoなど
- Payment：PayPalの1強
- Photos：写真共有。Flickrの1強をTwitPic、Smugmug、Instagramなどが追う
- Project Management：プロジェクト管理。Basecampなど
- Real Estate：家探しサービス。Zillowなど
- Recommendations：おすすめサービス。Yelpなど
- Reference：GeoNamesやWikipediaなど
- Search：検索。Google、Yahoo!、Bingの3強
- Shipping：FedExなど配送サービス
- Shopping：オンラインショッピング。最大手Amazon、eBayの2強
- Social：Twitter、Facebook、Foursquare、LinkedIn、MySpaceなど
- Storage：オンラインストレージ。最大手Amazon S3に新興のDropboxなど
- Telephony：インターネット電話。Twilio、Skypeなど
- Tools：Google App Engineなど
- Utility：Google Translate、Evernoteなど
- Video：YouTubeの1強
- Weather：天気予報
２ Google Translate API
Google Translate APIはテキストを送って翻訳テキストが返ってくるWeb APIである。残念ながらサービスは終了予定だが、動作が単純なためWeb APIの本質だけに注目できる。
準備
Google Translate APIを使うにはGoogleアカウントが必要である（無料）。Googleアカウントを取得してGoogleのサイトにログインし、以下のページにアクセスするとGoogleが提供するWeb APIの管理画面になる。
https://code.google.com/apis/console/
管理画面でGoogle Translate APIサービスを有効にするとAPIキーを受け取れる。APIキーは1日のWeb APIの呼び出し回数の上限を決めるためにある。
動作概要
Google Translate APIの基本は次のURLにHTTPのリクエストを投げてJSON形式のレスポンスを受け取る動作である。
https://www.googleapis.com/language/translate/v2?クエリパラメータ
URLのパスは決まっているのでリクエスト時の可変部分はクエリパラメータのみである。使えるクエリパラメータ名はWeb APIの規定で決まっている。最低限以下の4つを知っていれば使える。
- q：必須。翻訳したい文字列を指定
- key：必須。APIキーを指定
- source：翻訳の対象列の言語を指定（指定しない場合自動判定）
- target：必須。翻訳先の言語を指定
- callback：JSONP用のコールバック関数を指定（後述）
Web APIの利用コード
JSONPを使うコード例
<script type=”text/javascript”>// <![CDATA[
// JSONPのコールバック関数 function translateText(response) { alert(response.data.translations[0].translatedText); // 翻訳結果を表示 } function doTranslate() { var newScript = document.createElement(‘script’); newScript.type = ‘text/javascript'; var sourceText = encodeURIComponent(document.getElementById(“sourceText”).value); var source = ‘https://www.googleapis.com/language/translate/v2?key=_YOUR_APIKEY_&source=en&target=ja&callback=translateText&q=’ + sourceText; newScripsrc = source; // JSONP呼び出しのためにscriptタグの動的生成 document.getElementsByTagName(‘head’)[0].appendChild(newScript); }
// ]]></script><input id=”sourceText” type=”text” />
<div onclick=”doTranslate()”>翻訳</div>
JSONP呼び出しコード（scriptタグの動的生成など）を隠蔽するJavaScriptライブラリがある。jQueryはそのようなJavaScriptライブラリの1つである。また、Google Translate APIはJavaScript用の言語APIも提供している。
ウィジェット（Google Translate Element）
Google Translate ElementはGoogleの分類ではWeb Elementsという枠組みで提供されている。HTTP API、言語API、ウィジェットAPIがある。
３ Google Maps API
Google MapsはWeb 2.0やAJAXやマッシュアップを代表するWebアプリである。ここではGoogle JavaScript Maps API（以降Google Maps APIと呼ぶ）について説明する。その説明の前に以下の2つを紹介する。この2つの存在を知らないと、Google Maps APIを使って同じ機能を再発明しがちだからである。
- Google Static Maps API
- マイマップ
Google Static Maps API
Google Static Maps APIは地図の画像のURLの規則を決めたものである。位置やサイズをURLクエリパラメータで指定する。JavaScriptでimgタグを生成すれば動的な地図を生成できる。
マイマップ
マイマップはインタラクティブに地図上にマーカーや図形を配置できるWebアプリである。作成したマイマップに一意なURLが決まるため、任意のHTMLからiframeで参照可能である。
Google Maps APIの概要
Google Maps APIはJavaScript用の言語APIのみを提供し、HTTP APIの提供はない。地図用語は以下の2つ。
- latitude：緯度
- longitude：経度
Google Maps APIの簡単な例
JavaScriptコードの実質はgoogle.maps.Mapのインスタンスオブジェクトをnew式で生成している1行である。他の行はnew式に渡す引数の構築をしているだけである。new式の結果を変数mapに代入しているが代入は必須ではない。Google Maps APIを使って自分でコードを書くと、次のような発展性が得られる。
- イベントを拾う
- コントロール、マーカー、HTML要素（DOM要素）などの表示
イベント
Google Mapsプログラミングの基本は、オブジェクトにイベントハンドラをセットしてイベントに応じた処理を書くことである。Google Mapsのオブジェクトには次のようなイベントがある。
- click
- dblclick
- mouseup
- mousedown
- mouseover
- mouseout
イベント処理の基本型はaddListenerメソッドを使ってイベントとイベントハンドラを結びつけるコードである。イベントハンドラ内では2つの処理をしている。1つはgoogle.maps.Markerインスタンスの生成である。もう1つはマーカーのclickイベントにイベントハンドラをセットして、イベントハンドラ内でマーカーオブジェクトにsetMapメソッドを呼ぶ。
Geolocation APIとGeocoding API
Google Maps APIの応用例としてGeolocation APIとGeocoding APIを組み合わせた例を紹介する。Geolocation APIとは端末の位置情報を取得するAPIである。例えばGPS対応した端末で、かつGeolocation対応したWebブラウザがあればGPSで位置を取得できる。Geocodingとは位置情報（緯度経度）から住所を引く、あるいは逆に住所から位置情報を引けるWebサービスである。
４ Yahoo! Flickr
Flickrは写真共有サービスである。今はYahoo!に買収されている。FlickrのWeb APIのみを提供する。HTTP APIはREST、XML-RPC、SOAPの３種類を提供する。言語APIはサードパーティ任せだが、メジャーなWeb APIなので多くのプログラミング言語用のAPIが存在する。
Flickr Web APIの利用
FlickrのWeb APIを利用するにはAPIキーが必要である。APIキーを取得するにはYahoo! IDが必要（無料）。Flickr APIはJSONPに対応している。
FlickrのWeb APIの利用例
Flickr APIを使いキーワードから写真を検索して結果を表示する。レスポンスの形式はFlickrのリファレンス文書を参照する。なおFlickrのWeb APIの中には認証が必要なAPIがある。
５ Twitter
Web APIの視点で見るとTwitterは比較的単純なサービスを提供する。いわゆるTweet（つぶやき）のメッセージの取得や更新、およびユーザ間のフォロー関係で構築されるソーシャルグラフの参照が主な操作対象である。Twitter APIはREST APIとStreaming APIの2つに分かれている。ここではREST APIを紹介する。
検索API
検索APIはパラメータで指定した検索文字列を含むTweetを返す。リクエストURLの規則のうち可変の部分を{parameter}と表記すると、検索APIのリクエストURLは次のようになる。
http://search.twitter.com/search.{format}?q={検索文字列}&{その他のパラメータ}
formatの部分はjsonかatomの文字列で置き換える。サーバサイドからTwitter APIを使うのであれば、どう実装するかは開発者の自由である。一方、クライアントサイドJavaScriptにはクロスオリジン制限があるため、JSONPを使う。
REST API
Twitter APIはTweet（つぶやき）の表示、更新、ユーザへの通知、ユーザのフォロー関係から形成されるソーシャルグラフの取得、あるいはTweetのトレンド情報などを提供する。
Twitter JS API @anywhere
OAuthユーザエージェントフローを隠蔽した@anywhereと呼ばれるAPIがある。@anywhereを使うにはAPIキーの取得が必要である。@anywhereの基本はtwttrオブジェクトにanywhereメソッドを呼び出し、引数に渡すコールバック関数に処理を書く。
Twitter Widget
Twitter Widgetの実体はクライアントサイドで解釈されるカスタムタグである。HTML上にコード片をペーストするだけで、JavaScriptのコード（クロスオリジン制限の回避とユーザ認証を含めて）すべてが隠蔽される。
６ Facebook
Facebookアプリの変遷
FacebookのAPIは進化が激しく、現在のFacebookアプリの形態は次の3形態に変わっている。
- Graph APIをサーバサイドから呼び出し（facebookコンテナ内にはiframeで表示）
- クライアントサイド（Webブラウザ）からJavaScript APIを利用
- クライアントサイドでプラグイン（Social Plugins）を利用
FacebookのJavaScript API
JavaScript APIは次の4つに大別できる。
- Graph APIのラッパー系API（FB.apiメソッド経由で呼び出す）
- XFBML系API（XFBMLとはクライアントサイドJavaScriptが解釈するマークアップ言語）
- イベントハンドラ系API
- その他
FacebookのJavaScript APIを使うには、Facebookにアプリを登録してアプリIDを取得する必要がある（無料）。
Facebookのプラグイン
Facebookプラグインはウィジェット型のAPIである。内部的にOAuthユーザエージェントフローによる権限委譲やクロスオリジン制限の回避コードが隠蔽される。
７ OpenSocial
OpenSocialはFacebookに対抗するためGoogleを中心に始まったオープンなWeb API規格である。OpenSocialのAPIはいくつかの仕様に分かれているが、ここでは次の2つに大別する。
- RESTful API（JSON-RPC APIを含む）
- JavaScript API（ガジェットAPIを含む）
OpenSocialの基本アーキテクチャ
OpenSocialの基本アーキテクチャはコンテナとガジェットがベースになる。iframe型とプロクシ型と名付けると、プロクシ型はJavaScript APIの利用を想定した形態である。iframe型の説明はサーバサイドからのOpenSocial API呼び出しを想定することになるため省略する。
- Google Friend Connect：Facebook Connectを追いかける形でGoogle Friend Connectが登場した
- OpenSocialのAPI：OpenSocialではガジェットという形態でコンテナ上に表示される。ガジェットの実体はXMLで記述する定義ファイル。ガジェットの構成要素は通常のHTML（ただしbody要素だけを書く）、CSS、JavaScriptである
- Apache Shindig：オープンソースのOpenSocialコンテナ
- 他のWeb APIの呼び出し：gadgets.io.makeRequest関数はOAuthにも対応しているので権限委譲が必要なWeb APIも呼べる
最後に
Web APIの実例としてGoogle Translate API、Google Maps API、Yahoo! Flickr、Twitter、Facebook、OpenSocialを挙げた。最近のメジャーなWebアプリはWeb APIを提供することでサードパーティアプリとエコシステムを構築するのが1つの形である。代表的なカテゴリはProgrammableWebにまとめられているが、今までなかった新しいカテゴリが生まれてくる点にWebの可能性がある。
次回は、共通APIのCommonJS サーバサイドJavaScriptとNode.jsについて解説する。
 |
