Speaker Deck
Sign in
Sign up
for free
electron introduction
Yosuke Furukawa
June 24, 2016
Programming
0
380
electron introduction
meetup app tokyo での紹介記事です
Yosuke Furukawa
June 24, 2016
Tweet
Share
Want more?
yosuke_furukawa
3
720
yosuke_furukawa
66
20k
yosuke_furukawa
0
2.1k
reverentgeek
2
160
rmw
1
82
skipperchong
0
72
carmenhchung
5
150
keathley
4
160
productmarketing
2
220
clairelew
2
440
thoeni
1
120
jcasabona
4
200
Transcript
1
.
Electron Introduction @yosuke_furukawa
2
.
Twitter: @yosuke_furukawa Github: yosuke-furukawa
3
.
Recent works in my previous company • front-end / server-side
engineer • creating apps using Electron • creating widget library using React • creating server APIs
4
.
࠷ۙ
5
.
None
6
.
ࡱӨ͞Εͨসإ
7
.
શʹҰக
8
.
Electron
9
.
What is Electron?? • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ Windows, Linux, Mac OSX
• GitHub ࣾʢͱͱ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨͷʣ
10
.
What is Electron?? • ࡞ऀ @zcbenz ࢯ • ࣅͨΑ͏ͳϓϩδΣΫτͱͯ͠NW.js͕͋Δ ͕ɺNW.jsElectron։ൃ࣌ෆ҆ఆͰ͋Γɺ
ࠜຊͷίϯηϓτͷͱ͜ΖͰҧ͍Λײͨͨ͡ Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ
11
.
What is Electron?? • Electronͷத • • Chromium • Browser
ͷϨϯμϦϯάϓϩηεChromium͕୲ ɺதͰϨϯμϦϯάϓϩηεΛ࡞ΔॴϑΝΠϧΛ ։͘ॴɺXHR/fetchҎ֎ͰͷΞΫηεNode.js͕୲
12
.
What is Electron?? • V8 ͕ Node / Chromium Ͱڞ༗͞ΕͯΔ
• Node/Chromium Ͱ(΄΅)͓ͳ͡ίʔυ͕ಈ͘
13
.
Electron ͷத
14
.
$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork
15
.
$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork ϒϥβͷ ϨΠϠ ϒϥβΛૢ࡞͢ Δϓϩηε
JSͰૢ࡞Մೳ ϝΠϯϓϩηε
16
.
Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲ • Renderer Process
ͱ௨৴ͯ͠ॲཧΛߦͬͨ ΓɺͦͦRenderer Process Λىಈͤͨ͞ Γ͢Δॴɻ
17
.
Renderer Process • Main process ͕ࢦఆͨ͠URLʹ͋ΔϦιʔεΛϩʔ υͯ͠ىಈ͢Δϓϩηε • htmlΛදࣔ͢ΔɺcssͰϨΠΞτΉɺJSͰdomΛ ૢ࡞͢ΔͳͲ΄΅ϒϥβͷࣄ
• །Ұϒϥβͱҧ͏ͷRenderer Process ͔Β Main ͱ௨৴ͯ͠ɺ Node.js ͷॲཧΛಁաతʹݺΔॴ
18
.
͕͍ͧ͜͜͢͝ Electron
19
.
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>
20
.
Cross Platform • Windows Ͱ OSX Ͱಈ͘!!! • Node.js ++
21
.
npm Λج൫ͱ͢ΔಠࣗΤίγ εςϜ͕Ͱ͖ͯΔ
22
.
693 packages
23
.
Electron Λ ࠾༻͍ͯ͠Δπʔϧ
24
.
None
25
.
OSX ͬΆ͍ݟͨʹ͍ͨ͠
26
.
PhotonKit
27
.
PhotonKit CSS class set ͕طʹ͋Δ
28
.
Chrome ͬΆ͍ tab Λ࡞Γ͍ͨ
29
.
chrome-tabs Chrome tab ͬΆ͍ͷ͕ಈ͘
30
.
ࣄྫ͕๛ awesome-electron Λࢀর
31
.
ࣄྫ͕๛ ScreenCat ͰσεΫτοϓεΫϦʔϯڞ༗
32
.
ࣄྫ͕๛ minira => jira ͷ notification πʔϧ
33
.
ࣄྫ͕๛ Chat application FRIENDS
34
.
ࣄྫ͕๛ Mojibar => emoji searcher
35
.
Electron APIs
36
.
Electron APIs • Main Process (node.jsଆ) • app ΞϓϦέʔγϣϯͷىಈऴྃͳͲͷLifeCycleཧ༻
API • autoUpdater ࣗಈߋ৽ݕɾμϯϩʔυɾΞοϓσʔτػೳ • powerMonitor όοςϦʔ͕Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕Εͨͷݕ • Menu/MenuItem ͍ΘΏΔ͜Ε→ γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲରԠ
37
.
Electron APIs • Render Process (chromiumଆ) • desktopCapturer σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API
• webframe zoom, input text field ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔ • Both Process (྆ํͰ͑ΔAPI) • clipboard ΫϦοϓϘʔυͷதͷίϐʔͨ͠ͷΛऔΕΔΑ͏ʹ͢Δ • shell desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)
38
.
͕͍ͧ͜͜ Electron
39
.
Node.js ͷϥΠϒϥϦΛಁաతʹݺΔͨΊɺ ͳΜ͔ؒҧͬͯ XSS ͕ى͖Δͱҙίʔυ࣮ߦͰ͖ Δ <html> <script> // ࣗͷϩʔΧϧϑΝΠϧΛফͨ͠Γ
const fs = require(‘fs’); fs.unlinkSync('/'); // ࣗͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const cp = require('child_process'); cp.execSync('rm -rf /'); </script> </html>
40
.
Electron ͷ͠ํ (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf
41
.
Electron ͷ͠ํ (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf Booooooo
42
.
ಛʹ DOM based XSS ͕͋Δ ͱ NG
43
.
DEMO
44
.
ʘ(^o^)ʗ
45
.
ٹ͍͋Δ
46
.
Security Updates
47
.
جຊతʹ nodeIntegration Λ Θͳ͚Εҙͷίʔυͷ ࣮ߦ·ͰͰ͖ͳ͍ʂʂʂʂ
48
.
nodeIntegration Λ false ʹͨ͠··࡞ Γɺ IPC ௨৴Ͱ node ͱΓऔΓ͢Δ app.on('ready',
function() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false // false ʹ͢Δ } }); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
49
.
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>
50
.
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> ఘΊΖʂʂʂʂʂʂ
51
.
Defensive ʹ࡞ΔͳΒ nodeIntegration Λ false ʹ ͭͭ͠ɺ ipc Ͱ Node.js
ͱ ΓऔΓ
52
.
ࢀߟʹ͢Δ͖ࢿྉ
53
.
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
54
.
ޙ͏Ұͭ
55
.
electron ͷҭͯํ • electronica electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍ ͔
56
.
electronica install $ (sudo) npm install electronica -g # ͜ΕͰΠϯετʔϧ
$ electronica # ͜ΕͰىಈʂ
57
.
electron ͷҭͯํ • electronica electronica ͕ऴΘΕ؆қϒϥβΛ࡞ͬͯ ༡Δɻ
58
.
DEMO
59
.
Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ
60
.
·ͱΊ
61
.
·ͱΊ • electron ਐ݄าͰਐԽͯ͠Δ • ΤίγεςϜେ͖͘ͳ͍ͬͯΔ • ͦΕʹͱͳͬͯؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ଟ͍ • ಛʹηΩϡϦςΟ
• ҰॹʹΈΜͳͰ৴߸ΛΓ͍ͨʂ
62
.
͋Γ͕ͱ͏͍͟͝·ͨ͠
Yosuke Furukawa
yosuke_furukawa
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
