読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

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

前へ | 次へ

20章 Web APIの実例

p439 Web APIのカテゴリ

p440 Google Translate API

  • Googleの翻訳用API
  • 補足:現在は有料になっている

Google Maps API

p445 Google Static Maps APIは、画像タグのURLに仕込むことで、画像を得られる
マイマップ
  • p446 インタラクティブに地図上にマーカや図形を配置できるWebサービス
  • 作成したマイマップに一意のURLが決まるので任意のHTMLからifarmeで参照可能
  • データをプロットして公開する場合は採用を検討
Google Maps APIの概要
Google Maps APIの簡単な例
イベント
  • p448 Google Mapsプログラミングの基本は、イベントに処理を埋め込むこと
  • イベント一覧
  • p450 クラス風のイベント処理例。ECMAScript5のbindを利用
Geolocation APIとGeocoding API
  • p451 端末の位置情報を取得するGeolocation APIと、位置情報から住所を引いたりその逆をするGeocoding APIの利用例

Yahoo! Flickr

  • p452 写真共有サービス
  • Web APIはHTTP APIのみを提供し、REST,XML-RPC,SOAPの3種類を提供
  • 様々な言語APIが存在
  • FlickrREST APIは実際にはRPCを基軸にしている
  • p453 エンドポイントのURLに投げるリクエストのパラメータにmethodパラメータとして振る舞いを与える
Flickr Web APIの利用
  • p454 Flickr APIJSONPに対応
  • curlによる動作例
  • JavaScriptではAPIキーが公開されてしまう。経済的なリスクはないので、書籍は公開しても構わないというスタンス
FlickrのWeb APIの利用例
  • p455 jQueryを利用したJSONP呼び出しの例
  • FlickrはOAuthと似た認可の機構を持っている。これを標準化したのがOAuth
  • 図19.6のユーザフローは未実装なので、FlickrのWeb APIはクライアントサイドJavaScriptからの利用は想定されていない

Twitter

検索API
  • 検索したタイミングでたまたまツイートされた内容の結果が返される。網羅されるわけではない
  • リクエスト用のURLに利用可能なパラメータを渡せば実行できる
  • p457 クライアントサイドJavaScriptで実行するにはクロスドメインの問題がある。JSONPが利用可能
REST API
  • p458 TwitterREST APIはまさしくRESTfulな思想をベースにしている
  • 決められたリソースに、バージョンやフォーマット、パラメータを指定して呼び出す
  • JSONPに対応しており、callbackで関数名をパラメータで渡す
Twitter JS API @anywhere
  • ツイートを投稿するなどの認証が必要な処理を@anywhereなどのライブラリが担ってくれる
  • @anywhereの利用手順
  • p459 follow meリンクを表示する例
Twitter Widget
  • p460 Twitter Widgetは、HTMLに埋め込むコード片
  • 2行もあれば、TweetボタンとTweet数をWebページに埋め込むことができる

Facebook

Facebookアプリの変遷
  • まずは、REST APIをサーバサイドから呼ぶか、FBMLという独自のマークアップ言語を使う形態のいずれかだった
  • FBMLはPHPJSPと同じレイヤーの技術で、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ウィジェットと同等
  • 自由度は低いが、簡単に配置できる
FacebookJavaScript API
  • p463 JavaScript APIの紹介。4つの大別と使い方の概要
Facebookプラグイン
  • p464 ウィジェット型のAPI
  • OAuthユーザエージェントフローによる権限移譲やクロスオリジン制限の回避コードが隠ぺい
  • 先進的なウィジェット
  • 既定のWebページにアクセスして必要な情報を入力すると、ウィジェットコードが得られる。それをHTMLに貼り付ければ動作する

OpenSocial

OpenSocialの基本アーキテクチャ

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はどうなった)を基本要素として持つ
  • 鳥の記録を、EvernoteTwitterから抜き出して、マイマップに自動登録する方法を調査
  • OpenSocialApache Shindigなどを調査。散歩リンクの再生機能の提供をこの辺の技術でできないか

前へ | 次へ