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

  • 745 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
745
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
10
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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