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.6k
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
400
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
6.9k
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.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
効率的な開発手段として VRTを活用する
ishkawa
0
160
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why Our Code Smells
bkeepers
PRO
337
57k
Music & Morning Musume
bryan
46
6.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
BBQ
matthewcrist
89
9.7k
Scaling GitHub
holman
460
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Ace a Technical Interview
jacobian
278
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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