パーフェクトJavaScript勉強メモ(20)

p445 Google Static Maps APIは、画像タグのURLに仕込むことで、画像を得られる

マイマップ

• p446 インタラクティブに地図上にマーカや図形を配置できるWebサービス
• 作成したマイマップに一意のURLが決まるので任意のHTMLからifarmeで参照可能
• データをプロットして公開する場合は採用を検討

Google Maps APIの概要

• p447 JavaScript用のAPIを提供

Google Maps APIの簡単な例

イベント

• p448 Google Mapsプログラミングの基本は、イベントに処理を埋め込むこと
• イベント一覧
• p450 クラス風のイベント処理例。ECMAScript5のbindを利用

Geolocation APIとGeocoding API

• p451 端末の位置情報を取得するGeolocation APIと、位置情報から住所を引いたりその逆をするGeocoding APIの利用例

Flickr Web APIの利用

• p454 Flickr APIはJSONPに対応
• curlによる動作例
• JavaScriptではAPIキーが公開されてしまう。経済的なリスクはないので、書籍は公開しても構わないというスタンス

FlickrのWeb APIの利用例

• p455 jQueryを利用したJSONP呼び出しの例
• FlickrはOAuthと似た認可の機構を持っている。これを標準化したのがOAuth
• 図19.6のユーザフローは未実装なので、FlickrのWeb APIはクライアントサイドJavaScriptからの利用は想定されていない

検索API

• 検索したタイミングでたまたまツイートされた内容の結果が返される。網羅されるわけではない
• リクエスト用のURLに利用可能なパラメータを渡せば実行できる
• p457 クライアントサイドJavaScriptで実行するにはクロスドメインの問題がある。JSONPが利用可能

REST API

• p458 TwitterのREST APIはまさしくRESTfulな思想をベースにしている
• 決められたリソースに、バージョンやフォーマット、パラメータを指定して呼び出す
• JSONPに対応しており、callbackで関数名をパラメータで渡す

Twitter JS API @anywhere

• ツイートを投稿するなどの認証が必要な処理を@anywhereなどのライブラリが担ってくれる
• @anywhereの利用手順
• p459 follow meリンクを表示する例

Twitter Widget

• p460 Twitter Widgetは、HTMLに埋め込むコード片
• 2行もあれば、TweetボタンとTweet数をWebページに埋め込むことができる

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つの大別と使い方の概要

Facebookのプラグイン

• p464 ウィジェット型のAPI
• OAuthユーザエージェントフローによる権限移譲やクロスオリジン制限の回避コードが隠ぺい
• 先進的なウィジェット
• 既定のWebページにアクセスして必要な情報を入力すると、ウィジェットコードが得られる。それをHTMLに貼り付ければ動作する

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にアクセスする例