Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #kyotojs
Potato4d(Hanatani Takuma)
January 21, 2017
Programming
1
2k
Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #kyotojs
作りたかったんだわかってくれ
Potato4d(Hanatani Takuma)
January 21, 2017
Tweet
Share
More Decks by Potato4d(Hanatani Takuma)
See All by Potato4d(Hanatani Takuma)
potato4d
9
3.5k
potato4d
21
4.4k
potato4d
0
410
potato4d
8
2.4k
potato4d
8
2k
potato4d
38
17k
potato4d
5
2.2k
potato4d
11
2.9k
potato4d
1
1.6k
Other Decks in Programming
See All in Programming
chimerast
0
350
syucream
4
1.4k
mathetake
7
2.2k
timeseriesfr
0
140
ickx
3
640
daipresents
0
350
sysrich
0
250
bkuhlmann
6
710
kentatada
0
110
kubode
2
200
kulkarniankita09
0
280
n1215
1
480
Featured
See All Featured
lara
17
2.9k
jakevdp
776
200k
lauravandoore
440
29k
hatefulcrawdad
257
17k
erikaheidi
15
4.5k
lemiorhan
629
48k
philhawksworth
192
17k
jmmastey
11
710
bkeepers
PRO
54
4.3k
kastner
54
2k
notwaldorf
21
2.1k
chriscoyier
146
20k
Transcript
ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
Re:θϩ͔Β࢝ΊΔElectron 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
Potato4d • ॴଐ:High school student(ߴ̏) • ॴଐ:Developer in pixiv(2017/04~) •
͖͢: Vue.js, Riot, AWS Lambda, etc… • ຊElectronͰήʔϜΛ࡞Γ͔ͨͬͨ
#kyotojs
/* ͜͜ͰΊͬͪΌ͍͢͝ήʔ ϜͷσϞ͕ग़Δ༧ఆͩͬͨ */
ElectronͬͯΔਓ
None
Electronָ͍ͥ͠ʂ
͋Δ͍
Electronָ͍͠ΑͶʂ
Ζ͏
What’s Electron?
Reactͱ͔Atomͱ͔Έ͍ͨͳ ΞΠίϯͯ͠ΔͭͰ http://electron.atom.io/
Electronʹ͍͓ͭͯ͞Β͍ • ͬ͘͟Γ͍͏ͱChromiumΛύοΩϯάͯ͠Node ͱͷ௨৴͕Ͱ͖ΔΑ͏ʹͨ͠ • ར༻ऀઢͰ͍ͬͨΒChrome Apps͕ຊʹωΠ ςΟϒΞϓϦͱͯ͠ಈ͍ͯΔײ͡ • த͕ChromiumͳͷͰES2015+ϫʔϧυͷடং
Ͱ࣏͕҆ྑ͍ http://electron.atom.io/
Electronͷྑ͍ͱ͜Ζ • HTML, CSS, JavaScriptͱNodeपΓͷγεςϜ ʹ͍ͭͯཧղ͕͋ΕσεΫτοϓΞϓϦ͕ ࡞ΕΔ • Node͓ΑͼElectronຊମͷϞδϡʔϧΛར༻ ͢Δ͜ͱʹΑΓɺϒϥβ͔ΒγεςϜͷػ
ೳΛݺͼग़͢͜ͱ͕Ͱ͖Δ http://electron.atom.io/
Electronͷٕज़ͰͰ͖Δ͜ͱ • ϒϥβʹΒͳ͍ɺOSґଘͷ௨ͷੜ • ௨όʔͷΞϓϦέʔγϣϯͷදࣔ • ϑΝΠϧγεςϜͷΞΫηε • ChromeFirefoxͰ͔࣮͠͞Ε͍ͯͳ͍ Webඪ४APIͷϑϧ׆༻
http://electron.atom.io/
࠷ۙͷElectron • npm installͰೖΔΑ͏ʹͳ࣏͕ͬͯ҆ྑ͍ʢ͡ Ίͯͬͨ͜Ζ-gઐ༻ͩͬͨʣ • electron/electron-quick-start͕Ұ௨ΓͷςϯϓϨ ࣋ͬͯΔͷͰΫϩʔϯ͖ͯͨ͠Β͙͑͢Δ • v1.0͕ग़ͨλΠϛϯάͰޓੑ͕ΕͨͷͰࢮΜ
ͩࢿྉ͕݁ߏ͋Δ(semverతʹݴ͏ͱਖ਼͍͠) https://github.com/electron/electron-quick-start
͍Ζ͍ΖͰ͖Δ
ࣗͷࣄྫͱͱʹհ
https://potato4d.me/screenbird/
ͭͬͨ͘ ʢެ։४උதʣ
screenbird • εΫϦʔϯγϣοτTwitterͰγΣΞͰ͖Δ ΞϓϦ • ࠓͷձఏڙࣾ͞ΜͷͭΛΊͬͪΌҙࣝ͠ ͯΔ • ༷࣮͕ෆಁ໌ͳWebඪ४APIΛ Chromiumʹͤͯϑϧ׆༻ͯ͠Δ
screenbird • getUserMediaͰը໘Λө૾ͱͯ͠Ωϟϓνϟ • ͦΕΛvideoλάʹຒΊࠐΈ • videoλά͔Βը૾σʔλΛcanvasʹసࣸ • canvas͔ΒblobΛ࡞ͬͯTwitterʹΞοϓϩʔυ
screenbird • ChromiumલఏͳͷͰgetUserMediaΛ৺ஔ͖ͳ ͘ୟ͚Δ • ES2015+ରԠͯ͠ΔͷͰBabelΛ௨͞ͳ͍Ͱ ॻ͚Δ • ͜ͷ͋ͨΓChrome Extension࡞ͱಉ͡ؾ
࣋ͪΑ͕͋͞Δ
͖ͳॻ͖͔ͨͰ ͖ͳ͚ͩॻ͚Δ
Electronָ͍ͥ͠ʂ
͋Δ͍
Electronָ͍͠ΑͶʂ
Ζ͏
https://potato4d.me/kajiki/
ͭͬͨ͘ ʢެ։͕໘Ͱͯ͠ͳ͍ʣ
Kajiki • S3ͷΞοϓϩʔμʔ • จࣈྻͱͯ͠S3্ͷΩʔΛϑΝΠϧύεͱ͠ ͯೖྗͯ͠DnDͰΞοϓϩʔυͰ͖Δ • cliͰͷΞοϓϩʔυʹෳϑΝΠϧDnDͷָ ͞Λ͚ͬͨΑ͏ͳૢ࡞ײ
Kajiki • AWSͷCredentialΛѻ͏ΞϓϦέʔγϣϯΛݸਓͰ ཧ͢Δͷෆ҆ • ϑϩϯτΤϯυͰͬͯѱ͘ͳ͍͚Ͳaws-sdk for NodeΛϒϥβʹࡌͤΔͷ͕దͰͳ͍ؾ͕͢Δ • ElectronͳΒ֎෦ʹอଘ͠ͳ͍ͷͰൺֱతηΩϡΞʹ
ཧ͕Մೳ
Electronָ͍ͥ͠ʂ
͋Δ͍
Electronָ͍͠ΑͶʂ
Ζ͏
·ͱΊ
·ͱΊ • ৽͍͠Webඪ४ͷAPIͰ৭ʑͬͯΈ͍͚ͨͲ ͕͍͍࣌ͭͯແͯ͘ؾʹ࣮ͤͣ༻Մ • ͍ΘΏΔʮૉৼΓʯڥʹͽͬͨΓ • ϒϥβͷࠩҟΛؾʹ͠ͳ͍Ͱྑ͍ͷͰॳ৺ ऀʹͽͬͨΓͳؾ͕ͨ͠
Ζ͏
ͬͯΈΑ͏
ElectronͷΓ͔ͨ
͡Ί͍͖ͯΛ͢Δ $ git clone https://github.com/electron/electron-quick-start $ cd elecrton-quick-start $ npm
install $ npm start
͡Ίͨ
renderer.jsʹ৭ʑॻ͘ /* ͜͜ʹ͍ͭͷJSΛॻ͚Δ͠ɺ ͦͦফ͠ඈͯ͠bundle.jsΛಡΜͰ͍͍ */ alert(1);
Ͱ͖ͨ
Electronָ͍ͥ͠ʂ
͋Δ͍
Electronָ͍͠ΑͶʂ
Ζ͏
ͬͯΈΑ͏
ͬͯΈ͍ͨ
ElectronͰ࠷ڧήʔϜ࡞
औΓ͑ͣcanvasϕʔεͰ ࡞͍͖ͬͯ
GamePad APIͰ ૢ࡞Մೳʹͯ͠
σεΫτοϓͰಈ͢
Webٕज़Ͱ
Γ͔ͨͬͨ
ؒʹ߹Θͳ͔ͬͨ
࣍·ͰʹϦϕϯδ
None
͍ͬ͠ΐʹΖ͏
Thank you!
http://kfug.jp/frontconf2017