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 introduction
Search
Yosuke Furukawa
PRO
June 24, 2016
Programming
0
620
electron introduction
meetup app tokyo での紹介記事です
Yosuke Furukawa
PRO
June 24, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
140
Removing Corepack
yosuke_furukawa
PRO
9
1.2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.4k
Strip Types と Storage
yosuke_furukawa
PRO
4
330
Module Harmony について
yosuke_furukawa
PRO
3
1.5k
LTのやり方
yosuke_furukawa
PRO
16
2.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
700
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.6k
Other Decks in Programming
See All in Programming
現場で役立つモデリング 超入門
masuda220
PRO
15
3.1k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
100
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
430
役立つログに取り組もう
irof
28
9.3k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
3k
Ethereum_.pdf
nekomatu
0
370
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
180
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
300
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
270
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
330
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
GraphQLとの向き合い方2022年版
quramy
43
13k
Why Our Code Smells
bkeepers
PRO
334
57k
Building Adaptive Systems
keathley
38
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Rails Girls Zürich Keynote
gr2m
93
13k
Practical Orchestrator
shlominoach
186
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
810
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Thoughts on Productivity
jonyablonski
67
4.3k
Transcript
Electron Introduction @yosuke_furukawa
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Recent works in my previous company • front-end / server-side
engineer • creating apps using Electron • creating widget library using React • creating server APIs
࠷ۙ
None
ࡱӨ͞Εͨসإ
શʹҰக
Electron
What is Electron?? • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ Windows, Linux, Mac OSX
• GitHub ࣾʢͱͱ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨͷʣ
What is Electron?? • ࡞ऀ @zcbenz ࢯ • ࣅͨΑ͏ͳϓϩδΣΫτͱͯ͠NW.js͕͋Δ ͕ɺNW.jsElectron։ൃ࣌ෆ҆ఆͰ͋Γɺ
ࠜຊͷίϯηϓτͷͱ͜ΖͰҧ͍Λײͨͨ͡ Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ
What is Electron?? • Electronͷத • • Chromium • Browser
ͷϨϯμϦϯάϓϩηεChromium͕୲ ɺதͰϨϯμϦϯάϓϩηεΛ࡞ΔॴϑΝΠϧΛ ։͘ॴɺXHR/fetchҎ֎ͰͷΞΫηεNode.js͕୲
What is Electron?? • V8 ͕ Node / Chromium Ͱڞ༗͞ΕͯΔ
• Node/Chromium Ͱ(΄΅)͓ͳ͡ίʔυ͕ಈ͘
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 Λج൫ͱ͢ΔಠࣗΤίγ εςϜ͕Ͱ͖ͯΔ
693 packages
Electron Λ ࠾༻͍ͯ͠Δπʔϧ
None
OSX ͬΆ͍ݟͨʹ͍ͨ͠
PhotonKit
PhotonKit CSS class set ͕طʹ͋Δ
Chrome ͬΆ͍ tab Λ࡞Γ͍ͨ
chrome-tabs Chrome tab ͬΆ͍ͷ͕ಈ͘
ࣄྫ͕๛ awesome-electron Λࢀর
ࣄྫ͕๛ ScreenCat ͰσεΫτοϓεΫϦʔϯڞ༗
ࣄྫ͕๛ minira => jira ͷ notification πʔϧ
ࣄྫ͕๛ Chat application FRIENDS
ࣄྫ͕๛ Mojibar => emoji searcher
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
Node.js ͷϥΠϒϥϦΛಁաతʹݺΔͨΊɺ ͳΜ͔ؒҧͬͯ XSS ͕ى͖Δͱҙίʔυ࣮ߦͰ͖ Δ <html> <script> // ࣗͷϩʔΧϧϑΝΠϧΛফͨ͠Γ
const fs = require(‘fs’); fs.unlinkSync('/'); // ࣗͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const cp = require('child_process'); cp.execSync('rm -rf /'); </script> </html>
Electron ͷ͠ํ (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf
Electron ͷ͠ํ (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf Booooooo
ಛʹ DOM based XSS ͕͋Δ ͱ NG
DEMO
ʘ(^o^)ʗ
ٹ͍͋Δ
Security Updates
جຊతʹ nodeIntegration Λ Θͳ͚Εҙͷίʔυͷ ࣮ߦ·ͰͰ͖ͳ͍ʂʂʂʂ
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; }); });
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>
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> ఘΊΖʂʂʂʂʂʂ
Defensive ʹ࡞ΔͳΒ nodeIntegration Λ false ʹ ͭͭ͠ɺ ipc Ͱ Node.js
ͱ ΓऔΓ
ࢀߟʹ͢Δ͖ࢿྉ
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
ޙ͏Ұͭ
electron ͷҭͯํ • electronica electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍ ͔
electronica install $ (sudo) npm install electronica -g # ͜ΕͰΠϯετʔϧ
$ electronica # ͜ΕͰىಈʂ
electron ͷҭͯํ • electronica electronica ͕ऴΘΕ؆қϒϥβΛ࡞ͬͯ ༡Δɻ
DEMO
Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ
·ͱΊ
·ͱΊ • electron ਐ݄าͰਐԽͯ͠Δ • ΤίγεςϜେ͖͘ͳ͍ͬͯΔ • ͦΕʹͱͳͬͯؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ଟ͍ • ಛʹηΩϡϦςΟ
• ҰॹʹΈΜͳͰ৴߸ΛΓ͍ͨʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠