OpenIL vol.1

http://www.infiniteloop.co.jp/blog/2014/02/publicstudy01/

Transcript

1. SMARTPHONE CONTROLLER OpenIL vol.1
 த઒ ෢ݑ
2. ࣗݾ঺հ • var age = 19 ࡀ (஀ੜ೔ 2/24) • ๺ւಓ޻ۀେֶɹֶ෦ 2 ೥ੜ • ΠϯϑΟχοτϧʔϓɹΞϧόΠτ • झຯ͸ཱྀߦɺࣸਅɺϓϩάϥϛϯά • Web Developer
3. ͋ͱ 3 ೔Ͱ age++ ͢ΔΠϕϯτ͕ɻ
4. p.tl/53x8
 24 ࣌ؒड෇த
5. WORKS • IT ษڧձΧϨϯμʔ for Android & iOS • Image Shortener - [img.ww24.jp] • Realtime Chat - [rtc.ww24.jp] • Connect Smartphone - [connect-sp.ww24.jp]
6. IT ษڧձΧϨϯμʔ εϚʔτϑΥϯΞϓϦ
7. IMAGE SHORTENER ୹ॖ URL Λར༻ͨ͠ΦϯϥΠϯετϨʔδ
8. REALTIME CHAT Google Drive Realtime API Λར༻ͨ͠ Chat
9. CONNECT SMARTPHONE ύιίϯͱεϚϗͷϦΞϧλΠϜ࿈ܞ
10. CONNECT SMARTPHONE
11. CONNECT SMARTPHONE • Express.IO Λ࢖ͬͨɺεϚʔτϑΥϯͱύι ίϯͷϦΞϧλΠϜͳ࿈ܞΞϓϦέʔγϣϯ
12. AGENDA • ϦΞϧλΠϜͳ࿈ܞͱ͸ • Express ͱ Socket.IO • ࢓૊Έ • σϞ • αϯϓϧίʔυ • ໰୊఺ɺ՝୊
13. CONNECT SMARTPHONE • ϦΞϧλΠϜͳ࿈ܞͷྫ • Chrome World Wide Maze • https://chrome.com/maze/ • jsdo.it WebSocket Controller • http://jsdo.it/controller
14. CHROME WORLD WIDE MAZE Google ͷ໎࿏ήʔϜ
15. WEBSOCKET CONTROLLER jsdo.it
16. CONNECT SMARTPHONE εϚʔτϑΥϯΛύιίϯ΁ܨ͛ͯɺίϯτϩʔϥʹɻ
17. CONNECT SMARTPHONE • ࢓૊Έ • WebSocket Server (Socket.IO) • Web Application Server (Express.js) • Socket.IO + Express.js = Express.IO
18. ۚͷ EXPRESS ෺ޠௐͰղઆ
19. EXPRESS ͱ SOCKET.IO ͋ΔϓϩάϥϚ͕ίʔυΛॻ͍͍ͯͨͱ͜Ζɺ git commit ͢Δલʹख͕׈ͬͯΤσΟλ͝ͱ མͱͯ͠͠·͍·ͨ͠ɻ! ͢Δͱɺಥવঁਆ͕ݱΕʮ͋ͳ͕ͨམͱͨ͠ͷ͸ۚͷ express Ͱ͔͢ʁͦΕͱ΋ۜͷ Socket.IO Ͱ͔͢ʁʯͱਘͶ͖ͯ·ͨ͠ɻ
20. EXPRESS ͱ SOCKET.IO ਖ਼௚ऀͷϓϩάϥϚ͸ɺʮࢲ͕མͱͨ͠ͷ͸ੜͷ WebSocket Ͱ௨৴͢ΔεύήοςΟίʔυ Ͱ͢ʯͱ౴͑·͢ɻ
21. EXPRESS ͱ SOCKET.IO ਖ਼௚ऀͷϓϩάϥϚʹײ৺ͨ͠ঁਆ͸ɺ! express ͱ Socket.IO Λֻ͚߹Θͤͨɺ express.io ΛϓϩάϥϚʹत͚ΔͷͰͨ͠ɻ ຊ୊ͱແؔ܎Ͱ͢ɻ
23. EXPRESS.IO express ͷΑ͏ͳ௚ײతͳϧʔςΟϯά express ͱڞ༗Ͱ͖Δηογϣϯ
24. CONNECT SMARTPHONE /connect/{connection_id}ɹʹϦμΠϨΫτ ઀ɹଓɹॲɹཧ ΞϓϦέʔγϣϯɾήʔϜϖʔδʹϦμΠϨΫτ
25. CONNECT SMARTPHONE Connect Smartphone Smartphone
 (ࢠ୺຤) PC
 (਌୺຤) Game Page 1 2 2 3 3 /connect/KCL98U
26. CONNECT SMARTPHONE Connect Smartphone Smartphone
 (ࢠ୺຤) PC
 (਌୺຤) Game Page Socket.IO
27. CONNECT SMARTPHONE • Connect Smartphone Ͱͷ઀ଓॲཧ • ཚ਺͔Β connection_id ੜ੒ • ਌୺຤ͱࢠ୺຤Λ connection_id Ͱর߹ • ਌୺຤ʹ઀ଓ୺຤(ࢠ୺຤)ͷҰཡΛදࣔ
32. DEMO connect-sp.ww24.jp
33. αϯϓϧίʔυ
34. ઀ଓ
35. ૹ৴ (ࢠ୺຤)
36. ड৴ (਌୺຤)
37. CONNECT SMARTPHONE • ໰୊఺ • ಉ͡ϒϥ΢βͰ 2 ը໘։͘ͱɺશ͘ಉ͡ηογϣϯ ৘ใΛ͍࣋ͬͯΔͷͰɺͲͪΒ͕਌͔൑ผͰ͖ͳ͍ ! ! ઌʹ઀ଓ͖ͯͨ͠ํ͕਌Ͱྑ͍ΑͶʂ ͨ·ʹόάΔ
38. ྆ํࢠ୺຤ͱ൑ఆ͞ΕΔ͜ͱ͕͋Δɻ
39. CONNECT SMARTPHONE • ͳͥͦ͏ͳΔ͔… • HTTP ϦΫΤετ͸εςʔτϨεɻঢ়ଶΛ࣋ͨͳ ͍ɻঢ়ଶΛ࣋ͨͤΔͨΊʹηογϣϯΛ༻͍Δɻ • WebSocket ௨৴͸εςʔτϑϧɻίωΫγϣϯຖ ʹݸʑʹঢ়ଶΛอ࣋Ͱ͖Δɻϒϥ΢β͕ಉ͡Ͱ͋ͬ ͯ΋ɺ਌୺຤͔ࢠ୺຤͔൑ఆՄೳɻ
40. CONNECT SMARTPHONE • ϦμΠϨΫτͤ͞Δ࣮૷ʹͨ͠ཧ༝ • ελϯυΞϩϯͳ࣮૷Λ໨ࢦͨ͠ • αʔόͷ࣮૷ෆཁͰϦΞϧλΠϜ࿈ܞΛ࣮ݱ • URL ϧʔςΟϯά΍ࢠ୺຤ͷೝূͳͲɺ໘ ౗ͳॲཧΛҰׅͯ͠ߦͬͨ
41. ࠓޙͷ՝୊ • ࣗಈతʹೝূ͍ͨ͠ • ύιίϯ㱻εϚϗʹݶΒͣɺ
 ήʔϜͰϓϨΠϠʔϚονϯά΋Ͱ͖ͦ͏
42. ϦΞϧλΠϜ௨৴ָ͍͠ʂ
43. express.io Ͱ
 շదͳϦΞϧλΠϜ௨৴ϥΠϑΛ