20章 Web APIの実例
p439 Web APIのカテゴリ
Google Maps API
マイマップ
Google Maps APIの概要
- p447 JavaScript用のAPIを提供
Google Maps APIの簡単な例
イベント
- p448 Google Mapsプログラミングの基本は、イベントに処理を埋め込むこと
- イベント一覧
- p450 クラス風のイベント処理例。ECMAScript5のbindを利用
Yahoo! Flickr
検索API
- 検索したタイミングでたまたまツイートされた内容の結果が返される。網羅されるわけではない
- リクエスト用のURLに利用可能なパラメータを渡せば実行できる
- p457 クライアントサイドJavaScriptで実行するにはクロスドメインの問題がある。JSONPが利用可能
Facebookアプリの変遷
- まずは、REST APIをサーバサイドから呼ぶか、FBMLという独自のマークアップ言語を使う形態のいずれかだった
- FBMLはPHPやJSPと同じレイヤーの技術で、Facebookサーバ上で解釈される独自のマークアップ言語
- Facebookの中に(iframeなどで)埋め込む型
- p461 変遷から、Graph APIをサーバサイドから呼び出す、クライアントサイドからJavaScriptAPIを利用、クライアントサイドでプラグインを利用の3形態に変わった
- p462 Graph APIはRESTfulなWeb APIで、どんどん機能が増えている
- Graph APIはクライアントサイドJavaScriptからの利用は想定されておらず、JavaScriptAPI経由で利用する。クライアントサイドJavaScriptが解釈する独自のマークアップ言語XFBMLも併用可能
- XFBMLとJavaScriptAPIを隠ぺいしたのがプラグイン(Social Plugin)
- Facebookのプラグインの代表例がLikeボタン（いいね！ボタン）
- Twitterのウィジェットと同等
- 自由度は低いが、簡単に配置できる
FacebookのJavaScript API
- p463 JavaScript APIの紹介。4つの大別と使い方の概要
OpenSocial
- Facebookに対抗するためにGoogleを中心に始まったオープンなWeb API規格
- p465 書籍の時点ではOpenSocial v2.0が作業中
- RESTful API(JSON-RPC APIを含む)とJavaScript API(ガジェットAPIを含む)の２つに大別できる
- クライアントサイドJavaScriptからOpenSocialを使うには、JavaScript APIを使うのが通常
OpenSocialの基本アーキテクチャ
- OpenSocialの原型はiGoogle
- コンテナとガジェットがベース
- iframe型とプロクシ型
- p466 iframe型はサーバサイドを想定
- プロクシ型はJavaScript APIの利用を想定
- ガジェットをホストするのはサードパーティサーバだが、Webブラウザから見るとコンテナが仲介するので、クライアントサイドJavaのクロスオリジン制限は発生しない
- Facebook Connectの後追いでGoogle Friend Connectが登場
- Facebook Connectは、OAuthユーザエージェントフローやクロスオリジン通信を隠ぺいするSocial Pluginのベース技術。その言語をウィジェットAPIが隠ぺい
- Open Socialも同様の方向へ進む可能性がある
- OpenSocialのAPI
- OpenSocialではガジェットという形態でコンテナ上に表示。ガジェットの実態はXMLで記述する定義ファイル
- p467 ガジェットは通常のHTMLで構成(ただしbody要素だけ)、CSS、JavaScript
- 通信を中継するコンテナは、XMLからHTMLなどを取り出して、このHTMLを埋め込んだHTMLをWebブラウザに返す
- このJavaScriptはクライアントサイドJavaScriptで、OpenSocialのJavaScript APIを使って記述する
- OpenSocialコンテナとやりとりするソーシャルグラフ系APIやガジェットUIを操作するUI系APIなどがある
- Apache Shindig
- オープンソースのOpenSocialコンテナ http://shindig.apache.org/
- ShindigのHTMLファイルをShindigが動作しているサーバ上に配置して呼び出すと、ガジェットを表示する
- p468 シンプルな例
- p469 他のWeb APIの呼び出し
- OpenSocialガジェット内のクライアントサイドJavaScriptからそのコンテナへのアクセスはクロスオリジン制限は問題ない
- さらに他のWeb APIを利用する場合、クライアントサイドJavaScriptから直接呼ぶとクロスオリジン制限に引っかかるので、OpenSocialコンテナがプロクシ中継して回避する。OAuthの権限移譲も可能。書籍の段階ではOAuth2.0へは未対応
- Twitter APIにアクセスする例
OpenSocialスペックの読み方とActivity
- p470 データ構造から目を通すとよい
- データ構造は、オブジェクトIDやユーザIDといった基本的なデータの定義であるCore Data Specと、OpenSocial固有のデータ構造の定義であるSocial Data Specの二つに分かれる
- Social Data Specを読むと、OpenSocialで何ができるかが把握できる
- v1.1からv2.0への大きな変化は、ActivityからActivity Streamsへの変化
- 前者はタイムスタンプ付きテキスト
- 後者は人の活動情報を構造化できる。actor(誰が),verb(何をした),object(何に対して),target(結果,objectはどうなった)を基本要素として持つ
- 鳥の記録を、EvernoteやTwitterから抜き出して、マイマップに自動登録する方法を調査
- OpenSocial、Apache Shindigなどを調査。散歩リンクの再生機能の提供をこの辺の技術でできないか
