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

Slide 1

Slide 1 text

ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ࿩ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d

Slide 2

Slide 2 text

ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ࿩ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d

Slide 3

Slide 3 text

Re:θϩ͔Β࢝ΊΔElectron 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d

Slide 4

Slide 4 text

Potato4d • ॴଐ:High school student(ߴ̏) • ॴଐ:Developer in pixiv(2017/04~) • ͖͢: Vue.js, Riot, AWS Lambda, etc… • ຊ౰͸ElectronͰήʔϜΛ࡞Γ͔ͨͬͨ

Slide 5

Slide 5 text

#kyotojs

Slide 6

Slide 6 text

/* ͜͜ͰΊͬͪΌ͍͢͝ήʔ ϜͷσϞ͕ग़Δ༧ఆͩͬͨ */

Slide 7

Slide 7 text

Electron΍ͬͯΔਓ

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Electronָ͍ͥ͠ʂ

Slide 10

Slide 10 text

͋Δ͍͸

Slide 11

Slide 11 text

Electronָ͍͠ΑͶʂ

Slide 12

Slide 12 text

΍Ζ͏

Slide 13

Slide 13 text

What’s Electron?

Slide 14

Slide 14 text

Reactͱ͔Atomͱ͔Έ͍ͨͳ ΞΠίϯͯ͠Δ΍ͭͰ http://electron.atom.io/

Slide 15

Slide 15 text

Electronʹ͍͓ͭͯ͞Β͍ • ͬ͘͟Γ͍͏ͱChromiumΛύοΩϯάͯ͠Node ͱͷ௨৴͕Ͱ͖ΔΑ͏ʹͨ͠ • ར༻ऀ໨ઢͰ͍ͬͨΒChrome Apps͕ຊ౰ʹωΠ ςΟϒΞϓϦͱͯ͠ಈ͍ͯΔײ͡ • த਎͕ChromiumͳͷͰES2015+ϫʔϧυͷடং Ͱ࣏͕҆ྑ͍ http://electron.atom.io/

Slide 16

Slide 16 text

Electronͷྑ͍ͱ͜Ζ • HTML, CSS, JavaScriptͱNodeपΓͷγεςϜ ʹ͍ͭͯཧղ͕͋Ε͹σεΫτοϓΞϓϦ͕ ࡞ΕΔ • Node͓ΑͼElectronຊମͷϞδϡʔϧΛར༻ ͢Δ͜ͱʹΑΓɺϒϥ΢β͔ΒγεςϜͷػ ೳΛݺͼग़͢͜ͱ͕Ͱ͖Δ http://electron.atom.io/

Slide 17

Slide 17 text

Electronͷٕज़ͰͰ͖Δ͜ͱ • ϒϥ΢βʹ৐Βͳ͍ɺOSґଘͷ௨஌ͷੜ੒ • ௨஌όʔ΁ͷΞϓϦέʔγϣϯͷදࣔ • ϑΝΠϧγεςϜ΁ͷΞΫηε • Chrome΍FirefoxͰ͔࣮͠૷͞Ε͍ͯͳ͍ Webඪ४APIͷϑϧ׆༻ http://electron.atom.io/

Slide 18

Slide 18 text

࠷ۙͷElectron৘੎ • npm installͰೖΔΑ͏ʹͳ࣏͕ͬͯ҆ྑ͍ʢ͸͡ Ίͯ΍ͬͨ͜Ζ͸-gઐ༻ͩͬͨʣ • electron/electron-quick-start͕Ұ௨ΓͷςϯϓϨ ࣋ͬͯΔͷͰΫϩʔϯ͖ͯͨ͠Β͙͢࢖͑Δ • v1.0͕ग़ͨλΠϛϯάͰޓ׵ੑ͕੾ΕͨͷͰࢮΜ ͩࢿྉ͕݁ߏ͋Δ(semverతʹݴ͏ͱਖ਼͍͠) https://github.com/electron/electron-quick-start

Slide 19

Slide 19 text

͍Ζ͍ΖͰ͖Δ

Slide 20

Slide 20 text

ࣗ෼ͷࣄྫͱͱ΋ʹ঺հ

Slide 21

Slide 21 text

https://potato4d.me/screenbird/

Slide 22

Slide 22 text

ͭͬͨ͘ ʢެ։४උதʣ

Slide 23

Slide 23 text

screenbird • εΫϦʔϯγϣοτ௚઀TwitterͰγΣΞͰ͖Δ ΞϓϦ • ࠓ೔ͷձ৔ఏڙࣾ͞Μͷ΍ͭΛΊͬͪΌҙࣝ͠ ͯΔ • ࢓༷΍࣮૷͕ෆಁ໌ͳWebඪ४APIΛ Chromiumʹ೚ͤͯϑϧ׆༻ͯ͠Δ

Slide 24

Slide 24 text

screenbird • getUserMediaͰը໘Λө૾ͱͯ͠Ωϟϓνϟ • ͦΕΛvideoλάʹຒΊࠐΈ • videoλά͔Βը૾σʔλΛcanvasʹసࣸ • canvas͔ΒblobΛ࡞ͬͯTwitterʹΞοϓϩʔυ

Slide 25

Slide 25 text

screenbird • ChromiumલఏͳͷͰgetUserMediaΛ৺ஔ͖ͳ ͘ୟ͚Δ • ES2015+΋ରԠͯ͠ΔͷͰBabelΛ௨͞ͳ͍Ͱ ॻ͚Δ • ͜ͷ͋ͨΓ͸Chrome Extension࡞੒ͱಉ͡ؾ ࣋ͪΑ͕͋͞Δ

Slide 26

Slide 26 text

޷͖ͳॻ͖͔ͨͰ ޷͖ͳ͚ͩॻ͚Δ

Slide 27

Slide 27 text

Electronָ͍ͥ͠ʂ

Slide 28

Slide 28 text

͋Δ͍͸

Slide 29

Slide 29 text

Electronָ͍͠ΑͶʂ

Slide 30

Slide 30 text

΍Ζ͏

Slide 31

Slide 31 text

https://potato4d.me/kajiki/

Slide 32

Slide 32 text

ͭͬͨ͘ ʢެ։͕໘౗Ͱͯ͠ͳ͍ʣ

Slide 33

Slide 33 text

Kajiki • S3ͷΞοϓϩʔμʔ • จࣈྻͱͯ͠S3্ͷΩʔΛϑΝΠϧύεͱ͠ ͯೖྗͯ͠DnDͰΞοϓϩʔυͰ͖Δ • cliͰͷΞοϓϩʔυʹෳ਺ϑΝΠϧDnDͷָ ͞Λ৐͚ͬͨΑ͏ͳૢ࡞ײ

Slide 34

Slide 34 text

Kajiki • AWSͷCredentialΛѻ͏ΞϓϦέʔγϣϯΛݸਓͰ؅ ཧ͢Δͷ͸ෆ҆ • ϑϩϯτΤϯυͰ΍ͬͯ΋ѱ͘͸ͳ͍͚Ͳaws-sdk for NodeΛϒϥ΢βʹࡌͤΔͷ͕ద੾Ͱͳ͍ؾ͕͢Δ • ElectronͳΒ֎෦ʹอଘ͠ͳ͍ͷͰൺֱతηΩϡΞʹ ؅ཧ͕Մೳ

Slide 35

Slide 35 text

Electronָ͍ͥ͠ʂ

Slide 36

Slide 36 text

͋Δ͍͸

Slide 37

Slide 37 text

Electronָ͍͠ΑͶʂ

Slide 38

Slide 38 text

΍Ζ͏

Slide 39

Slide 39 text

·ͱΊ

Slide 40

Slide 40 text

·ͱΊ • ৽͍͠Webඪ४ͷAPIͰ৭ʑ΍ͬͯΈ͍͚ͨͲ ࣌୅͕௥͍͍ͭͯແͯ͘΋ؾʹ࣮ͤͣ༻Մ • ͍ΘΏΔʮૉৼΓʯ؀ڥʹͽͬͨΓ • ϒϥ΢βͷࠩҟΛؾʹ͠ͳ͍Ͱྑ͍ͷͰॳ৺ ऀʹ΋ͽͬͨΓͳؾ͕ͨ͠

Slide 41

Slide 41 text

΍Ζ͏

Slide 42

Slide 42 text

΍ͬͯΈΑ͏

Slide 43

Slide 43 text

Electronͷ΍Γ͔ͨ

Slide 44

Slide 44 text

͸͡Ί͍͖ͯΛ͢Δ $ git clone https://github.com/electron/electron-quick-start $ cd elecrton-quick-start $ npm install $ npm start

Slide 45

Slide 45 text

͸͡Ίͨ

Slide 46

Slide 46 text

renderer.jsʹ৭ʑॻ͘ /* ͜͜ʹ͍ͭ΋ͷJSΛॻ͚Δ͠ɺ ͦ΋ͦ΋ফ͠ඈ͹ͯ͠bundle.jsΛಡΜͰ΋͍͍ */ alert(1);