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

1. WebRTCでリアル店舗を
作ってみる
JUNICHI OKAMURA@HTML5+JS勉強会
2015.10.23
1

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
今日のテーマ
・WebRTCとは？の超簡単説明
・セットで覚えるNode.jsの超簡単説明
・PayPal APIを使った面白デモ
・TDD（Talk Driven Development）の感想
・今後の考察とQ&A
１日程度で習得したので難しいことは答えられません！
よりよいコンテンツはたくさんあるのでそれを紹介します！
デモメインで行います！

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. WebRTCって？
5

6. 6
Web Real-Time Communication
・ブラウザ上での音声、動画通信技術
（自作Skype。ブラウザ外も可）
・HTML５の一部
・JavaScriptとHTMLだけで実装可能
（理論上は）
・Node.js（socket.io）と使われることが多い

7. 7
こんなことできます
Amazon(Kindle) MayDay

8. 8
EC、決済、保険などのCRMの例多し
ふむふむお金と相性いいんだな．．．
（後のデモへのフラグ）

9. 9
Pros（いいところ）
・標準技術である（ベンダーロックではない）
・簡単（凝ったことしなければ）

10. 10
Cons（わるいところ）
・スマホの標準ブラウザでほとんど使えない
・アプリライブラリがあるがちょっとハードル高い

11. 11
覚える技術
・WebRTC系JavaScript
（RTCXXX、XXXGetUserMedia、…）
・SDP
（Session Description Protocol）
・ICE
（Interactive Connectivity Establishment）
・NAT越え
（STUN、TURN）
・Socket.io
（他のもので代替可能）

12. 12
すごくざっくり説明すると
ブラウザの持ってる
端末情報
SDP
ICE
ブラウザの持ってる
端末情報
SDP
ICE
テキストデータとして交換
通信可能
手作業で
コピペ可能

13. 13
すごくざっくり説明すると
ブラウザの持ってる
端末情報
SDP
ICE
ブラウザの持ってる
端末情報
SDP
ICE
テキストデータとして交換
通信可能
中間サーバーで
自動化

14. Node.jsとSocket.io
14

15. 15
Node.jsとSocket.ioざっくり
・サーバーサイドJavaScript
（途中分裂したりしたがめでたく最近統合）
・WebSocket
（サーバーとクライアントの双方向通信プロトコル。
元はHTML５の一部）
・Socket.ioはWebSocketを扱うNode.jsの
ライブラリ

16. 16
なんでNode.js使うの？
・SDPとICEを交換するため（シグナリング）
・WEBアプリであれば理論上なんでもいいが、
普通のHTTP通信だとオーバーヘッド高いので
WebSocket使う
・WebSocketが楽に使えるのがSocket.ioなので
Node.js使う（クライアントもJSだし）

17. デモ１：SDPとICEを追ってみる
17

18. 18
SDPとICE交換
・以下のデモコードをNode.jsのフレームワーク
Express用にちょっと変えてみました
https://html5experts.jp/mganeko/5349/
・iPhoneとPCでテストします。iPhoneはwebRTC
対応のブラウザ「Bowser」を利用
http://www.openwebrtc.org/bowser/
なぜかBowserでJSがうまく動かないので急遽Mac２台でデモ！

19. 19
デモ１
Internet
ビデオ端末１ ビデオ端末２
テザリング
シグナリングサーバー
ビデオ通信を確認してみる
どちらかを会場wifiにすると繋がらない

20. デモ2：リアル店舗を作ってみる
20

21. 21
動機
・オンラインショッピングってなんか味気ないなー。
・昔のタバコ屋とか駄菓子屋みたいにWEBでも対
面で買い物できたらいいなー。
・対面..対面..対面..あ、WebRTCだ！
・買い物..買い物..買い物..あ、PayPalだ！

22. 22
デモ２
Internet
雑貨屋おばちゃん スタンプ小僧
テザリング
シグナリングサーバー
購入の場として人間味出し
てみる

23. 感想と今後の考察、QA
23

24. 24
TDD（一夜漬け学習）感想
・ChromeとFirefoxでJSの方言があるのが痛い
・スマホ標準環境で使えないのはもったいない
・途中でリダイレクト挟むと厳しい
・実用にNAT越えは必須
・SafariはiOSだけ対応してくれればいい
・IEはtoB向けサービス作る以外はいらないかも
・とりあえず動くとこまではすぐできて楽しい

25. 25
今後の考察
・メジャーブラウザとプラットフォームが
対応すれば普及は急速にすすむはず
・以下みると政治的要因でまだ遠そう..
http://jp.techcrunch.com/2015/01/29/20150128this-is-webrtcs-
yearor-is-it/
・今回のデモはネタだがCRMやECの体験に大きな
変化が訪れるかも..

26. 26
Q&A

27. Thank you
JUNICHI OKAMURA@HTML5+JS勉強会
2015.10.23
27