Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Electron App の作り方
Yosuke Furukawa
PRO
March 07, 2016
Programming
17
6.6k
Electron App の作り方
#html5jplat で発表したElectorn App の話です。
Yosuke Furukawa
PRO
March 07, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.6k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
3.5k
Node.js / Deno 徹底討論の時のスライド
yosuke_furukawa
PRO
2
2.2k
Browser の話
yosuke_furukawa
PRO
4
220
A Philosophy of Software Design 前半
yosuke_furukawa
PRO
24
7.1k
開発組織の持続可能性について
yosuke_furukawa
PRO
16
9.7k
How I run JS / Web Community
yosuke_furukawa
PRO
0
1.9k
性能に関する考え方
yosuke_furukawa
PRO
7
6.2k
レビューの仕方
yosuke_furukawa
PRO
56
28k
Other Decks in Programming
See All in Programming
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
4
520
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
600
Chart実装が楽になりました。
keisukeyamagishi
0
100
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
300
Maintaining Software Correctness
dlew
PRO
3
240
Vite でお手軽 Vue.js の環境構築
azuki
2
170
What's new in Android development tools まとめ
mkeeda
0
270
VisualProgramming_GoogleHome_LINE
nearmugi
1
140
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.6k
模組化的Swift架構(二) DDD速成
haifengkao
0
350
Seleniumでイキってたらサーバを絞め落としかけてた話
kenfujita
0
360
IE Graduation Certificate
jxck
6
4.7k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
180k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
BBQ
matthewcrist
74
7.9k
Scaling GitHub
holman
451
140k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
The Art of Programming - Codeland 2020
erikaheidi
32
10k
Rails Girls Zürich Keynote
gr2m
86
12k
Atom: Resistance is Futile
akmur
255
20k
Done Done
chrislema
174
14k
A Tale of Four Properties
chriscoyier
149
21k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Transcript
Electron App ͷ࡞Γํ @yosuke_furukawa
Twitter: @yosuke_furukawa Github: yosuke-furukawa
New Logo
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Node.js ຊϢʔβάϧʔϓ ද
Recent works in my company • front-end / server-side engineer
• creating apps using Electron • creating widget library using React • creating server APIs
Recent works in my company • front-end / server-side engineer
• creating apps using Electron • creating widget library using React • creating server APIs
Electron
Electron ͱ • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ Windows, Linux, Mac OSX •
GitHub ࣾʢͱͱ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨͷʣ
Electron ͱ • ࡞ऀ @zcbenz ࢯ • ࣅͨΑ͏ͳϓϩδΣΫτͱͯ͠NW.js͕͋Δ ͕ɺNW.jsElectron։ൃ࣌ෆ҆ఆͰ͋Γɺ ࠜຊͷίϯηϓτͷͱ͜ΖͰҧ͍Λײͨͨ͡
Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ
Electron ͱ • Electronͷத • • Chromium • Browser ͷϨϯμϦϯάϓϩηεChromium͕୲
ɺதͰϨϯμϦϯάϓϩηεΛ࡞ΔॴϑΝΠϧΛ ։͘ॴɺXHR/fetchҎ֎ͰͷΞΫηεNode.js͕୲
Electron ͷத
$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork
$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork ϒϥβͷ ϨΠϠ ϒϥβΛૢ࡞͢ Δϓϩηε
JSͰૢ࡞Մೳ ϝΠϯϓϩηε
Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲ • Renderer Process
ͱ௨৴ͯ͠ॲཧΛߦͬͨ ΓɺͦͦRenderer Process Λىಈͤͨ͞ Γ͢Δॴɻ
Renderer Process • Main process ͕ࢦఆͨ͠URLʹ͋ΔϦιʔεΛϩʔ υͯ͠ىಈ͢Δϓϩηε • htmlΛදࣔ͢ΔɺcssͰϨΠΞτΉɺJSͰdomΛ ૢ࡞͢ΔͳͲ΄΅ϒϥβͷࣄ
• །Ұϒϥβͱҧ͏ͷRenderer Process ͔Β Main ͱ௨৴ͯ͠ɺ Node.js ͷॲཧΛಁաతʹݺΔॴ
͕͍ͧ͜͜͢͝ Electron
Node.js ͷϥΠϒϥϦΛಁ աతʹݺΔɻ <script> // ࣗͷϩʔΧϧϑΝΠϧಡΈ͜ΜͩΓ const fs = require(‘fs’);
fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); </script> <script> // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); }); </script>
Cross Platform • Windows Ͱ OSX Ͱಈ͘!!! • Node.js ++
npm Λج൫ͱ͢ΔಠࣗΤίγ εςϜ͕Ͱ͖ͯΔ
None
None
OSX ͬΆ͍ݟͨʹ͍ͨ͠
PhotonKit
PhotonKit CSS class set ͕طʹ͋Δ
ࣄྫ͕๛ awesome-electron Λࢀর
ࣄྫ͕๛ ScreenCat ͰσεΫτοϓεΫϦʔϯڞ༗
ࣄྫ͕๛ PlayBack => video player
ࣄྫ͕๛ Chat application FRIENDS
Electron APIs
Electron APIs • Main Process (node.jsଆ) • app ΞϓϦέʔγϣϯͷىಈऴྃͳͲͷLifeCycleཧ༻
API • autoUpdater ࣗಈߋ৽ݕɾμϯϩʔυɾΞοϓσʔτػೳ • powerMonitor όοςϦʔ͕Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕Εͨͷݕ • Menu/MenuItem ͍ΘΏΔ͜Ε→ γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲରԠ
Electron APIs • Render Process (chromiumଆ) • desktopCapturer σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API
• webframe zoom, input text field ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔ • Both Process (྆ํͰ͑ΔAPI) • clipboard ΫϦοϓϘʔυͷதͷίϐʔͨ͠ͷΛऔΕΔΑ͏ʹ͢Δ • shell desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)
ࢀߟʹ͢Δ͖ࢿྉ
Electron ࢀߟ • Qiita Ͱ Advent Calendar ࣮ࢪத • http://qiita.com/advent-calendar/2015/electron
• awesome electron • https://github.com/sindresorhus/awesome-electron • electron slack • https://electron-jp-slackin.herokuapp.com/ • ຊޠνϡʔτϦΞϧ༁ • https://github.com/sotayamashita/electron/tree/japanese-localization/docs- translations/jp
ޙ͏Ұͭ
None
electron ͷҭͯํ • electronica electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍ ͔
electronica install $ (sudo) npm install electronica -g # ͜ΕͰΠϯετʔϧ
$ electronica # ͜ΕͰىಈʂ
DEMO
electron ͷҭͯํ • electronica electronica ͕ऴΘΕ؆қϒϥβΛ࡞ͬͯ ༡Δɻ
Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ