神戸ITフェスティバル2013で発表した、Webのリアルタイム化とそれを支える最新技術動向の資料です。

1. Webによるデバイスを用いた
リアルタイムサービスの可能性
2013.12.14(sat) 神戸ITフェスティバル
こまつけんさく

2. 自己紹介
 名前：小松健作
 所属：NTT communications
 HTML5の研究開発
 HTML5の啓蒙・コミュニティ運営
 html5jスタッフ
 Google Developer Expert (HTML5)
 Microsoft Most Valuable Professional(IE)

3. Today’s Main Idea
 リアルタイム化へと突き進むWebについて、歴史・
最新動向を紹介する

4. 今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション：WebRTC
 WebRTCを簡便に利用：SkyWay

5. 今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション：WebRTC
 WebRTCを簡便に利用：SkyWay

6. 初期のWeb（1992年）
http://www.tsukuba.gr.jp/first/kek.html

7. 初期のWeb
文書を閲覧するもの
＝ブラウザ

8. Web2.0 (2004〜)

9. Web2.0
Ajax
Interactive Web

10. SNS（2009？〜）
https://twitter.com/
https://www.facebook.com/

11. SNS
Communication
….

12. ユースケースの拡大
文書（アーカイブ）を共有するもの
リアルタイムにメッセージを共有するもの
Webの利用シーンが多様化

13. 多様化はSNSに留まらない
？

14. Communication機能による
アプリケーションのコラボ
レーション化
https://drive.google.com/

15. Webの可能性
既存のアプリケーションにつながる・共有が作用
イノベーション、社会現象が発生

16. ここ1, 2年の変化
 Webのリアルタイム化が加速

17. Browser Quest
http://browserquest.mozilla.org/

18. World Wide Maze
http://chrome.com/maze/

19. もっと詳しく知りたい方は
http://www.html5rocks.com/ja/tutorials/casestudies/world_wide_maze/

20. Browser to Browserのリアル
タイム化、利用シーンの拡大

21. 今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション：WebRTC
 WebRTCを簡便に利用：SkyWay

22. コラボレーション
→オーケストレーション
コラボレーション（共同作業）
オーケストレーション（連携）
 その範疇は”ヒト”だけではなく、”モノ”へと拡大

23. Leap Motion

24. leapjs
http://js.leapmotion.com/

25. examples
http://js.leapmotion.com/examples

26. Chrome.serial

27. Arduino を serial APIで操作

28. デバイスとWebとの
Orchestration
Web
Webは”ヒト”と”モノ”を連携させるものへと進化

29. 今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション：WebRTC
 WebRTCを簡便に利用：SkyWay

30. リアルタイム性への追求
ここがボトル
ネックに？

31. p2p
サーバーを介さ
ないことによる
リアルタイム性

32. WebRTC
http://www.webrtc.org/

33. Video Chat
https://apprtc.appspot.com/

34. リアルタイムサービスへの期
待
 Webの基本は既存サービスの再構築
 リアルタイムサービスがWebに加わることで、更な
るイノベーション・社会構造の変化が期待される

35. Cube Slam
https://www.cubeslam.com/

36. 今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション：WebRTC
 WebRTCを簡便に利用：SkyWay

37. WebRTCの海外動向
http://html5experts.jp/yusuke-naka/1130/

38. 日本でも、もっと
普及したい！！

39. WebRTCもうちょっと詳しく
サーバーサイド
コーディング
セッション情
報の交換
Broker
Server
Stun
server
NATのhole
punching
NAT
WebRTC
Web
app
NAT
WebRTC
Web
app
データの交換
http://blog.livedoor.jp/kotesaki/archives/1794148.html

40. WebRTCもうちょっと詳しく
セッション情
報の交換
Broker
Server
Stun
server
とにかくめんどくさい
NATのhole
punching
NAT
WebRTC
Web
app
NAT
WebRTC
Web
app
データの交換

41. ふつーに書くと
（browser side）
https://github.com/KensakuKOMATSU/rtc_datachannel/blob/master/
public/javascripts/script.js

42. ふつーに書くと
（server side）
https://github.com/KensakuKOMATSU/rtc_datachannel/blob/mast
er/app.js

43. 毎回こんなコード書い
てられない・・・

44. 余談ですが、、、
 HTML5 = HTML5 + CSS3 + Javascript
 HTML5, CSS3 : Declarative
 複雑なことを宣言的に簡単に実現
 Javascript : Imperative
 複雑かつ高度なプログラミングに対応する低位の命令
セット

45. 最近のAPIの傾向
 素のAPIはかなり難しい。
 通常はラッパーを使うことを想定
一般の開発者
wrapper
W3C spec JS API
専門家

46. wrapper
 Peer.js
http://peerjs.com/

47. 参考URL
http://blog.livedoor.jp/kotesaki/archives/1856455.htm
l

48. SkyWay (preview release!)
Peerjs互換
http://nttcom.github.io/skyway/

49. WebRTCを簡単に使えるBaaS
サーバーサイド Broker
コーディング Server
セッション情
報の交換
Stun
server
NAT
WebRTC
Web
app
NATのhole
punching
NAT
WebRTC
Web
app
この部分は、
SkyWayが提供
（気にしなくて
いい）
ブラウザ部分の
開発に集中
データの交換

50. コードの短縮化
220 line => 50 line
サンプルレベル
ならサーバーサ
イドコーディン
グは不要！！
https://gist.github.com/KensakuKOMATSU/5377673

51. より詳しくは・・・
http://nttcom.github.io/skyway/docs/

52. Preview releaseにつき無料!!
http://nttcom.github.io/skyway/registration.html

53. Pull request, Issueお待ちしてい
ます!!
https://github.com/nttcom/peerjs

54. Conclusion
 リアルタイム化へと突き進むWebについて、歴史・
最新動向を紹介した
 リアルタイム化へと進化してきた歴史
 “ヒト” だけでなく “モノ” もその範疇へ
 リアルタイムサービスを支えるWebRTCの紹介
 簡便にWebRTCを：SkyWay

55. 日本にもっと
リアルタイムWebを!!
ブースに是非お立ち寄りく
ださい！！
Thank you!!
@komasshu