OpenIL vol.1 - Speaker Deck

Slide 1

Slide 1 text

SMARTPHONE CONTROLLER OpenIL vol.1  த઒ ෢ݑ

Slide 2

Slide 2 text

ࣗݾ঺հ • var age = 19 ࡀ (஀ੜ೔ 2/24) • ๺ւಓ޻ۀେֶɹֶ෦ 2 ೥ੜ • ΠϯϑΟχοτϧʔϓɹΞϧόΠτ • झຯ͸ཱྀߦɺࣸਅɺϓϩάϥϛϯά • Web Developer

Slide 3

Slide 3 text

͋ͱ 3 ೔Ͱ age++ ͢ΔΠϕϯτ͕ɻ

Slide 4

Slide 4 text

p.tl/53x8  24 ࣌ؒड෇த

Slide 5

Slide 5 text

WORKS • IT ษڧձΧϨϯμʔ for Android & iOS • Image Shortener - [img.ww24.jp] • Realtime Chat - [rtc.ww24.jp] • Connect Smartphone - [connect-sp.ww24.jp]

Slide 6

Slide 6 text

IT ษڧձΧϨϯμʔ εϚʔτϑΥϯΞϓϦ

Slide 7

Slide 7 text

IMAGE SHORTENER ୹ॖ URL Λར༻ͨ͠ΦϯϥΠϯετϨʔδ

Slide 8

Slide 8 text

REALTIME CHAT Google Drive Realtime API Λར༻ͨ͠ Chat

Slide 9

Slide 9 text

CONNECT SMARTPHONE ύιίϯͱεϚϗͷϦΞϧλΠϜ࿈ܞ

Slide 10

Slide 10 text

CONNECT SMARTPHONE

Slide 11

Slide 11 text

CONNECT SMARTPHONE • Express.IO Λ࢖ͬͨɺεϚʔτϑΥϯͱύι ίϯͷϦΞϧλΠϜͳ࿈ܞΞϓϦέʔγϣϯ

Slide 12

Slide 12 text

AGENDA • ϦΞϧλΠϜͳ࿈ܞͱ͸ • Express ͱ Socket.IO • ࢓૊Έ • σϞ • αϯϓϧίʔυ • ໰୊఺ɺ՝୊

Slide 13

Slide 13 text

CONNECT SMARTPHONE • ϦΞϧλΠϜͳ࿈ܞͷྫ • Chrome World Wide Maze • https://chrome.com/maze/ • jsdo.it WebSocket Controller • http://jsdo.it/controller

Slide 14

Slide 14 text

CHROME WORLD WIDE MAZE Google ͷ໎࿏ήʔϜ

Slide 15

Slide 15 text

WEBSOCKET CONTROLLER jsdo.it

Slide 16

Slide 16 text

CONNECT SMARTPHONE εϚʔτϑΥϯΛύιίϯ΁ܨ͛ͯɺίϯτϩʔϥʹɻ

Slide 17

Slide 17 text

CONNECT SMARTPHONE • ࢓૊Έ • WebSocket Server (Socket.IO) • Web Application Server (Express.js) • Socket.IO + Express.js = Express.IO

Slide 18

Slide 18 text

ۚͷ EXPRESS ෺ޠௐͰղઆ

Slide 19

Slide 19 text

EXPRESS ͱ SOCKET.IO ͋ΔϓϩάϥϚ͕ίʔυΛॻ͍͍ͯͨͱ͜Ζɺ git commit ͢Δલʹख͕׈ͬͯΤσΟλ͝ͱ མͱͯ͠͠·͍·ͨ͠ɻ! ͢Δͱɺಥવঁਆ͕ݱΕʮ͋ͳ͕ͨམͱͨ͠ͷ͸ۚͷ express Ͱ͔͢ʁͦΕͱ΋ۜͷ Socket.IO Ͱ͔͢ʁʯͱਘͶ͖ͯ·ͨ͠ɻ

Slide 20

Slide 20 text

EXPRESS ͱ SOCKET.IO ਖ਼௚ऀͷϓϩάϥϚ͸ɺʮࢲ͕མͱͨ͠ͷ͸ੜͷ WebSocket Ͱ௨৴͢ΔεύήοςΟίʔυ Ͱ͢ʯͱ౴͑·͢ɻ

Slide 21

Slide 21 text

EXPRESS ͱ SOCKET.IO ਖ਼௚ऀͷϓϩάϥϚʹײ৺ͨ͠ঁਆ͸ɺ! express ͱ Socket.IO Λֻ͚߹Θͤͨɺ express.io ΛϓϩάϥϚʹत͚ΔͷͰͨ͠ɻ ຊ୊ͱແؔ܎Ͱ͢ɻ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

EXPRESS.IO express ͷΑ͏ͳ௚ײతͳϧʔςΟϯά express ͱڞ༗Ͱ͖Δηογϣϯ

Slide 24

Slide 24 text

CONNECT SMARTPHONE /connect/{connection_id}ɹʹϦμΠϨΫτ ઀ɹଓɹॲɹཧ ΞϓϦέʔγϣϯɾήʔϜϖʔδʹϦμΠϨΫτ

Slide 25

Slide 25 text

CONNECT SMARTPHONE Connect Smartphone Smartphone  (ࢠ୺຤) PC  (਌୺຤) Game Page 1 2 2 3 3 /connect/KCL98U

Slide 26

Slide 26 text

CONNECT SMARTPHONE Connect Smartphone Smartphone  (ࢠ୺຤) PC  (਌୺຤) Game Page Socket.IO

Slide 27

Slide 27 text

CONNECT SMARTPHONE • Connect Smartphone Ͱͷ઀ଓॲཧ • ཚ਺͔Β connection_id ੜ੒ • ਌୺຤ͱࢠ୺຤Λ connection_id Ͱর߹ • ਌୺຤ʹ઀ଓ୺຤(ࢠ୺຤)ͷҰཡΛදࣔ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

DEMO connect-sp.ww24.jp

Slide 33

Slide 33 text

αϯϓϧίʔυ

Slide 34

Slide 34 text

઀ଓ

Slide 35

Slide 35 text

ૹ৴ (ࢠ୺຤)

Slide 36

Slide 36 text

ड৴ (਌୺຤)

Slide 37

Slide 37 text

CONNECT SMARTPHONE • ໰୊఺ • ಉ͡ϒϥ΢βͰ 2 ը໘։͘ͱɺશ͘ಉ͡ηογϣϯ ৘ใΛ͍࣋ͬͯΔͷͰɺͲͪΒ͕਌͔൑ผͰ͖ͳ͍ ! ! ઌʹ઀ଓ͖ͯͨ͠ํ͕਌Ͱྑ͍ΑͶʂ ͨ·ʹόάΔ

Slide 38

Slide 38 text

྆ํࢠ୺຤ͱ൑ఆ͞ΕΔ͜ͱ͕͋Δɻ

Slide 39

Slide 39 text

CONNECT SMARTPHONE • ͳͥͦ͏ͳΔ͔… • HTTP ϦΫΤετ͸εςʔτϨεɻঢ়ଶΛ࣋ͨͳ ͍ɻঢ়ଶΛ࣋ͨͤΔͨΊʹηογϣϯΛ༻͍Δɻ • WebSocket ௨৴͸εςʔτϑϧɻίωΫγϣϯຖ ʹݸʑʹঢ়ଶΛอ࣋Ͱ͖Δɻϒϥ΢β͕ಉ͡Ͱ͋ͬ ͯ΋ɺ਌୺຤͔ࢠ୺຤͔൑ఆՄೳɻ

Slide 40

Slide 40 text

CONNECT SMARTPHONE • ϦμΠϨΫτͤ͞Δ࣮૷ʹͨ͠ཧ༝ • ελϯυΞϩϯͳ࣮૷Λ໨ࢦͨ͠ • αʔόͷ࣮૷ෆཁͰϦΞϧλΠϜ࿈ܞΛ࣮ݱ • URL ϧʔςΟϯά΍ࢠ୺຤ͷೝূͳͲɺ໘ ౗ͳॲཧΛҰׅͯ͠ߦͬͨ

Slide 41

Slide 41 text

ࠓޙͷ՝୊ • ࣗಈతʹೝূ͍ͨ͠ • ύιίϯ㱻εϚϗʹݶΒͣɺ  ήʔϜͰϓϨΠϠʔϚονϯά΋Ͱ͖ͦ͏