Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #ky...
Search
potato4d(Takuma HANATANI)
January 21, 2017
Programming
1
2.7k
Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #kyotojs
作りたかったんだわかってくれ
potato4d(Takuma HANATANI)
January 21, 2017
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
190
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
print("Hello, World")
eddie
1
320
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
AI時代のUIはどこへ行く?
yusukebe
11
5.7k
コンテキストエンジニアリング Cursor編
kinopeee
1
740
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
240
AWS発のAIエディタKiroを使ってみた
iriikeita
1
140
AIコーディングAgentとの向き合い方
eycjur
0
250
Kiroで始めるAI-DLC
kaonash
2
510
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
150
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
BBQ
matthewcrist
89
9.8k
Speed Design
sergeychernyshev
32
1.1k
Code Reviewing Like a Champion
maltzj
525
40k
Scaling GitHub
holman
463
140k
Docker and Python
trallard
45
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
GitHub's CSS Performance
jonrohan
1032
460k
Writing Fast Ruby
sferik
628
62k
Typedesign – Prime Four
hannesfritz
42
2.8k
A better future with KSS
kneath
239
17k
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