Webによるデバイスを用いた
リアルタイムサービスの可能性
2013.12.14(sat) 神戸ITフェスティバル
こまつけんさく
自己紹介
 名前:小松健作
 所属:NTT communications
 HTML5の研究開発
 HTML5の啓蒙・コミュニティ運営

 html5jスタッフ

 Google Developer Expert (HTML5)
 Microsoft Most Valuable Professional(IE)
Today’s Main Idea
 リアルタイム化へと突き進むWebについて、歴史・
最新動向を紹介する
今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション:WebRTC
 WebRTCを簡便に利用:SkyWay
今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション:WebRTC
 WebRTCを簡便に利用:SkyWay
初期のWeb(1992年)

http://www.tsukuba.gr.jp/first/kek.html
初期のWeb
文書を閲覧するもの
=ブラウザ
Web2.0 (2004〜)
Web2.0
Ajax
Interactive Web
SNS(2009?〜)

https://twitter.com/
https://www.facebook.com/
SNS
Communication
….
ユースケースの拡大
文書(アーカイブ)を共有するもの

リアルタイムにメッセージを共有するもの

Webの利用シーンが多様化
多様化はSNSに留まらない
?
Communication機能による
アプリケーションのコラボ
レーション化

https://drive.google.com/
Webの可能性
既存のアプリケーションにつながる・共有が作用

イノベーション、社会現象が発生
ここ1, 2年の変化
 Webのリアルタイム化が加速
Browser Quest

http://browserquest.mozilla.org/
World Wide Maze

http://chrome.com/maze/
もっと詳しく知りたい方は

http://www.html5rocks.com/ja/tutorials/casestudies/world_wide_maze/
Browser to Browserのリアル
タイム化、利用シーンの拡大
今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション:WebRTC
 WebRTCを簡便に利用:SkyWay
コラボレーション
→オーケストレーション
コラボレーション(共同作業)

オーケストレーション(連携)

 その範疇は”ヒト”だけではなく、”モノ”へと拡大
Leap Motion
leapjs

http://js.leapmotion.com/
examples

http://js.leapmotion.com/examples
Chrome.serial
Arduino を serial APIで操作
デバイスとWebとの
Orchestration

Web

Webは”ヒト”と”モノ”を連携させるものへと進化
今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション:WebRTC
 WebRTCを簡便に利用:SkyWay
リアルタイム性への追求

ここがボトル
ネックに?
p2p
サーバーを介さ
ないことによる
リアルタイム性
WebRTC

http://www.webrtc.org/
Video Chat

https://apprtc.appspot.com/
リアルタイムサービスへの期
待
 Webの基本は既存サービスの再構築

 リアルタイムサービスがWebに加わることで、更な
るイノベーション・社会構造の変化が期待される
Cube Slam

https://www.cubeslam.com/
今日のAgenda
 Webの歴史とリアルタイム化への流れ
 モノへと広がるWeb
 リアルタイムコミュニケーション:WebRTC
 WebRTCを簡便に利用:SkyWay
WebRTCの海外動向

http://html5experts.jp/yusuke-naka/1130/
日本でも、もっと
普及したい!!
WebRTCもうちょっと詳しく
サーバーサイド
コーディング

セッション情
報の交換

Broker
Server

Stun
server
NATのhole
punching
NAT

WebRTC
Web
app

NAT

WebRTC
Web
app

データの交換

http://blog.livedoor.jp/kotesaki/archives/1794148.html
WebRTCもうちょっと詳しく
セッション情
報の交換

Broker
Server
Stun
server

とにかくめんどくさい

NATのhole
punching

NAT

WebRTC
Web
app

NAT

WebRTC
Web
app

データの交換
ふつーに書くと
(browser side)

https://github.com/KensakuKOMATSU/rtc_datachannel/blob/master/
public/javascripts/script.js
ふつーに書くと
(server side)

https://github.com/KensakuKOMATSU/rtc_datachannel/blob/mast
er/app.js
毎回こんなコード書い
てられない・・・
余談ですが、、、
 HTML5 = HTML5 + CSS3 + Javascript

 HTML5, CSS3 : Declarative
 複雑なことを宣言的に簡単に実現

 Javascript : Imperative
 複雑かつ高度なプログラミングに対応する低位の命令
セット
最近のAPIの傾向
 素のAPIはかなり難しい。
 通常はラッパーを使うことを想定
一般の開発者

wrapper

W3C spec JS API

専門家
wrapper
 Peer.js

http://peerjs.com/
参考URL

http://blog.livedoor.jp/kotesaki/archives/1856455.htm
l
SkyWay (preview release!)

Peerjs互換

http://nttcom.github.io/skyway/
WebRTCを簡単に使えるBaaS
サーバーサイド Broker
コーディング Server

セッション情
報の交換

Stun
server

NAT

WebRTC
Web
app

NATのhole
punching

NAT

WebRTC
Web
app

この部分は、
SkyWayが提供
(気にしなくて
いい)

ブラウザ部分の
開発に集中

データの交換
コードの短縮化

220 line => 50 line

サンプルレベル
ならサーバーサ
イドコーディン
グは不要!!

https://gist.github.com/KensakuKOMATSU/5377673
より詳しくは・・・

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

http://nttcom.github.io/skyway/registration.html
Pull request, Issueお待ちしてい
ます!!

https://github.com/nttcom/peerjs
Conclusion
 リアルタイム化へと突き進むWebについて、歴史・
最新動向を紹介した
 リアルタイム化へと進化してきた歴史
 “ヒト” だけでなく “モノ” もその範疇へ
 リアルタイムサービスを支えるWebRTCの紹介
 簡便にWebRTCを:SkyWay
日本にもっと
リアルタイムWebを!!
ブースに是非お立ち寄りく
ださい!!
Thank you!!
@komasshu

Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)