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
Electron App の作り方
Search
Yosuke Furukawa
PRO
March 07, 2016
Programming
17
7.2k
Electron App の作り方
#html5jplat で発表したElectorn App の話です。
Yosuke Furukawa
PRO
March 07, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Namespace and Its Future
tagomoris
6
700
為你自己學 Python - 冷知識篇
eddie
1
340
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.7k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
130
Testing Trophyは叫ばない
toms74209200
0
760
Design Foundational Data Engineering Observability
sucitw
3
180
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
270
🔨 小さなビルドシステムを作る
momeemt
3
660
アセットのコンパイルについて
ojun9
0
110
Honoアップデート 2025年夏
yusukebe
1
920
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
45
3.5k
KATA
mclloyd
32
14k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
GitHub's CSS Performance
jonrohan
1032
460k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Making Projects Easy
brettharned
117
6.4k
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 ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ