OpenSocial の Gadget XMLを使ってみよう

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。

gooホームとmixiアプリ
が公開され興味をもったため、OpenSocialアプリケーションの開発をしたかったため、基礎的な内容をまとめてみました。

OpenSocialとは

OpenSocial は複数のウェブサイト間で使用可能な、ソーシャル アプリケーションの共通 APIです。


あるOpenSocial対応のウェブサイトで動作するプログラムは、他のOpenSocial対応アプリケーションでも動作する。


例えばmixiアプリ用のプログラムは、gooホームやMySpaceなどでも動作する可能性があります。

JavaScript APIとRESTful API

大きく分けると以下の3つに構成されています

• mixiやgooホームなどのSNSプラットフォーム


• SNSのウェブページ上に表示されるアプリケーション群（ガジェット）


• 外部のウェブサイトやデスクトップアプリケーションなどのSNSのデータ

ガジェットはXMLで記述されており、XMLはガジェットの設定情報、実際に表示されるコンテンツとなるHTMLやJavaScript、CSSなど構成されています。

SNSのOpenSocialコンテナがこのXMLを処理したコンテンツを表示します。

こうしたガジェットがSNSとのやり取りを行うためのAPIが、OpenSocialのJavaScript APIです。

一方、外部サイトやデスクトップアプリケーションなどのSNSの外部からSNSのデータにアクセスするものが、OpenSocialのRESTful APIです。

OpenSocialコンテナ

SNSの本体とガジェットや外部のアプリケーションとの仲介役をし、ガジェットXMLを処理してウェブページにコンテンツを表示するのがコンテナです。

OpenSocialコンテナは、ガジェットとSNS本体との通信以外にガジェットとSNSの外部との通信も行います。

クロスドメインの問題は、コンテナがプロキシとして動作するため特に意識する必要がなく

コンテナはリソースをキャッシュして配信サーバへのアクセスの負荷も軽減されます。

ガジェットXML

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

このガジェットは、SNSのプロフィールページ（PROFILEビュー）で表示された場合、「PROFILEビューです。Hello ○○」表示。

○○の部分には、そのページを見ているユーザ（VIEWER）のニックネームが入ります。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
　<ModulePrefs title="テスト" description="あぷり">
　　<Require feature="opensocial-0.8"/>
　</ModulePrefs>
　<Content type="html" view="profile">
　<![CDATA[
　　<script type="text/javascript">
　　gadgets.util.registerOnLoadHandler(function() {
 
　　　var req = opensocial.newDataRequest();
 
　　　req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
 
　　　req.send(function(response) {
 
　　　　var viewer = response.get('viewer').getData();
　　　　var msg = 'Hello' + 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>

以下の特徴があります

• OpenSocial JavaScript API及びGadgets APIが利用可能


• 通常のJavaScriptプログラミングとは異なる

ビュー

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

SNSにはガジェットが表示されるページの中で、ガジェットが表示されるページを「ビュー」と呼びます。

OpenSocial標準では基本的には以下の4ヶのビューが定義されています。

■HOMEビュー：マイページ/マイホーム

■PROFILEビュー：プロフィールページ

HOMEビューとPROFILEビューでは、ガジェットは通常サイドバーの一部などサイズの小さいエリアに、他のガジェットと共に表示されます。

■CANVASビュー：画面全体にガジェットが表示

PREVIEWビューはガジェットのデモを表示するページです

今回調べたのは以上となります。

引き続き調査いたします。