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.6k
Other Decks in Programming
See All in Programming
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
明日から始めるリファクタリング
ryounasso
0
140
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
380
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Le côté obscur des IA génératives
pascallemerrer
0
140
Catch Up: Go Style Guide Update
andpad
0
220
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
Serena MCPのすすめ
wadakatu
4
990
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Faster Mobile Websites
deanohume
310
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Agile that works and the tools we love
rasmusluckow
331
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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