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
690
electron introduction
meetup app tokyo での紹介記事です
Yosuke Furukawa
PRO
June 24, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
3.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
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.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
820
Other Decks in Programming
See All in Programming
Jakarta EE Meets AI
ivargrimstad
0
430
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
170
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
20
9.6k
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
400
GPUを計算資源として使おう!
primenumber
1
290
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
890
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
160
Gemini CLI のはじめ方
ttnyt8701
1
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
BBQ
matthewcrist
89
9.8k
RailsConf 2023
tenderlove
30
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Docker and Python
trallard
45
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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 ਐ݄าͰਐԽͯ͠Δ • ΤίγεςϜେ͖͘ͳ͍ͬͯΔ • ͦΕʹͱͳͬͯؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ଟ͍ • ಛʹηΩϡϦςΟ
• ҰॹʹΈΜͳͰ৴߸ΛΓ͍ͨʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠