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΍ͬͯΔਓ

8. None

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. ࣍·ͰʹϦϕϯδ

62. None

63. ͍ͬ͠ΐʹ΍Ζ͏

64. Thank you!

65. http://kfug.jp/frontconf2017