1. OpenSocialandJavaScript DeNA 横江直輔 (@zentooo)

2. Profile YokoeNaosuke 2010年度入社 / エンジニア Hatena: http://d.hatena.ne.jp/zentoo/ Twitter: http://twitter.com/zentooo

3. Agenda Y!モバゲー JS API Test of JS API OpenSocialの今後

4. 1. Y!モバゲー JS API

5. 1. Y!モバゲー JS API

6. 1. Y!モバゲー JS API OpenSocial 0.8

7. 1. Y!モバゲー JS API OpenSocial 0.8 Core APIはほぼ提供(opensocial.*, …)

8. 1. Y!モバゲー JS API OpenSocial 0.8 Core APIはほぼ提供(opensocial.*, …) 独自API(mbga.*)

9. OpenSocial API

10. OpenSocial API(1) People API Activities API AppData API

11. OpenSocial API(1) People API Activities API AppData API これらはJSON-RPC経由でDBに話しかけるAPI

12. JSON-RPC

13. JSON-RPC HTTPベースのRPC

14. JSON-RPC HTTPベースのRPC メッセージフォーマットにJSONを使用

15. JSON-RPC HTTPベースのRPC メッセージフォーマットにJSONを使用 {“method”: “people.get”, “params”: {“userId”: “@owner”, “groupId”: “@all”, “fields”: …. } } Client Server {“id”: “person”, “result”: {“nickname”: “sengoku38”, “profileUrl”: “http://…” … } }

16. OpenSocial App and JSON-RPC Mbga DB OpenSocial Container OpenSocial App JSON-RPC XmlHttpRequest

17. OpenSocial API(2) opensocial.requestSendMessage() opensocial.requestShareApp() opensocial.requestPayment()

18. OpenSocial API(2) opensocial.requestSendMessage() opensocial.requestShareApp() opensocial.requestPayment() これらはポップアップを表示するAPI

19. Popup OpenSocial Container OpenSocial App 友達を招待

20. Popup OpenSocial Container OpenSocial App 友達を招待

21. Popup OpenSocial Container 招待して大丈夫か？ OpenSocial App 大丈夫だ、問題ない

22. OpenSocial API(3) gadgets.Tab gadgets.MiniMessage gadgets.window gadgets.flash

23. OpenSocial API(3) gadgets.Tab -> いらない子 gadgets.MiniMessage gadgets.window gadgets.flash

24. OpenSocial API(3) gadgets.Tab -> いらない子 gadgets.MiniMessage -> いらない子 gadgets.window gadgets.flash

25. OpenSocial API(3) gadgets.Tab -> いらない子 gadgets.MiniMessage -> いらない子 gadgets.window -> 中間管理職 gadgets.flash

26. OpenSocial API(3) gadgets.Tab -> いらない子 gadgets.MiniMessage -> いらない子 gadgets.window -> 中間管理職 gadgets.flash -> 無双

27. OpenSocial API(3) gadgets.Tab -> いらない子 gadgets.MiniMessage -> いらない子 gadgets.window -> 中間管理職 gadgets.flash -> 無双 これらは主にgadgetの表示に関するAPI

28. Gadgetってそもそも どういう風に 表示してんの？

29. OpenSocial App and Shindig OpenSocial Container Shindig

30. OpenSocial App and Shindig OpenSocial Container Shindig

31. OpenSocial App and Shindig OpenSocial Container Shindig Request Rendering

32. OpenSocial App and Shindig OpenSocial Container Shindig SAP Server Request Rendering

33. OpenSocial App and Shindig OpenSocial Container Gadget XML Shindig SAP Server Request Rendering

34. OpenSocial App and Shindig OpenSocial Container OpenSocial App Render Shindig SAP Server Request Rendering

35. OpenSocial App and Shindig OpenSocial Container OpenSocial App Render Shindig SAP Server Request Rendering

36. OpenSocial API(4) gadgets.json gadgets.utils gadgets.io

37. OpenSocial API(4) gadgets.json -> window.JSON gadgets.utils gadgets.io

38. OpenSocial API(4) gadgets.json -> window.JSON gadgets.utils -> 名前の通り gadgets.io

39. OpenSocial API(4) gadgets.json -> window.JSON gadgets.utils -> 名前の通り gadgets.io -> 無双

40. OpenSocial API(4) gadgets.json -> window.JSON gadgets.utils -> 名前の通り gadgets.io -> 無双 これらはユーテリティ的なAPI

41. gadgets.io.makeRequest 要はCross-Domain XHR Shindigがリクエストをproxy XML, JSON, RSSをデコード Signed-Requestも可能

42. gadgets.io.makeRequest OpenSocial Container OpenSocial App XHR Shindig

43. gadgets.io.makeRequest OpenSocial Container OpenSocial App XHR External Site Shindig

44. mbga API

45. mbga API BlackList API NGWord API Avatar API TextData API Diary API

46. mbga API BlackList API -> いわゆるblock NGWord API Avatar API TextData API Diary API

47. mbga API BlackList API -> いわゆるblock NGWord API -> いわゆるフィルタリング Avatar API TextData API Diary API

48. mbga API BlackList API -> いわゆるblock NGWord API -> いわゆるフィルタリング Avatar API -> いわゆるアバター TextData API Diary API

49. mbga API BlackList API -> いわゆるblock NGWord API -> いわゆるフィルタリング Avatar API -> いわゆるアバター TextData API -> いわゆる…? Diary API

50. mbga API BlackList API -> いわゆるblock NGWord API -> いわゆるフィルタリング Avatar API -> いわゆるアバター TextData API -> いわゆる…? Diary API -> いわゆる日記投稿機能

51. APIまとめ OpenSocial 0.8にだいたい準拠 mbga.*以下に独自API

52. 2. Test of JS API

53. 2. Test of JS API ちょっと環境がややこしい gadgets.rpc Iframe Security Token QUnitを使用 Test::QUnitで自動実行

54. OpenSocial Container & App OpenSocial Container OpenSocial App [hash].app.mbga-platform.jp yahoo-mbga.jp

55. OpenSocial Container & App OpenSocial Container .js .js .js .js OpenSocial App .js .js .js [hash].app.mbga-platform.jp yahoo-mbga.jp

56. gadgets.rpc OpenSocial Container OpenSocial App [hash].app.mbga-platform.jp yahoo-mbga.jp

57. gadgets.rpc OpenSocial Container gadgets.rpc.register OpenSocial App [hash].app.mbga-platform.jp yahoo-mbga.jp

58. gadgets.rpc OpenSocial Container gadgets.rpc.register OpenSocial App gadgets.rpc.register [hash].app.mbga-platform.jp yahoo-mbga.jp

59. gadgets.rpc OpenSocial Container gadgets.rpc.register gadgets.rpc.call OpenSocial App gadgets.rpc.register [hash].app.mbga-platform.jp yahoo-mbga.jp

60. 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

61. window.postMessage HTML 5 Standard way ( hackではない ) Cross-Domain messaging between windows Web Workersへのmessagingにも

62. window.postMessage OpenSocial Container OpenSocial App [hash].app.mbga-platform.jp yahoo-mbga.jp

63. window.postMessage OpenSocial Container child.postMessage(msg) onmessage OpenSocial App window.parent.postMessage(msg) onmessage [hash].app.mbga-platform.jp yahoo-mbga.jp

64. IFPC Inter-Frame Procedure Call 孫iframe + fragment IDで通信 一応どんなブラウザでも動く

65. IFPC OpenSocial Container OpenSocial App function foo [hash].app.mbga-platform.jp yahoo-mbga.jp

66. IFPC OpenSocial Container OpenSocial App function foo (invisible iframe) yahoo-mbga.jp [hash].app.mbga-platform.jp yahoo-mbga.jp

67. IFPC OpenSocial Container ifr.src = http://…#<json> OpenSocial App function foo (invisible iframe) yahoo-mbga.jp [hash].app.mbga-platform.jp yahoo-mbga.jp

68. IFPC OpenSocial Container ifr.src = http://…#<json> OpenSocial App function foo (invisible iframe) yahoo-mbga.jp window.parent.parent.foo() [hash].app.mbga-platform.jp yahoo-mbga.jp

69. Share app with gadgets.rpc [hash].app.mbga-platform.jp yahoo-mbga.jp

70. Share app with gadgets.rpc 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

71. Share app with gadgets.rpc gadgets.rpc 2.shareApp 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

72. Share app with gadgets.rpc gadgets.rpc 3.endpoint DB 2.shareApp 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

73. Share app with gadgets.rpc gadgets.rpc 3.endpoint DB 2.shareApp 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

74. Share app with gadgets.rpc gadgets.rpc 3.endpoint DB 2.shareApp 4.callback 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

75. Share app with gadgets.rpc gadgets.rpc 3.endpoint DB 2.shareApp 4.callback 5.callback 1.opensocial.requestShareApp [hash].app.mbga-platform.jp yahoo-mbga.jp

76. Constraints for test

77. Constraints for test StaticなJSライブラリのtestでは済まない

78. Constraints for test StaticなJSライブラリのtestでは済まない 各windowでloadされるべき.jsの存在

79. Constraints for test StaticなJSライブラリのtestでは済まない 各windowでloadされるべき.jsの存在 gadgets.rpcが初期化プロセスにも関係

80. Constraints for test StaticなJSライブラリのtestでは済まない 各windowでloadされるべき.jsの存在 gadgets.rpcが初期化プロセスにも関係 gadgets.rpcを利用するAPIのテストも…

81. Constraints for test StaticなJSライブラリのtestでは済まない 各windowでloadされるべき.jsの存在 gadgets.rpcが初期化プロセスにも関係 gadgets.rpcを利用するAPIのテストも… Security Tokenとか(ry

82. Testing tools for JS JSUnit QUnit JSTAPd JSTestDriver Jasmine etc…

83. QUnit jQueryからスピンアウト Author: John Resig Maintainer: JornZaefferer QUnit.logやQUnit.doneなどをフック可能

84. Hijacking QUnit

85. Hijacking QUnit アプリとしてtestを書くのが一番ラク

86. Hijacking QUnit アプリとしてtestを書くのが一番ラク しかし手動テストは。。。

87. Hijacking QUnit アプリとしてtestを書くのが一番ラク しかし手動テストは。。。 「それMozReplでできるよ」

88. Hijacking QUnit アプリとしてtestを書くのが一番ラク しかし手動テストは。。。 「それMozReplでできるよ」 MozRepl.pmでテストアプリを起動->QUnitオブジェクトをジャック->テストを実行->テスト結果をPerlに戻してTAP形式で集計

89. Test::QUnit

90. Test::QUnit proveによるremoteテスト

91. Test::QUnit proveによるremoteテスト QUnitJackerなので本番環境もテスト可

92. Test::QUnit proveによるremoteテスト QUnitJackerなので本番環境もテスト可 指定したwindowのonloadをフックし、処理を走らせる（例えばpopupのCloseボタンをクリックとか）ことも可能

93. Test::QUnit proveによるremoteテスト QUnitJackerなので本番環境もテスト可 指定したwindowのonloadをフックし、処理を走らせる（例えばpopupのCloseボタンをクリックとか）ことも可能 http://github.com/zentooo/p5-test-qunit

94. ごっつええ感じ テストの全自動化 ( via prove ) ポップアップのテストも可能に(副産物) JSON-RPCの仕様変更もキャッチ

95. テストまとめ gadgets.rpcはけっこうややこしい Firefoxでしかtestできない男の人って… 汎用性に限界 JSTAPdとかJSTestDriverとかとか いっそNodeで書いちゃうのも

96. 3. opensocialの今後 主にextras↓ opensocial-payment Activity Streams Open Ajax Hub Wave API

97. opensocial-payment

98. opensocial-payment 既に実用段階

99. opensocial-payment 既に実用段階 Y!mbgaでは少しいじったコードを利用

100. opensocial-payment 既に実用段階 Y!mbgaでは少しいじったコードを利用 ユーザの課金はcontainer domain

101. opensocial-payment 既に実用段階 Y!mbgaでは少しいじったコードを利用 ユーザの課金はcontainer domain 例によってgadgets.rpcで通信

102. Activity Streams

103. Activity Streams JSにはあまり関係ないけど

104. Activity Streams JSにはあまり関係ないけど SocialなActivityの標準化

105. Activity Streams JSにはあまり関係ないけど SocialなActivityの標準化 DBは既に対応済

106. Activity Streams JSにはあまり関係ないけど SocialなActivityの標準化 DBは既に対応済 Shindig-2.0.0にはJavaによる実装あり

107. Open Ajax Hub

108. Open Ajax Hub Frame間通信、その弐

109. Open Ajax Hub Frame間通信、その弐 http://www.openajax.org/member/wiki/OpenAjax_Hub_2.0_Specification

110. Open Ajax Hub Frame間通信、その弐 http://www.openajax.org/member/wiki/OpenAjax_Hub_2.0_Specification Gadget間でのsecureなpub/subを想定

111. Open Ajax Hub Frame間通信、その弐 http://www.openajax.org/member/wiki/OpenAjax_Hub_2.0_Specification Gadget間でのsecureなpub/subを想定 夢のアプリ間通信！？

112. Open Ajax Hub OpenSocial Container App A sub: [] App C sub: [A, D] pub pub pub pub App B sub: [A] App D sub: [C]

113. Wave API

114. Wave API G◯◯gleのアレのWave Gadget API

115. Wave API G◯◯gleのアレのWave Gadget API ShindigコミッタにはG◯◯gleの人が多い

116. Wave API G◯◯gleのアレのWave Gadget API ShindigコミッタにはG◯◯gleの人が多い Waveは滅びん！何度でも蘇るさ！

117. Wave API G◯◯gleのアレのWave Gadget API ShindigコミッタにはG◯◯gleの人が多い Waveは滅びん！何度でも蘇るさ！ ということで、復活させてみました

118. (多分)世界初のwave on Shindig Shindigのwave featureで実現する簡単なお絵かきチャット feat. node.js and Socket.IO – http://d.hatena.ne.jp/zentoo/20101114/1289751462 動画 -> http://www.youtube.com/watch?v=1iqgKrDUEAo

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

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

122. A. API側から見たアプリ作成のコツ gadgets.util.registerOnLoadHandler() gadgets.io.makeRequest() gadgets.flash.embedFlash() ※ただしAPI提供側視点のコツに限る

123. g.u.registerOnLoadHandler() (ほぼ) onload発火時の実行を保証 <script>/*ここで呼ばれる*/</script></body> これ使わないと上記タイミング無保証 ShindigのJS APIの初期化プロセスは複雑 なので使ったほうが何かと安心

124. コード例(1) function init() { // アプリの初期化プロセスは全てこの中で行う } gadgets.util.registerOnLoadHandler(init);

125. gadgets.io.makeRequest() ほぼ100%使われているだろうAPI 意外と多機能 HEAD, GET, PUT, POST, DELETE データフォーマットの指定(JSON, DOM, RSS)によるresponseの自動deserialize

126. コード例(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を返す

127. gadgets.flash.embedFlash() Flashを利用したアプリでは必需品 引数での指定が細かい embedFlash(<url>,<Elem>,<ver>,<obj>) IE/それ以外で埋め込み方が違う 第四引数でのwmodeとid重要

128. コード例(3) gadgets.flash.embedFlash(“http://example.com/myapp.swf”, document.getElementById(“swfContainer”), 10, { “id”: “swfElem”, “wmode”: “opaque” } ); 後にgetElementById(“swfElem”)でアクセス可能に

129. アプリのコツまとめ 半分コツ、半分「お願い」 よいアプリは三者にとって幸せ