Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #kyotojs

作りたかったんだわかってくれ

Transcript

1. ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ࿩ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
2. ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ࿩ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
3. Re:θϩ͔Β࢝ΊΔElectron 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
4. Potato4d • ॴଐ:High school student(ߴ̏) • ॴଐ:Developer in pixiv(2017/04~) • ͖͢: Vue.js, Riot, AWS Lambda, etc… • ຊ౰͸ElectronͰήʔϜΛ࡞Γ͔ͨͬͨ
5. #kyotojs
6. /* ͜͜ͰΊͬͪΌ͍͢͝ήʔ ϜͷσϞ͕ग़Δ༧ఆͩͬͨ */
7. Electron΍ͬͯΔਓ
9. Electronָ͍ͥ͠ʂ
10. ͋Δ͍͸
11. Electronָ͍͠ΑͶʂ
12. ΍Ζ͏
13. What’s Electron?
14. Reactͱ͔Atomͱ͔Έ͍ͨͳ ΞΠίϯͯ͠Δ΍ͭͰ http://electron.atom.io/
15. Electronʹ͍͓ͭͯ͞Β͍ • ͬ͘͟Γ͍͏ͱChromiumΛύοΩϯάͯ͠Node ͱͷ௨৴͕Ͱ͖ΔΑ͏ʹͨ͠ • ར༻ऀ໨ઢͰ͍ͬͨΒChrome Apps͕ຊ౰ʹωΠ ςΟϒΞϓϦͱͯ͠ಈ͍ͯΔײ͡ • த਎͕ChromiumͳͷͰES2015+ϫʔϧυͷடং Ͱ࣏͕҆ྑ͍ http://electron.atom.io/
16. Electronͷྑ͍ͱ͜Ζ • HTML, CSS, JavaScriptͱNodeपΓͷγεςϜ ʹ͍ͭͯཧղ͕͋Ε͹σεΫτοϓΞϓϦ͕ ࡞ΕΔ • Node͓ΑͼElectronຊମͷϞδϡʔϧΛར༻ ͢Δ͜ͱʹΑΓɺϒϥ΢β͔ΒγεςϜͷػ ೳΛݺͼग़͢͜ͱ͕Ͱ͖Δ http://electron.atom.io/
17. Electronͷٕज़ͰͰ͖Δ͜ͱ • ϒϥ΢βʹ৐Βͳ͍ɺOSґଘͷ௨஌ͷੜ੒ • ௨஌όʔ΁ͷΞϓϦέʔγϣϯͷදࣔ • ϑΝΠϧγεςϜ΁ͷΞΫηε • Chrome΍FirefoxͰ͔࣮͠૷͞Ε͍ͯͳ͍ Webඪ४APIͷϑϧ׆༻ http://electron.atom.io/
18. ࠷ۙͷElectron৘੎ • npm installͰೖΔΑ͏ʹͳ࣏͕ͬͯ҆ྑ͍ʢ͸͡ Ίͯ΍ͬͨ͜Ζ͸-gઐ༻ͩͬͨʣ • electron/electron-quick-start͕Ұ௨ΓͷςϯϓϨ ࣋ͬͯΔͷͰΫϩʔϯ͖ͯͨ͠Β͙͢࢖͑Δ • v1.0͕ग़ͨλΠϛϯάͰޓ׵ੑ͕੾ΕͨͷͰࢮΜ ͩࢿྉ͕݁ߏ͋Δ(semverతʹݴ͏ͱਖ਼͍͠) https://github.com/electron/electron-quick-start
19. ͍Ζ͍ΖͰ͖Δ
20. ࣗ෼ͷࣄྫͱͱ΋ʹ঺հ
21. https://potato4d.me/screenbird/
22. ͭͬͨ͘ ʢެ։४උதʣ
23. screenbird • εΫϦʔϯγϣοτ௚઀TwitterͰγΣΞͰ͖Δ ΞϓϦ • ࠓ೔ͷձ৔ఏڙࣾ͞Μͷ΍ͭΛΊͬͪΌҙࣝ͠ ͯΔ • ࢓༷΍࣮૷͕ෆಁ໌ͳWebඪ४APIΛ Chromiumʹ೚ͤͯϑϧ׆༻ͯ͠Δ
24. screenbird • getUserMediaͰը໘Λө૾ͱͯ͠Ωϟϓνϟ • ͦΕΛvideoλάʹຒΊࠐΈ • videoλά͔Βը૾σʔλΛcanvasʹసࣸ • canvas͔ΒblobΛ࡞ͬͯTwitterʹΞοϓϩʔυ
25. screenbird • ChromiumલఏͳͷͰgetUserMediaΛ৺ஔ͖ͳ ͘ୟ͚Δ • ES2015+΋ରԠͯ͠ΔͷͰBabelΛ௨͞ͳ͍Ͱ ॻ͚Δ • ͜ͷ͋ͨΓ͸Chrome Extension࡞੒ͱಉ͡ؾ ࣋ͪΑ͕͋͞Δ
26. ޷͖ͳॻ͖͔ͨͰ ޷͖ͳ͚ͩॻ͚Δ
27. Electronָ͍ͥ͠ʂ
28. ͋Δ͍͸
29. Electronָ͍͠ΑͶʂ
30. ΍Ζ͏
31. https://potato4d.me/kajiki/
32. ͭͬͨ͘ ʢެ։͕໘౗Ͱͯ͠ͳ͍ʣ
33. Kajiki • S3ͷΞοϓϩʔμʔ • จࣈྻͱͯ͠S3্ͷΩʔΛϑΝΠϧύεͱ͠ ͯೖྗͯ͠DnDͰΞοϓϩʔυͰ͖Δ • cliͰͷΞοϓϩʔυʹෳ਺ϑΝΠϧDnDͷָ ͞Λ৐͚ͬͨΑ͏ͳૢ࡞ײ
34. Kajiki • AWSͷCredentialΛѻ͏ΞϓϦέʔγϣϯΛݸਓͰ؅ ཧ͢Δͷ͸ෆ҆ • ϑϩϯτΤϯυͰ΍ͬͯ΋ѱ͘͸ͳ͍͚Ͳaws-sdk for NodeΛϒϥ΢βʹࡌͤΔͷ͕ద੾Ͱͳ͍ؾ͕͢Δ • ElectronͳΒ֎෦ʹอଘ͠ͳ͍ͷͰൺֱతηΩϡΞʹ ؅ཧ͕Մೳ
35. Electronָ͍ͥ͠ʂ
36. ͋Δ͍͸
37. Electronָ͍͠ΑͶʂ
38. ΍Ζ͏
39. ·ͱΊ
40. ·ͱΊ • ৽͍͠Webඪ४ͷAPIͰ৭ʑ΍ͬͯΈ͍͚ͨͲ ࣌୅͕௥͍͍ͭͯແͯ͘΋ؾʹ࣮ͤͣ༻Մ • ͍ΘΏΔʮૉৼΓʯ؀ڥʹͽͬͨΓ • ϒϥ΢βͷࠩҟΛؾʹ͠ͳ͍Ͱྑ͍ͷͰॳ৺ ऀʹ΋ͽͬͨΓͳؾ͕ͨ͠
41. ΍Ζ͏
42. ΍ͬͯΈΑ͏
43. Electronͷ΍Γ͔ͨ
44. ͸͡Ί͍͖ͯΛ͢Δ $ git clone https://github.com/electron/electron-quick-start $ cd elecrton-quick-start $ npm install $ npm start
45. ͸͡Ίͨ
46. renderer.jsʹ৭ʑॻ͘ /* ͜͜ʹ͍ͭ΋ͷJSΛॻ͚Δ͠ɺ ͦ΋ͦ΋ফ͠ඈ͹ͯ͠bundle.jsΛಡΜͰ΋͍͍ */ alert(1);
47. Ͱ͖ͨ
48. Electronָ͍ͥ͠ʂ
49. ͋Δ͍͸
50. Electronָ͍͠ΑͶʂ
51. ΍Ζ͏
52. ΍ͬͯΈΑ͏
53. ΍ͬͯΈ͍ͨ
54. ElectronͰ࠷ڧήʔϜ࡞੒
55. औΓ׶͑ͣcanvasϕʔεͰ ࡞͍͖ͬͯ
56. GamePad APIͰ ૢ࡞Մೳʹͯ͠
57. σεΫτοϓͰಈ͢
58. Webٕज़Ͱ
59. ΍Γ͔ͨͬͨ
60. ؒʹ߹Θͳ͔ͬͨ
61. ࣍·ͰʹϦϕϯδ
63. ͍ͬ͠ΐʹ΍Ζ͏
64. Thank you!
65. http://kfug.jp/frontconf2017