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で ゲームを作りたかった話〜 #kyotojs
Search
potato4d(Hanatani Takuma)
January 21, 2017
Programming
1
2.4k
Re:ゼロからはじめるElectron 〜Electronで ゲームを作りたかった話〜 #kyotojs
作りたかったんだわかってくれ
potato4d(Hanatani Takuma)
January 21, 2017
Tweet
Share
More Decks by potato4d(Hanatani Takuma)
See All by potato4d(Hanatani Takuma)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.7k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.6k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.5k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
980
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.3k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.6k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.1k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.2k
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
Ruby Function Composition
bkuhlmann
1
330
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
290
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
260
Milestoner
bkuhlmann
1
410
Hanami and htmx
bkuhlmann
0
200
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
456
32k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Navigating Team Friction
lara
178
13k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Clear Off the Table
cherdarchuk
84
310k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Code Reviewing Like a Champion
maltzj
514
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.5k
Side Projects
sachag
451
41k
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