Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

January 21, 2017
Tweet

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