Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ࠓޙͷ՝ • ࣗಈతʹೝূ͍ͨ͠ • ύιίϯ㱻εϚϗʹݶΒͣɺ ήʔϜͰϓϨΠϠʔϚονϯάͰ͖ͦ͏
Slide 42
Slide 42 text
ϦΞϧλΠϜ௨৴ָ͍͠ʂ
Slide 43
Slide 43 text
express.io Ͱ շదͳϦΞϧλΠϜ௨৴ϥΠϑΛ