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

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


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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ビューはガジェットのデモを表示するページです



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

引き続き調査いたします。
スポンサーサイト

テーマ:Webサービス - ジャンル:コンピュータ

<<ExtJSのローディング機能 | ホーム | Web@Youtility - ExtJSをふんだんに使用したWebデザイン開発>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/156-3f5a46d4
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。