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

 html5jスタッフ

 Google Developer Expert (HTML5)
...
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...
WebRTCもうちょっと詳しく
セッション情
報の交換

Broker
Server
Stun
server

とにかくめんどくさい

NATのhole
punching

NAT

WebRTC
Web
app

NAT

WebRTC
We...
ふつーに書くと
(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

Web...
コードの短縮化

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の紹介
 簡...
日本にもっと
リアルタイムWebを!!
ブースに是非お立ち寄りく
ださい!!
Thank you!!
@komasshu
Upcoming SlideShare
Loading in...5
×

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

1,106
-1

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

  1. 1. Webによるデバイスを用いた リアルタイムサービスの可能性 2013.12.14(sat) 神戸ITフェスティバル こまつけんさく
  2. 2. 自己紹介  名前:小松健作  所属:NTT communications  HTML5の研究開発  HTML5の啓蒙・コミュニティ運営  html5jスタッフ  Google Developer Expert (HTML5)  Microsoft Most Valuable Professional(IE)
  3. 3. Today’s Main Idea  リアルタイム化へと突き進むWebについて、歴史・ 最新動向を紹介する
  4. 4. 今日のAgenda  Webの歴史とリアルタイム化への流れ  モノへと広がるWeb  リアルタイムコミュニケーション:WebRTC  WebRTCを簡便に利用:SkyWay
  5. 5. 今日のAgenda  Webの歴史とリアルタイム化への流れ  モノへと広がるWeb  リアルタイムコミュニケーション:WebRTC  WebRTCを簡便に利用:SkyWay
  6. 6. 初期のWeb(1992年) http://www.tsukuba.gr.jp/first/kek.html
  7. 7. 初期のWeb 文書を閲覧するもの =ブラウザ
  8. 8. Web2.0 (2004〜)
  9. 9. Web2.0 Ajax Interactive Web
  10. 10. SNS(2009?〜) https://twitter.com/ https://www.facebook.com/
  11. 11. SNS Communication ….
  12. 12. ユースケースの拡大 文書(アーカイブ)を共有するもの リアルタイムにメッセージを共有するもの Webの利用シーンが多様化
  13. 13. 多様化はSNSに留まらない ?
  14. 14. Communication機能による アプリケーションのコラボ レーション化 https://drive.google.com/
  15. 15. Webの可能性 既存のアプリケーションにつながる・共有が作用 イノベーション、社会現象が発生
  16. 16. ここ1, 2年の変化  Webのリアルタイム化が加速
  17. 17. Browser Quest http://browserquest.mozilla.org/
  18. 18. World Wide Maze http://chrome.com/maze/
  19. 19. もっと詳しく知りたい方は http://www.html5rocks.com/ja/tutorials/casestudies/world_wide_maze/
  20. 20. Browser to Browserのリアル タイム化、利用シーンの拡大
  21. 21. 今日のAgenda  Webの歴史とリアルタイム化への流れ  モノへと広がるWeb  リアルタイムコミュニケーション:WebRTC  WebRTCを簡便に利用:SkyWay
  22. 22. コラボレーション →オーケストレーション コラボレーション(共同作業) オーケストレーション(連携)  その範疇は”ヒト”だけではなく、”モノ”へと拡大
  23. 23. Leap Motion
  24. 24. leapjs http://js.leapmotion.com/
  25. 25. examples http://js.leapmotion.com/examples
  26. 26. Chrome.serial
  27. 27. Arduino を serial APIで操作
  28. 28. デバイスとWebとの Orchestration Web Webは”ヒト”と”モノ”を連携させるものへと進化
  29. 29. 今日のAgenda  Webの歴史とリアルタイム化への流れ  モノへと広がるWeb  リアルタイムコミュニケーション:WebRTC  WebRTCを簡便に利用:SkyWay
  30. 30. リアルタイム性への追求 ここがボトル ネックに?
  31. 31. p2p サーバーを介さ ないことによる リアルタイム性
  32. 32. WebRTC http://www.webrtc.org/
  33. 33. Video Chat https://apprtc.appspot.com/
  34. 34. リアルタイムサービスへの期 待  Webの基本は既存サービスの再構築  リアルタイムサービスがWebに加わることで、更な るイノベーション・社会構造の変化が期待される
  35. 35. Cube Slam https://www.cubeslam.com/
  36. 36. 今日のAgenda  Webの歴史とリアルタイム化への流れ  モノへと広がるWeb  リアルタイムコミュニケーション:WebRTC  WebRTCを簡便に利用:SkyWay
  37. 37. WebRTCの海外動向 http://html5experts.jp/yusuke-naka/1130/
  38. 38. 日本でも、もっと 普及したい!!
  39. 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. 40. WebRTCもうちょっと詳しく セッション情 報の交換 Broker Server Stun server とにかくめんどくさい NATのhole punching NAT WebRTC Web app NAT WebRTC Web app データの交換
  41. 41. ふつーに書くと (browser side) https://github.com/KensakuKOMATSU/rtc_datachannel/blob/master/ public/javascripts/script.js
  42. 42. ふつーに書くと (server side) https://github.com/KensakuKOMATSU/rtc_datachannel/blob/mast er/app.js
  43. 43. 毎回こんなコード書い てられない・・・
  44. 44. 余談ですが、、、  HTML5 = HTML5 + CSS3 + Javascript  HTML5, CSS3 : Declarative  複雑なことを宣言的に簡単に実現  Javascript : Imperative  複雑かつ高度なプログラミングに対応する低位の命令 セット
  45. 45. 最近のAPIの傾向  素のAPIはかなり難しい。  通常はラッパーを使うことを想定 一般の開発者 wrapper W3C spec JS API 専門家
  46. 46. wrapper  Peer.js http://peerjs.com/
  47. 47. 参考URL http://blog.livedoor.jp/kotesaki/archives/1856455.htm l
  48. 48. SkyWay (preview release!) Peerjs互換 http://nttcom.github.io/skyway/
  49. 49. WebRTCを簡単に使えるBaaS サーバーサイド Broker コーディング Server セッション情 報の交換 Stun server NAT WebRTC Web app NATのhole punching NAT WebRTC Web app この部分は、 SkyWayが提供 (気にしなくて いい) ブラウザ部分の 開発に集中 データの交換
  50. 50. コードの短縮化 220 line => 50 line サンプルレベル ならサーバーサ イドコーディン グは不要!! https://gist.github.com/KensakuKOMATSU/5377673
  51. 51. より詳しくは・・・ http://nttcom.github.io/skyway/docs/
  52. 52. Preview releaseにつき無料!! http://nttcom.github.io/skyway/registration.html
  53. 53. Pull request, Issueお待ちしてい ます!! https://github.com/nttcom/peerjs
  54. 54. Conclusion  リアルタイム化へと突き進むWebについて、歴史・ 最新動向を紹介した  リアルタイム化へと進化してきた歴史  “ヒト” だけでなく “モノ” もその範疇へ  リアルタイムサービスを支えるWebRTCの紹介  簡便にWebRTCを:SkyWay
  55. 55. 日本にもっと リアルタイムWebを!! ブースに是非お立ち寄りく ださい!! Thank you!! @komasshu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×