Upgrade to Pro — share decks privately, control downloads, hide ads and more …

electron introduction

electron introduction

meetup app tokyo での紹介記事です

Yosuke Furukawa

June 24, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Recent works in my previous company • front-end / server-side

    engineer • creating apps using Electron • creating widget library using React • creating server APIs
  2. What is Electron?? • Electronͷத਎͸ • • Chromium • Browser

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

    • Node/Chromium Ͱ(΄΅)͓ͳ͡ίʔυ͕ಈ͘
  4. Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲౰ • Renderer Process

    ͱ௨৴ͯ͠ॲཧΛߦͬͨ Γɺͦ΋ͦ΋Renderer Process Λىಈͤͨ͞ Γ͢Δॴɻ
  5. 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>
  6. Electron APIs • Main Process (node.jsଆ) • app 
 ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻

    API • autoUpdater 
 ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ • powerMonitor 
 όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌ • Menu/MenuItem
 ͍ΘΏΔ͜Ε→
 γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ
  7. Electron APIs • Render Process (chromiumଆ) • desktopCapturer 
 σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API

    • webframe 
 zoom, input text field ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔౳ • Both Process (྆ํͰ࢖͑ΔAPI) • clipboard 
 ΫϦοϓϘʔυͷதͷίϐʔͨ͠΋ͷΛऔΕΔΑ͏ʹ͢Δ • shell
 desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ෇͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)
  8. Node.js ͷϥΠϒϥϦΛ௚઀ಁաతʹݺ΂ΔͨΊɺ ͳΜ͔ؒҧͬͯ XSS ͕ى͖Δͱ೚ҙίʔυ࣮ߦͰ͖ Δ <html> <script> // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ

    const fs = require(‘fs’); fs.unlinkSync('/'); // ࣗ෼ͷϩʔΧϧϑΝΠϧΛফͨ͠Γ const cp = require('child_process'); cp.execSync('rm -rf /'); </script> </html>
  9. 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; }); });
  10. 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>
  11. 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> ఘΊΖʂʂʂʂʂʂ
  12. 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