Tweet
Tweet

Slide 1

Slide 1 text

Electron Introduction @yosuke_furukawa

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

Recent works in my previous company • front-end / server-side engineer • creating apps using Electron • creating widget library using React • creating server APIs

Slide 4

Slide 4 text

࠷ۙ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ࡱӨ͞Εͨসإ

Slide 7

Slide 7 text

׬શʹҰக

Slide 8

Slide 8 text

Electron

Slide 9

Slide 9 text

What is Electron?? • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ
 Windows, Linux, Mac OSX • GitHub ࣾ੡ʢ΋ͱ΋ͱ͸ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨ΋ͷʣ

Slide 10

Slide 10 text

What is Electron?? • ࡞ऀ͸ @zcbenz ࢯ • ࣅͨΑ͏ͳϓϩδΣΫτͱͯ͠NW.js͕͋Δ ͕ɺNW.js͸Electron։ൃ౰࣌ෆ҆ఆͰ͋Γɺ ࠜຊͷίϯηϓτͷͱ͜ΖͰҧ͍Λײͨͨ͡ Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ

Slide 11

Slide 11 text

What is Electron?? • Electronͷத਎͸ • • Chromium • Browser ͷϨϯμϦϯάϓϩηε͸Chromium͕୲ ౰ɺதͰϨϯμϦϯάϓϩηεΛ࡞Δॴ΍ϑΝΠϧΛ ։͘ॴɺXHR/fetchҎ֎ͰͷΞΫηε͸Node.js͕୲౰

Slide 12

Slide 12 text

What is Electron?? • V8 ͕ Node / Chromium Ͱڞ༗͞ΕͯΔ • Node/Chromium Ͱ(΄΅)͓ͳ͡ίʔυ͕ಈ͘

Slide 13

Slide 13 text

Electron ͷத਎

Slide 14

Slide 14 text

$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork

Slide 15

Slide 15 text

$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork ϒϥ΢βͷ ϨΠϠ ϒϥ΢βΛૢ࡞͢ Δϓϩηε JSͰૢ࡞Մೳ ϝΠϯϓϩηε

Slide 16

Slide 16 text

Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲౰ • Renderer Process ͱ௨৴ͯ͠ॲཧΛߦͬͨ Γɺͦ΋ͦ΋Renderer Process Λىಈͤͨ͞ Γ͢Δॴɻ

Slide 17

Slide 17 text

Renderer Process • Main process ͕ࢦఆͨ͠URLʹ͋ΔϦιʔεΛϩʔ υͯ͠ىಈ͢Δϓϩηε • htmlΛදࣔ͢ΔɺcssͰϨΠΞ΢τ૊ΉɺJSͰdomΛ ૢ࡞͢ΔͳͲ΄΅ϒϥ΢βͷ࢓ࣄ • །Ұϒϥ΢βͱҧ͏ͷ͸Renderer Process ͔Β Main ͱ௨৴ͯ͠ɺ Node.js ͷॲཧΛಁաతʹݺ΂Δॴ

Slide 18

Slide 18 text

͕͍ͧ͜͜͢͝ Electron

Slide 19

Slide 19 text

Node.js ͷϥΠϒϥϦΛ௚઀ಁ աతʹݺ΂Δɻ // ࣗ෼ͷϩʔΧϧϑΝΠϧಡΈ͜ΜͩΓ const fs = require(‘fs’); fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); });

Slide 20

Slide 20 text

Cross Platform • Windows Ͱ΋ OSX Ͱ΋ಈ͘!!! • Node.js ++

Slide 21

Slide 21 text

npm Λج൫ͱ͢ΔಠࣗΤίγ εςϜ͕Ͱ͖ͯΔ

Slide 22

Slide 22 text

693 packages

Slide 23

Slide 23 text

Electron Λ ࠾༻͍ͯ͠Δπʔϧ

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

OSX ͬΆ͍ݟͨ໨ʹ͍ͨ͠

Slide 26

Slide 26 text

PhotonKit

Slide 27

Slide 27 text

PhotonKit CSS class set ͕طʹ͋Δ

Slide 28

Slide 28 text

Chrome ͬΆ͍ tab Λ࡞Γ͍ͨ

Slide 29

Slide 29 text

chrome-tabs Chrome tab ͬΆ͍ͷ͕ಈ͘

Slide 30

Slide 30 text

ࣄྫ͕๛෋ awesome-electron Λࢀর

Slide 31

Slide 31 text

ࣄྫ͕๛෋ ScreenCat ͰσεΫτοϓεΫϦʔϯڞ༗

Slide 32

Slide 32 text

ࣄྫ͕๛෋ minira => jira ͷ notification πʔϧ

Slide 33

Slide 33 text

ࣄྫ͕๛෋ Chat application FRIENDS ౳

Slide 34

Slide 34 text

ࣄྫ͕๛෋ Mojibar => emoji searcher

Slide 35

Slide 35 text

Electron APIs

Slide 36

Slide 36 text

Electron APIs • Main Process (node.jsଆ) • app 
 ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻ API • autoUpdater 
 ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ • powerMonitor 
 όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌ • Menu/MenuItem
 ͍ΘΏΔ͜Ε→
 γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ

Slide 37

Slide 37 text

Electron APIs • Render Process (chromiumଆ) • desktopCapturer 
 σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API • webframe 
 zoom, input text field ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔౳ • Both Process (྆ํͰ࢖͑ΔAPI) • clipboard 
 ΫϦοϓϘʔυͷதͷίϐʔͨ͠΋ͷΛऔΕΔΑ͏ʹ͢Δ • shell
 desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ෇͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)

Slide 38

Slide 38 text

͕͜͜΍͹͍ͧ Electron

Slide 39

Slide 39 text

Node.js ͷϥΠϒϥϦΛ௚઀ಁաతʹݺ΂ΔͨΊɺ ͳΜ͔ؒҧͬͯ XSS ͕ى͖Δͱ೚ҙίʔυ࣮ߦͰ͖ Δ // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const fs = require(‘fs’); fs.unlinkSync('/'); // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const cp = require('child_process'); cp.execSync('rm -rf /');

Slide 40

Slide 40 text

Electron ͷ౗͠ํ
 (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf

Slide 41

Slide 41 text

Electron ͷ౗͠ํ
 (by hasegawayosuke) http://utf-8.jp/public/2016/0307/electron.pdf Booooooo

Slide 42

Slide 42 text

ಛʹ DOM based XSS ͕͋Δ ͱ NG

Slide 43

Slide 43 text

DEMO

Slide 44

Slide 44 text

ʘ(^o^)ʗ

Slide 45

Slide 45 text

ٹ͍͸͋Δ

Slide 46

Slide 46 text

Security Updates

Slide 47

Slide 47 text

جຊతʹ nodeIntegration Λ ࢖Θͳ͚Ε͹೚ҙͷίʔυͷ ࣮ߦ·Ͱ͸Ͱ͖ͳ͍ʂʂʂʂ

Slide 48

Slide 48 text

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; }); });

Slide 49

Slide 49 text

Node.js ͷϥΠϒϥϦΛ௚઀ಁ աతʹݺ΂Δɻ // ࣗ෼ͷϩʔΧϧϑΝΠϧಡΈ͜ΜͩΓ const fs = require(‘fs’); fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); });

Slide 50

Slide 50 text

Node.js ͷϥΠϒϥϦΛ௚઀ಁ աతʹݺ΂Δɻ // ࣗ෼ͷϩʔΧϧϑΝΠϧಡΈ͜ΜͩΓ const fs = require(‘fs’); fs.readFile(‘foo/bar/baz’, (err, data) => { console.log(data); }); // ֎෦ϓϩηεΛݺΜͩΓ const cp = require(‘child_process’); cp.exec(‘ls -l’, (err, stdout) => { console.log(stdout); }); ఘΊΖʂʂʂʂʂʂ

Slide 51

Slide 51 text

Defensive ʹ࡞ΔͳΒ nodeIntegration Λ false ʹ ͭͭ͠ɺ ipc Ͱ Node.js ͱ΍ ΓऔΓ

Slide 52

Slide 52 text

ࢀߟʹ͢Δ΂͖ࢿྉ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

ޙ΋͏Ұͭ

Slide 55

Slide 55 text

electron ͷҭͯํ • electronica 
 electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍ ͔΋

Slide 56

Slide 56 text

electronica install $ (sudo) npm install electronica -g # ͜ΕͰΠϯετʔϧ $ electronica # ͜ΕͰىಈʂ

Slide 57

Slide 57 text

electron ͷҭͯํ • electronica 
 electronica ͕ऴΘΕ͹؆қϒϥ΢βΛ࡞ͬͯ ༡΂Δɻ

Slide 58

Slide 58 text

DEMO

Slide 59

Slide 59 text

Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ

Slide 60

Slide 60 text

·ͱΊ

Slide 61

Slide 61 text

·ͱΊ • electron ೔ਐ݄าͰਐԽͯ͠Δ • ΤίγεςϜ΋େ͖͘ͳ͍ͬͯΔ • ͦΕʹͱ΋ͳͬͯؾΛ͚ͭͳ͍ͱ͍͚ͳ͍఺΋ଟ͍ • ಛʹηΩϡϦςΟ • ҰॹʹΈΜͳͰ৴߸Λ౉Γ͍ͨʂ

Slide 62

Slide 62 text

͋Γ͕ͱ͏͍͟͝·ͨ͠