40
v .2

Peer js + clmtrackrでつくるモテるアプリ

  • Upload
    -

  • View
    282

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Peer js + clmtrackrでつくるモテるアプリ

vol.2

Page 2: Peer js + clmtrackrでつくるモテるアプリ

モテるプログラマーJava

Scriptで

になる!

Page 3: Peer js + clmtrackrでつくるモテるアプリ

永井 ひろかず

@tabibits FB: nagaihirokazu

株式会社 アラタナ 製品開発・品質管理 マネジャー

(遊び人)

Page 4: Peer js + clmtrackrでつくるモテるアプリ
Page 5: Peer js + clmtrackrでつくるモテるアプリ

モテたいを真剣に考える

Page 6: Peer js + clmtrackrでつくるモテるアプリ
Page 7: Peer js + clmtrackrでつくるモテるアプリ
Page 8: Peer js + clmtrackrでつくるモテるアプリ
Page 9: Peer js + clmtrackrでつくるモテるアプリ
Page 10: Peer js + clmtrackrでつくるモテるアプリ

モテない現実

Page 11: Peer js + clmtrackrでつくるモテるアプリ

モテない現実

モテると思えない

Page 12: Peer js + clmtrackrでつくるモテるアプリ

魅力がない

モテない現実

モテると思えない

Page 13: Peer js + clmtrackrでつくるモテるアプリ

魅力がない

モテない現実

モテると思えない

負のスパイラル

Page 14: Peer js + clmtrackrでつくるモテるアプリ

モテる装置Java

Scriptで

を作ってみた!

Page 15: Peer js + clmtrackrでつくるモテるアプリ

demo http://nagai.gehirn.ne.jp/face/index.html

Page 16: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Web RTC

Page 17: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

WebRTC (Web Real-Time Communication)とはW3Cが提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。 - wikipediaより

Page 18: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

つまり、 P2PがWEBブラウザアプリで実装できる。

Internet

P2P…サーバーを介さずに直接データのやり取りをする。高速。

Page 19: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

A B C

Page 20: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

A B C

Page 21: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレスA B C

Page 22: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレス

A B C

Page 23: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレス

A B C

ポート番号で PCを振り分け

Page 24: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

だけど、実装は結構めんどい。

Internet

プライベートアドレス

グローバルアドレスグローバルアドレスと

ポート番号がわからないと 通信できない。

A B C

ポート番号で PCを振り分け

Page 25: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

そこで、2台のサーバーを設置

Internet

A B C

Page 26: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Page 27: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

自分の グローバルアドレスと ポート番号を教えてくれ

Page 28: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

自分の グローバルアドレスと ポート番号を教えてくれ

自分の グローバルアドレスと

ポート番号を相手PCにPushしてくれる

Page 29: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

Page 30: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

Page 31: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

Page 32: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

Internet

A B C

ICEサーバー Signalingサーバー

Aの G add PortNo

Page 33: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

めんどい!

Page 34: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

そんな「めんどい」を 全部肩代わりしてくれるのが、

Page 35: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その①

ソースを見る https://github.com/hironagai/peerjs

Page 36: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その②

clmTrackr

Page 37: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その②

Page 38: Peer js + clmtrackrでつくるモテるアプリ

使った技術 その②

Page 39: Peer js + clmtrackrでつくるモテるアプリ

demo https://hironagai.github.io/clmtrackr_sample/

Page 40: Peer js + clmtrackrでつくるモテるアプリ

PEERJS http://peerjs.com/

clmtrackr https://github.com/auduno/clmtrackr https://auduno.github.io/clmtrackr/examples/facedeform.html

顔認証を使ったサービス https://futureself.orange.com/ http://ava-sessions.com/