最新記事
- DeNA × Yahoo!JAPAN UI/UX勉強会に参加してきました。 (07/16)
- Webデザイナーとしての仕事 (07/14)
- 「La・VIE(ラヴィ) のびーるフィットネス スーパーハード」を使ってみた。 (07/03)
- アイデアだしで行うブレスト。実は効率が悪い? (06/22)
- Facebookの「リスト」と「グループ」の違いって何? (06/11)
- VIP LINER グランシアファーストに乗ってみた。 (05/28)
- 東京から大阪に行くとき、あなたは何を使って行きますか? (05/15)
- Bluetooth対応ヘッドセットMDR-EX31BNを買ってみた。 (04/18)
- AppBank Fello主催「DL数の少ないアプリで収益を増やす方法を学ぶ」に行ってみた (03/30)
- Appleの対応が神すぎる件 (02/15)
カテゴリー
- 未分類 (86)
- php (9)
- News (52)
- 日記 (15)
- Java (18)
- Flex (12)
- Webサービス (30)
- JavaScript (4)
- Ajax (16)
- CSS (6)
- Web@Youtility (7)
- Google Adsence (4)
- mixi (3)
- SEO (3)
- Perl (2)
- 書籍紹介 (2)
- セミナー (1)
- 製品 (2)
RSSリンクの表示
ブロとも申請フォーム
新しくブログを開設しました。
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ビューはガジェットのデモを表示するページです
今回調べたのは以上となります。
引き続き調査いたします。