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

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

初期のWeb（1992年）

http://www.tsukuba.gr.jp/first/kek.html

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

Web2.0
Ajax
Interactive Web

SNS（2009？〜）

https://twitter.com/
https://www.facebook.com/

ユースケースの拡大
文書（アーカイブ）を共有するもの

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

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のリアル
タイム化、利用シーンの拡大

コラボレーション
→オーケストレーション
コラボレーション（共同作業）

オーケストレーション（連携）

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

leapjs

http://js.leapmotion.com/

examples

http://js.leapmotion.com/examples

Arduino を serial APIで操作

デバイスとWebとの
Orchestration

Web

Webは”ヒト”と”モノ”を連携させるものへと進化

リアルタイム性への追求

ここがボトル
ネックに？

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

WebRTC

http://www.webrtc.org/

Video Chat

https://apprtc.appspot.com/

リアルタイムサービスへの期
待
 Webの基本は既存サービスの再構築

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

Cube Slam

https://www.cubeslam.com/

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フェスティバル版）

More Related Content

Viewers also liked (9)

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

More from Kensaku Komatsu (20)

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