OpenSocialを利用してガジェットを作ろう!

第6回 外部サービスの利用

この記事を読むのに必要な時間:およそ 4.5 分

gooホームが正式ローンチしました!

先週の5月21日,初の国産コンシューマ向けOpenSocialコンテナとして,gooホームがリニューアルを行いました。コンセプトは「ソーシャルウェブ・ポータル」。OpenSocialへの対応と共に,FriendFeedライクな外部サービスのインポート機能も備え,Twitterや del.icio.usなど,約30のサービスを取り込むことが出来ます。本連載筆者のひとりである北村英志氏が担当したサービスであることから,「はてブチェッカー」ガジェットもリニューアル当初からガジェットギャラリーに掲載されています。

OpenSocialへの対応の幅も広く,ドキュメントの充実度も合わせて,非常に注目すべきSNSです。ぜひこの機会にgooホームをお試しください。

今回のテーマは「マッシュアップ」

本連載の題材として取り上げている「はてブチェッカーガジェット」は,gooホームやmixiのユーザ情報やソーシャルグラフといった情報だけでなく, SNSの外部にある「はてなブックマーク」というサービスの情報を取り込んで表示しています。近年のWebの世界では,多くのWebサービスを利用して一つの新しいサービスを仕立てる,つまり「マッシュアップ」が盛んに行われています。はてブチェッカーガジェットが示しているように,OpenSocial はマッシュアッププラットフォームとしても最適な環境です。

今回は,外部サービスにアクセスを行うための手順を解説し,ガジェットを更にリッチにするための手法を手に入れることにしましょう。

外部サービスへのアクセスとは

OpenSocialガジェットにおいて,外部サービスを利用する動機として,以下のような目的が考えられます。

  • 外部サービスから得られるコンテンツを利用したい。
  • 外部サービスとして設置してあるデータベースを使って情報を記録しておきたい。

マッシュアップというキーワードに関しては,前者となることでしょう。インターネット上に数多く公開されているWebサービスのほぼ全てが対象となります。扱われるコンテンツは,飲食店や書籍といった情報など,最近ではあらゆるコンテンツを扱うことができるようになってきました。その形態も,文字情報の他に,画像や動画なども利用可能ですので,「どのサービスを組み合わせるか」といったセンスがポイントとなるでしょう。

それに対して後者の場合は,ユーザがガジェットを使って多くの情報を共有するためのバックエンドサーバとして外部サービスを利用する目的となります。これには,Google AppEngineやAmazon EC2など,俗に言うクラウドサービスを利用することによって,ガジェットのユーザ数の増加や利用状況の増加に伴う情報量やネットワーク転送量の増大に対応することができるようになるでしょう。もちろん,任意のWebアプリケーションを任意のサーバにて運用し,それをガジェットのバックエンドサーバとして利用することも選択できます。

このどちらも場合も,OpenSocialが想定する外部サービスは,基本的にRESTによるインタフェースを備えたWebサービスが対象となります。つまり,外部サービスへのアクセスには,現在のWeb標準技術の組み合わせが採用されるということです。特に OpenSocialでは,外部サービスへのアクセスは主に以下の構成要素で成り立っています。

  • リクエスト時
    • URLによって外部サービスへのアクセス先を特定する。
    • HTTP Methodによって外部サービスへの処理種別を特定する。
    • URLパラメータやリクエストボディを使って,送信したい情報を記述する。
    • リクエストヘッダによって付加的な情報を追加する。
  • レスポンス時
    • HTTPステータスコードで外部サービスの処理結果を判断する。
    • レスポンスボディにて外部サービスからコンテンツを得る。

外部サービスにアクセスする際には,上記の内容について,通信相手の外部サービスに合わせて指定することが求められます。

OpenSocialコンテナによるプロキシ

さて,ここでガジェットから外部サービスにアクセスするための手法を考えてみましょう。ガジェットは,Webブラウザ上で動作する HTML+JavaScriptアプリケーションですので,サーバとの通信にはXMLHttpRequestを使った非同期通信が主に使われることになります。

ここで,XMLHttpRequestには「表示しているHTMLと同じドメインに対してしか通信することができない」という制限が問題となります。ガジェットの場合,そのガジェットをレンダリングしたOpenSocialコンテナ,つまりSNSのサーバとの通信に限定されることになります。Person&Friends APIなど,OpenSocial JavaScript APIに必要となる通信先はOpenSocialコンテナとなるため,この制限は受けません。しかし,マッシュアップやバックエンドサーバへの通信先は SNSとは異なる外部のサーバとなるために,XMLHttpRequestの制限によって直接通信することはできないことになります。

任意の外部サービスを利用可能とするために,OpenSocialではプロキシの手法が採用されています。つまり,Webブラウザ上のガジェットから直接外部サービスにアクセスするのではなく,OpenSocialコンテナが外部サービスへのアクセスを肩代わりしてくれる仕組みとなります。これによって, XMLHttpRequestの制限を受けることなく,ガジェットは任意の外部サービスを利用することができます。

この仕組みは,以下のような利点も得ることができます。

  • 外部サービスから得られたコンテンツがOpenSocialコンテナにてキャッシュされる。
  • 署名付きリクエストやOAuthによる認証認可処理をOpenSocialコンテナに任せることができる。

gadgets.io.makeRequest()

では,実際にガジェットから外部サービスにアクセスするための具体的な方法を解説します。まずは,リスト1をご覧ください。

リスト1 はてなブックマークのフィード取得

var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE;
params[gadgets.io.RequestParameters.GET_SUMMARIES] = true;
params[gadgets.io.RequestParameters.NUM_ENTRIES] = 10;
gadgets.io.makeRequest("http://b.hatena.ne.jp/hotentry.rss", function(response) {
  if (response.data) {
    for (var key in response.data.Entry) {
      var entry = response.data.Entry[key];
      var title = entry.Title;
      var link = entry.Link;
      var date = entry.Date;
      var comment = entry.Summary;
      // do something..
    }
  } else {
    var err = response.errors[0];
    // do something..
  }
}, params);

外部サービスへのアクセスはgadgets.io.makeRequest()関数を使うことになります。paramsオブジェクトに対するパラメータ値のセットの行が目立ちますが,基本的にはmakeRequest()関数の引数に外部サービスのURLを指定して実行するだけで,OpenSocialコンテナが代理で外部サービスへのアクセスを行い,結果をコールバック関数に渡してくれます。とてもシンプルです。

著者プロフィール

田中洋一郎(たなかよういちろう)

株式会社ミクシィ所属。Google API Expert (OpenSocial)。Mash up Award 3rd 3部門同時受賞。書籍「OpenSocial入門」を出版。

URL:http://www.eisbahn.jp/yoichiro

著書

コメント

コメントの記入