Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebRTCでリアル店舗を作ってみる

1,614 views

Published on

【#techbuzz】10/23 第18回 HTML5+JS 勉強会
https://atnd.org/events/69852

Published in: Software
  • Be the first to comment

WebRTCでリアル店舗を作ってみる

  1. 1. WebRTCでリアル店舗を 作ってみる JUNICHI OKAMURA@HTML5+JS勉強会 2015.10.23 1
  2. 2. 自己紹介 岡村 純一 PayPal Integration Manager/ Evangelist Scala/Java/Ruby/JS/PHP/../iOS/../ぱわぽ ROCK/BEER/WINE/JOJO/ API (& meetup) lover @benzookapi jokamura@paypal.com 2
  3. 3. 3 今日のテーマ ・WebRTCとは?の超簡単説明 ・セットで覚えるNode.jsの超簡単説明 ・PayPal APIを使った面白デモ ・TDD(Talk Driven Development)の感想 ・今後の考察とQ&A 1日程度で習得したので難しいことは答えられません! よりよいコンテンツはたくさんあるのでそれを紹介します! デモメインで行います!
  4. 4. 4 参考にさせていただいた情報 ・WebRTCを使ってみよう! https://html5experts.jp/mganeko/5098/ ・東京Node学園2013 WebRTCを始めよう http://www.slideshare.net/mganeko/2013-web-rtcnode ・m_shige1979のささやかな抵抗と欲望の日々 http://m-shige1979.hatenablog.com/entry/2014/06/18/080000 ・Express4系とSocket.io1系チュートリアルを試してみる http://qiita.com/n0bisuke/items/5820538e7e5f3432a4d7
  5. 5. WebRTCって? 5
  6. 6. 6 Web Real-Time Communication ・ブラウザ上での音声、動画通信技術 (自作Skype。ブラウザ外も可) ・HTML5の一部 ・JavaScriptとHTMLだけで実装可能 (理論上は) ・Node.js(socket.io)と使われることが多い
  7. 7. 7 こんなことできます Amazon(Kindle) MayDay
  8. 8. 8 EC、決済、保険などのCRMの例多し ふむふむお金と相性いいんだな... (後のデモへのフラグ)
  9. 9. 9 Pros(いいところ) ・標準技術である(ベンダーロックではない) ・簡単(凝ったことしなければ)
  10. 10. 10 Cons(わるいところ) ・スマホの標準ブラウザでほとんど使えない ・アプリライブラリがあるがちょっとハードル高い
  11. 11. 11 覚える技術 ・WebRTC系JavaScript (RTCXXX、XXXGetUserMedia、…) ・SDP (Session Description Protocol) ・ICE (Interactive Connectivity Establishment) ・NAT越え (STUN、TURN) ・Socket.io (他のもので代替可能)
  12. 12. 12 すごくざっくり説明すると ブラウザの持ってる 端末情報 SDP ICE ブラウザの持ってる 端末情報 SDP ICE テキストデータとして交換 通信可能 手作業で コピペ可能
  13. 13. 13 すごくざっくり説明すると ブラウザの持ってる 端末情報 SDP ICE ブラウザの持ってる 端末情報 SDP ICE テキストデータとして交換 通信可能 中間サーバーで 自動化
  14. 14. Node.jsとSocket.io 14
  15. 15. 15 Node.jsとSocket.ioざっくり ・サーバーサイドJavaScript (途中分裂したりしたがめでたく最近統合) ・WebSocket (サーバーとクライアントの双方向通信プロトコル。 元はHTML5の一部) ・Socket.ioはWebSocketを扱うNode.jsの ライブラリ
  16. 16. 16 なんでNode.js使うの? ・SDPとICEを交換するため(シグナリング) ・WEBアプリであれば理論上なんでもいいが、 普通のHTTP通信だとオーバーヘッド高いので WebSocket使う ・WebSocketが楽に使えるのがSocket.ioなので Node.js使う(クライアントもJSだし)
  17. 17. デモ1:SDPとICEを追ってみる 17
  18. 18. 18 SDPとICE交換 ・以下のデモコードをNode.jsのフレームワーク Express用にちょっと変えてみました https://html5experts.jp/mganeko/5349/ ・iPhoneとPCでテストします。iPhoneはwebRTC 対応のブラウザ「Bowser」を利用 http://www.openwebrtc.org/bowser/ なぜかBowserでJSがうまく動かないので急遽Mac2台でデモ!
  19. 19. 19 デモ1 Internet ビデオ端末1 ビデオ端末2 テザリング シグナリングサーバー ビデオ通信を確認してみる どちらかを会場wifiにすると繋がらない
  20. 20. デモ2:リアル店舗を作ってみる 20
  21. 21. 21 動機 ・オンラインショッピングってなんか味気ないなー。 ・昔のタバコ屋とか駄菓子屋みたいにWEBでも対 面で買い物できたらいいなー。 ・対面..対面..対面..あ、WebRTCだ! ・買い物..買い物..買い物..あ、PayPalだ!
  22. 22. 22 デモ2 Internet 雑貨屋おばちゃん スタンプ小僧 テザリング シグナリングサーバー 購入の場として人間味出し てみる
  23. 23. 感想と今後の考察、QA 23
  24. 24. 24 TDD(一夜漬け学習)感想 ・ChromeとFirefoxでJSの方言があるのが痛い ・スマホ標準環境で使えないのはもったいない ・途中でリダイレクト挟むと厳しい ・実用にNAT越えは必須 ・SafariはiOSだけ対応してくれればいい ・IEはtoB向けサービス作る以外はいらないかも ・とりあえず動くとこまではすぐできて楽しい
  25. 25. 25 今後の考察 ・メジャーブラウザとプラットフォームが 対応すれば普及は急速にすすむはず ・以下みると政治的要因でまだ遠そう.. http://jp.techcrunch.com/2015/01/29/20150128this-is-webrtcs- yearor-is-it/ ・今回のデモはネタだがCRMやECの体験に大きな 変化が訪れるかも..
  26. 26. 26 Q&A
  27. 27. Thank you JUNICHI OKAMURA@HTML5+JS勉強会 2015.10.23 27

×