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 について、歴史・最

新動向を紹介する

今日の AgendaWeb の歴史とリアルタイム化への流れ

モノへと広がる Web

リアルタイムコミュニケーション： WebRTC

WebRTC を簡便に利用： SkyWay

初期の Web （ 1992 年）

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





初期の Web

文書を閲覧するもの＝ブラウザ

Web2.0 (2004 〜 )

Web2.0

AjaxInteractive Web

SNS （ 2009 ？〜）

https://www.facebook.com/

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

コラボレーション→オーケストレーション

コラボレーション（共同作業）

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

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

Leap Motion

leapjs

http://js.leapmotion.com/




examples

http://js.leapmotion.com/examples




Chrome.serial

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 もうちょっと詳しく

WebRTCWebapp

WebRTCWebapp

BrokerServer

Stunserver

NAT NAT

セッション情報の交換

NAT の hole punching

データの交換

http://blog.livedoor.jp/kotesaki/archives/1794148.html

サーバーサイドコーディング

WebRTC もうちょっと詳しく

WebRTCWebapp

WebRTCWebapp

BrokerServer

Stunserver

NAT NAT



データの交換

とにかくめんどくさい

ふつーに書くと（ browser side ）

https://github.com/KensakuKOMATSU/rtc_datachannel/blob/master/public/javascripts/script.js











ふつーに書くと（ server side ）

https://github.com/KensakuKOMATSU/rtc_datachannel/blob/master/app.js









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

余談ですが、、、HTML5 = HTML5 + CSS3 + Javascript

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

Javascript : Imperative 複雑かつ高度なプログラミングに対応する低位の命令

セット

最近の API の傾向素の API はかなり難しい。

通常はラッパーを使うことを想定

W3C spec JS API

wrapper

一般の開発者

専門家

wrapperPeer.js

http://peerjs.com/

参考 URL

http://blog.livedoor.jp/kotesaki/archives/1856455.html

SkyWay (preview release!)

http://nttcom.github.io/skyway/

Peerjs 互換

WebRTC を簡単に使えるBaaS

WebRTCWebapp

WebRTCWebapp

BrokerServer

Stunserver

NAT NAT



データの交換

サーバーサイドコーディング

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

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

コードの短縮化

https://gist.github.com/KensakuKOMATSU/5377673

220 line => 50 line

サンプルレベルならサーバーサイドコーディン

グは不要！！






より詳しくは・・・

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

Technology