dena technology seminar #3 - opensocial and javascript

OpenSocial

JavaScript

横江直輔 (@zentooo)

Profile

• YokoeNaosuke

• 2010年度入社 / エンジニア

• Hatena: http://d.hatena.ne.jp/zentoo/

• Twitter: http://twitter.com/zentooo

Agenda

1. Y!モバゲー JS API

2. Test of JS API

3. OpenSocialの今後

• OpenSocial 0.8

• Core APIはほぼ提供(opensocial.*, …)

• OpenSocial 0.8

• Core APIはほぼ提供(opensocial.*, …)

• 独自API(mbga.*)

OpenSocial API

OpenSocial API(1)

• People API

• Activities API

• AppData API

OpenSocial API(1)

• People API

• Activities API

• AppData API

これらはJSON-RPC経由でDBに話しかけるAPI

JSON-RPC

• HTTPベースのRPC

JSON-RPC

• メッセージフォーマットにJSONを使用

JSON-RPC

• メッセージフォーマットにJSONを使用

Client Server

{“method”: “people.get”, “params”:

{“userId”: “@owner”, “groupId”: “@all”, “fields”: …. }

{“id”: “person”, “result”:

{“nickname”: “sengoku38”, “profileUrl”: “http://…” … }

OpenSocial App and JSON-

OpenSocial Container

OpenSocial App JSON-RPC

Mbga DB

XmlHttpRequest

OpenSocial API(2)

• opensocial.requestSendMessage()

• opensocial.requestShareApp()

• opensocial.requestPayment()

OpenSocial API(2)

• opensocial.requestSendMessage()

• opensocial.requestShareApp()

• opensocial.requestPayment()

これらはポップアップを表示するAPI

OpenSocial App

友達を招待

OpenSocial App

友達を招待

OpenSocial App

招待して大丈夫か？

大丈夫だ、問題ない

OpenSocial API(3)

• gadgets.Tab

• gadgets.MiniMessage

• gadgets.window

• gadgets.flash

OpenSocial API(3)

• gadgets.Tab ->いらない子

• gadgets.MiniMessage

• gadgets.window

• gadgets.flash

OpenSocial API(3)

• gadgets.MiniMessage ->いらない子

• gadgets.window

• gadgets.flash

OpenSocial API(3)

• gadgets.window ->中間管理職

• gadgets.flash

OpenSocial API(3)

• gadgets.flash ->無双

OpenSocial API(3)

• gadgets.flash ->無双

これらは主にgadgetの表示に関するAPI

Gadgetってそもそも

どういう風に

表示してんの？

OpenSocial App and Shindig

Shindig

Request Rendering

Shindig

Request Rendering

SAP Server

Shindig

Request Rendering

SAP Server

GadgetXML

OpenSocial App

Shindig

Request Rendering

Render

SAP Server

OpenSocial App

Shindig

Request Rendering

Render

SAP Server

OpenSocial API(4)

• gadgets.json

• gadgets.utils

• gadgets.io

OpenSocial API(4)

• gadgets.json ->window.JSON

• gadgets.utils

• gadgets.io

OpenSocial API(4)

• gadgets.utils ->名前の通り

• gadgets.io

OpenSocial API(4)

• gadgets.io ->無双

OpenSocial API(4)

• gadgets.io ->無双

これらはユーテリティ的なAPI

gadgets.io.makeRequest

• 要はCross-Domain XHR

• Shindigがリクエストをproxy

• XML, JSON, RSSをデコード

• Signed-Requestも可能

OpenSocial App

Shindig

OpenSocial App

ShindigExternal

mbga API

• BlackList API

• NGWord API

• Avatar API

• TextData API

• Diary API

mbga API

• BlackList API ->いわゆるblock

• NGWord API

• Avatar API

• TextData API

• Diary API

mbga API

• NGWord API ->いわゆるフィルタリング

• Avatar API

• TextData API

• Diary API

mbga API

• Avatar API ->いわゆるアバター

• TextData API

• Diary API

mbga API

• TextData API ->いわゆる…?

• Diary API

mbga API

• TextData API ->いわゆる…?

• Diary API ->いわゆる日記投稿機能

APIまとめ

• OpenSocial 0.8にだいたい準拠

• mbga.*以下に独自API

2. Test of JS API

• ちょっと環境がややこしい• gadgets.rpc

• Iframe

• Security Token

• QUnitを使用

• Test::QUnitで自動実行

OpenSocial Container & App

OpenSocial App

[hash].app.mbga-platform.jp

yahoo-mbga.jp

OpenSocial Container & App

OpenSocial App

yahoo-mbga.jp

.js .js .js .js

.js .js .js

gadgets.rpc

OpenSocial App

yahoo-mbga.jp

gadgets.rpc

OpenSocial App

yahoo-mbga.jp

gadgets.rpc.register

gadgets.rpc

OpenSocial App

yahoo-mbga.jp

gadgets.rpc

OpenSocial App

yahoo-mbga.jp

gadgets.rpc.call

Inside of gadgets.rpc

• window.postMessage -> modern browsers

• frameElement -> Firefox 2.x

• Native IE XDC -> IE6, 7

• RMR -> Safari 2.x, Chrome 1

• IFPC -> all others

window.postMessage

• HTML 5

• Standard way ( hackではない )

• Cross-Domain messaging between

windows

• Web Workersへのmessagingにも

window.postMessage

OpenSocial App

yahoo-mbga.jp

window.postMessage

OpenSocial App

yahoo-mbga.jp

window.parent.postMessage(msg)onmessage

child.postMessage(msg) onmessage

• Inter-Frame Procedure Call

• 孫iframe + fragment IDで通信

• 一応どんなブラウザでも動く

OpenSocial App

yahoo-mbga.jp

function foo

OpenSocial App

yahoo-mbga.jp

(invisible iframe)

yahoo-mbga.jp

function foo

OpenSocial App

yahoo-mbga.jp

(invisible iframe)

yahoo-mbga.jp

ifr.src = http://…#<json>

function foo

OpenSocial App

yahoo-mbga.jp

(invisible iframe)

yahoo-mbga.jp

ifr.src = http://…#<json>

window.parent.parent.foo()

function foo

Share app with gadgets.rpc

yahoo-mbga.jp

1.opensocial.requestShareApp

5.callback

yahoo-mbga.jp

2.shareApp

5.callback

gadgets.rpc

yahoo-mbga.jp

2.shareApp

5.callback

3.endpoint DBgadgets.rpc

yahoo-mbga.jp

2.shareApp

5.callback

yahoo-mbga.jp

2.shareApp 4.callback

5.callback

yahoo-mbga.jp

2.shareApp 4.callback

5.callback

Constraints for test

• StaticなJSライブラリのtestでは済まない

• 各windowでloadされるべき.jsの存在

• gadgets.rpcが初期化プロセスにも関係

• gadgets.rpcを利用するAPIのテストも…

• Security Tokenとか(ry

Testing tools for JS

• JSUnit

• QUnit

• JSTAPd

• JSTestDriver

• Jasmine

etc…

• jQueryからスピンアウト

• Author: John Resig

• Maintainer: JornZaefferer

• QUnit.logやQUnit.doneなどをフック可能

Hijacking QUnit

• アプリとしてtestを書くのが一番ラク

Hijacking QUnit

• しかし手動テストは。。。

Hijacking QUnit

• 「それMozReplでできるよ」

Hijacking QUnit

• 「それMozReplでできるよ」

• MozRepl.pmでテストアプリを起動→QUnitオブジェクトをジャック→テストを実行→テスト結果をPerlに戻してTAP形式で集計

Test::QUnit

• proveによるremoteテスト

Test::QUnit

• QUnitJackerなので本番環境もテスト可

Test::QUnit

• 指定したwindowのonloadをフックし、処理を走らせる（例えばpopupのCloseボタンをクリックとか）ことも可能

Test::QUnit

• 指定したwindowのonloadをフックし、処理を走らせる（例えばpopupのCloseボタンをクリックとか）ことも可能

• http://github.com/zentooo/p5-test-qunit

ごっつええ感じ

• テストの全自動化 ( via prove )

• ポップアップのテストも可能に(副産物)

• JSON-RPCの仕様変更もキャッチ

テストまとめ

• gadgets.rpcはけっこうややこしい

• Firefoxでしかtestできない男の人って…

• 汎用性に限界

• JSTAPdとかJSTestDriverとかとか

• いっそNodeで書いちゃうのも

3. opensocialの今後

• 主にextras↓

• opensocial-payment

• Activity Streams

• Open Ajax Hub

• Wave API

opensocial-payment

• 既に実用段階

opensocial-payment

• Y!mbgaでは少しいじったコードを利用

opensocial-payment

• ユーザの課金はcontainer domain

opensocial-payment

• ユーザの課金はcontainer domain

• 例によってgadgets.rpcで通信

Activity Streams

• JSにはあまり関係ないけど

Activity Streams

• SocialなActivityの標準化

Activity Streams

• DBは既に対応済

Activity Streams

• DBは既に対応済

• Shindig-2.0.0にはJavaによる実装あり

Open Ajax Hub

• Frame間通信、その弐

Open Ajax Hub

• http://www.openajax.org/member/wiki/Ope

nAjax_Hub_2.0_Specification

Open Ajax Hub

• Gadget間でのsecureなpub/subを想定

Open Ajax Hub

• Gadget間でのsecureなpub/subを想定

• 夢のアプリ間通信！？

Open Ajax Hub

sub: []

sub: [A, D]

sub: [A]

sub: [C]

pub pubpub

Wave API

• G◯◯gleのアレのWave Gadget API

Wave API

• ShindigコミッタにはG◯◯gleの人が多い

Wave API

• Waveは滅びん！何度でも蘇るさ！

Wave API

• Waveは滅びん！何度でも蘇るさ！

ということで、復活させてみました

(多分)世界初のwave on Shindig

• Shindigのwave featureで実現する簡単なお絵かきチャット feat. node.js and

Socket.IO –

http://d.hatena.ne.jp/zentoo/20101114/128

9751462

• 動画 ->

http://www.youtube.com/watch?v=1iqgKrD

ご清聴ありがとうございました

A. API側から見たアプリ作成のコツ

• gadgets.util.registerOnLoadHandler()

• gadgets.io.makeRequest()

• gadgets.flash.embedFlash()

※ただしAPI提供側視点のコツに限る

g.u.registerOnLoadHandler()

• (ほぼ) onload発火時の実行を保証• <script>/*ここで呼ばれる*/</script></body>

• これ使わないと上記タイミング無保証

• ShindigのJS APIの初期化プロセスは複雑

• なので使ったほうが何かと安心

コード例(1)

function init() {

// アプリの初期化プロセスは全てこの中で行う

gadgets.util.registerOnLoadHandler(init);

gadgets.io.makeRequest()

• ほぼ100%使われているだろうAPI

• 意外と多機能

• HEAD, GET, PUT, POST, DELETE

• データフォーマットの指定(JSON, DOM,

RSS)によるresponseの自動deserialize

コード例(2)

function jsonCallback(response) {

if ( response.rc === 200 )

gadgets.log(response.data.foo); // bar

gadgets.io.makeRequest(“http://example.com/json”,

jsonCallback,

{“format”: “JSON”}

); {“foo”:”bar”}のようなJSONを返す

gadgets.flash.embedFlash()

• Flashを利用したアプリでは必需品

• 引数での指定が細かい

• embedFlash(<url>,<Elem>,<ver>,<obj>)

• IE/それ以外で埋め込み方が違う

• 第四引数でのwmodeとid重要

コード例(3)

gadgets.flash.embedFlash(“http://example.com/myapp.swf”,

document.getElementById(“swfContainer”),

“id”: “swfElem”, “wmode”: “opaque”

);後にgetElementById(“swfElem”)でアクセス可能に

アプリのコツまとめ

• 半分コツ、半分「お願い」

• よいアプリは三者にとって幸せ

dena technology seminar #3 - opensocial and javascript

Documents

tesis dena alfiani

dena retail banking

expertmeeting opensocial portals - dlwo programma surf

laporan dena

aplicações de software social - opensocial

dena results material

primeiro dia livre opensocial

construindo aplicativos sociais utilizando as apis do...

opensocial: desenvolvimento de um plugin para a … ·...

dena kartika.docx

dena-leitstudie integrierte energiewende › fileadmin ›...

dena case study

couchdb+opensocial - osc 2009/fall tokyo

documentacao - opensocial

presentazione seminario "opensocial" - corso di commercio...

domino r9 e opensocial , #dd13

10 dena rostek

100 dena otcet

opensocial done right€¦ · opensocial done right...

opensocial done right