unoh.github.com

OpenSocialを始めよう！第1回

Wed Apr 22 23:05:40 -0700 2009

こんにちは五十川です。

先日、gooホームとmixiアプリが立て続けに公開され、いよいよ日本でもOpenSocialが注目を集めるようになりました。そこで今回は、これからOpenSocialアプリケーションの開発を始めるにあたっての基礎的な内容をまとめてみたいと思います。

OpenSocialとは

Google Code - OpenSocialの冒頭には、OpenSocial は複数のウェブサイト間で使用可能な、ソーシャル アプリケーションの共通 APIの定義であると書かれています。

あるOpenSocial対応のウェブサイトで動作するプログラムは、他のOpenSocial対応アプリケーションでも動作する — 例えばmixiアプリ用のプログラムは、gooホームやMySpaceなどでもそのまま動作する可能性があるというのがOpenSocialの重要な点です。もちろんウェブサイトごとに細部の実装は異なる場合があり、まったく同じプログラムがすべてのプラットフォームでそのまま動作するとは限りませんが、各ウェブサイトが独自の規格を用意していて、それぞれにいちから開発しなければならない状況に比べれば遥かに少ない労力で、多くのプラットフォームに対応できるというのは、実に魅力的です。

OpenSocial対応SNS

OpenSocial Community Wiki - Containersに、OpenSocial対応SNSの一覧があります。各SNSの「details」をクリックしたページでは、SNSごとの特徴や、開発にあたっての注意点などの概要が記載されています。クロスプラットフォームでの開発の際には、対象となるSNSについて、あらかじめ目を通しておくとよいでしょう。ちなみに、OpenSocial Compliance Testsにあるテストガジェットを使って、SNSの実装の互換性を詳しく確認できたりもします。

JavaScript APIとRESTful API

下図はopensocial.orgに掲載されているOpenSocialの概要図です。中央に位置している緑の部分が、mixiやgooホームなどのSNSプラットフォームです。左の青いグループはSNSのウェブページ上に表示されるアプリケーション群です（これらはガジェットと呼ばれます）。OpenSocialは外部のウェブサイトやデスクトップアプリケーションなどからSNSのデータを利用することも想定されています。右の赤い部分がこれに当たります。

OpenSocial Overview
OpenSocial Overview

ガジェットの基本的な実体はXMLです。XMLはガジェットの設定情報などと、実際に表示されるコンテンツとなるHTMLやJavaScript、CSSなどで構成されます。SNSのOpenSocialコンテナがこのXMLを処理したコンテンツが、SNSのウェブページ中のIFRAME内に表示されます。こうしたガジェットがSNSとのやり取りを行うためのAPIが、OpenSocialのJavaScript APIです。

一方、外部サイトやデスクトップアプリケーションなど、SNSの外部からSNSのデータにアクセスするために用意されているのが、OpenSocialのRESTful APIです。あるいは、例えば携帯電話のような、JavaScriptが利用できない端末向けのウェブサイトやアプリケーションもRESTful APIを利用することになるでしょう。携帯電話端末専用のSNSであるgumiが提供しているgumi Platformは、この例です。

OpenSocialコンテナ

SNSの本体とガジェットや外部のアプリケーションとのやり取りを仲介し、あるいはガジェットXMLを処理してウェブページにコンテンツを表示するといった、OpenSocialの中核として機能するのがコンテナです。

OpenSocialコンテナは、ガジェットとSNS本体とのやり取りのみならず、ガジェットとSNSの外部とのやり取りも仲介します。複雑なガジェットは往々にして外部のサーバとやり取りをする必要が生じますが、通常のJavaScriptでは外部リソースへのアクセスの際に生じるクロスドメインの問題は、コンテナがプロキシとして動作することで、ガジェットのプログラミングでは意識する必要がありません。あるいは、コンテナはガジェットXMLを含む各種リソースをキャッシュし、これらの配信サーバへのアクセスの負荷を軽減するといった役割も担います。

Shindig!

OpenSocialはその名前の通りオープンであり、コンテナの実装もオープンソースでの開発が行われています。それがApache IncubatorによるShindigです。ウェブサイトはShindigを採用することで、自前でいちからコンテナを実装する労力を省いてOpenSocialに対応することができます。実際、現在OpenSocialに対応しているSNSの多くがShindigを採用しています。また、開発者にとっては、ソースが公開されているので、それに目を通すことでコンテナ実装の理解を深めることができます。現時点でのShindigにはJava/Servlet版とPHP版があります。

ガジェットXML

以下はシンプルなガジェットXMLの例です。

このガジェットは、SNSのプロフィールページ（PROFILEビュー）で表示された場合、「これはPROFILEビューです。こんにちは○○さん」と表示します。○○の部分には、そのページを見ているユーザ（VIEWER）のニックネームが入ります。

ガジェットXMLはModule要素をルートとして、ガジェットの設定などが記述されたModulePrefs要素と、HTMLやJavaScriptなどによるコンテンツが記述されたContent要素で構成されます（この構造はiGoogleのガジェットXMLと同じです）。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs
    title="テスト"
    description="お試しガジェット"
    author_email="test@example.com">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" view="profile"><![CDATA[
    <script type="text/javascript">
    gadgets.util.registerOnLoadHandler(function() {

      var req = opensocial.newDataRequest();

      // VIEWERの情報をリクエストする
      req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');

      // リクエストを実行
      req.send(function(response) {

        // VIEWERの情報を取得
        var viewer = response.get('viewer').getData();
        var msg = 'こんにちは' + viewer.getDisplayName() + 'さん';
        document.getElementsByTagName('p').item(0)
          .appendChild(document.createTextNode(msg));
      });
    });
    </script>
    <p>これはPROFILEビューです。</p>
  ]]></Content>
  <Content type="html" view="home"><![CDATA[
    <p>これはHOMEビューです。</p>
  ]]></Content>
  <Content type="html" view="canvas"><![CDATA[
    <p>これはCANVASビューです。</p>
  ]]></Content>
</Module>

ご覧のように、Content要素の中身は通常のウェブコンテンツと同様のHTMLです。違いは、JavaScriptプログラミングにおいてOpenSocial JavaScript API及びGadgets APIが利用可能である点と、通常のJavaScriptプログラミングとはいくつか異なる手段を用いる必要がある点です。

コンテナがこのXMLを処理して出力するHTMLは、HTMLのBODY要素内に、XMLのContent要素の中身が埋め込まれたものになります。

ビュー

上のXMLにはContent要素が3ヶあり、view属性値がそれぞれ、profile、home、canvasとなっています。

SNSウェブサイトにはガジェットが表示されるページがいくつかあります。ガジェットが表示されるページを「ビュー」と呼びます。OpenSocial標準では以下の4ヶのビューが定義されています（ただし、すべてのSNSでこの4ヶが存在しているわけではありません。例えば、gooホームにはPREVIEWビューはありません）。

HOMEビューはいわゆるマイページ/マイホームです。PROFILEビューはプロフィールページです。HOMEビューとPROFILEビューでは、ガジェットは通常サイドバーの一部などサイズの小さいエリアに、他のガジェットと共に表示されます。CANVASビューでは（共通ヘッダ/フッタなどを除く）画面全体にガジェットが表示されます。PREVIEWビューはガジェットのインストールページなど、ガジェットのデモを表示するページです（PREVIEWビューではVIEWERやOWNERの情報は取得できません）。

Content要素のview属性値にビュー名を指定すると、そのContent内のHTMLは指定したビューで表示されます。複数のビューで共通のContentは「view="home,profile"」のようにビュー名をカンマ区切りで記述します。例えば、homeとprofileで共通のJavaScriptコードはContent@view="home,profile"に記述しておき、それぞれで異なる部分をContent@view="home"とContent@view="profile"にそれぞれ記述するということが可能です。

スタイル指定の注意点

Content要素内のHTMLには、もちろんCSSも記述することができます。ガジェットはIFRAME内に表示されるので、SNS側のスタイル指定を意識する必要はありません。なお、ガジェットの仕様では、コンテナの出力するHTMLはブラウザ固有のモード（Quirksモード）で描画されると規定されていますので、スタイル指定を行う際は注意してください。

第1回はここまでです。次回は以下のような話題を取り上げると思います。多分。

ではでは

追記＠2009-10-01

第2回はなくなり、続きは『システム開発ジャーナル』vol.11の特集記事『OpenSocial Web & モバイル開発入門』の一部となりました。続きが気になるかたは、是非お買い求めください（笑）

システム開発ジャーナル Vol.11
システム開発ジャーナル Vol.11
posted with amazlet at 09.10.02
システム開発ジャーナル編集部
毎日コミュニケーションズ
売り上げランキング: 49893
Amazon.co.jp で詳細を見る