electron introduction

meetup app tokyo での紹介記事です

Transcript

1. Electron Introduction
   @yosuke_furukawa
   

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

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

   View Slide

4. ࠷ۙ
   

   View Slide

5. View Slide

6. ࡱӨ͞Εͨসإ
   

   View Slide

7. ׬શʹҰக
   

   View Slide

8. Electron
   

   View Slide

9. What is Electron??
   • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ
   έʔγϣϯϑϨʔϜϫʔΫ

   Windows, Linux, Mac OSX
   • GitHub ࣾ੡ʢ΋ͱ΋ͱ͸ Atom ΤσΟλͷͨ
   Ίʹ࡞ΒΕͨ΋ͷʣ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Electron ͷத਎
    

    View Slide

14. $ISPNJVN
    .BJO1SPDFTT
    3FOEFSFS1SPDFTT
    IPC ௨৴
    fork
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. ͕͍ͧ͜͜͢͝ Electron
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. 693 packages
    

    View Slide

23. Electron Λ
    ࠾༻͍ͯ͠Δπʔϧ
    

    View Slide

24. View Slide

25. OSX ͬΆ͍ݟͨ໨ʹ͍ͨ͠
    

    View Slide

26. PhotonKit
    

    View Slide

27. PhotonKit
    CSS class set ͕طʹ͋Δ
    

    View Slide

28. Chrome ͬΆ͍ tab
    Λ࡞Γ͍ͨ
    

    View Slide

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

    View Slide

30. ࣄྫ͕๛෋
    awesome-electron Λࢀর
    

    View Slide

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

    View Slide

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

    View Slide

33. ࣄྫ͕๛෋
    Chat application FRIENDS ౳
    

    View Slide

34. ࣄྫ͕๛෋
    Mojibar => emoji searcher
    

    View Slide

35. Electron APIs
    

    View Slide

36. Electron APIs
    • Main Process (node.jsଆ)
    • app 

    ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻ API
    • autoUpdater 

    ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ
    • powerMonitor 

    όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌
    • Menu/MenuItem

    ͍ΘΏΔ͜Ε→

    γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ
    

    View Slide

37. Electron APIs
    • Render Process (chromiumଆ)
    • desktopCapturer 

    σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API
    • webframe 

    zoom, input text field ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔౳
    • Both Process (྆ํͰ࢖͑ΔAPI)
    • clipboard 

    ΫϦοϓϘʔυͷதͷίϐʔͨ͠΋ͷΛऔΕΔΑ͏ʹ͢Δ
    • shell

    desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ෇͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ
    open ίϚϯυͱಉ༷)
    

    View Slide

38. ͕͜͜΍͹͍ͧ Electron
    

    View Slide

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

    View Slide

40. Electron ͷ౗͠ํ

    (by hasegawayosuke)
    http://utf-8.jp/public/2016/0307/electron.pdf
    

    View Slide

41. Electron ͷ౗͠ํ

    (by hasegawayosuke)
    http://utf-8.jp/public/2016/0307/electron.pdf
    Booooooo
    

    View Slide

42. ಛʹ DOM based XSS ͕͋Δ
    ͱ NG
    

    View Slide

43. DEMO
    

    View Slide

44. ʘ(^o^)ʗ
    

    View Slide

45. ٹ͍͸͋Δ
    

    View Slide

46. Security Updates
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. ࢀߟʹ͢Δ΂͖ࢿྉ
    

    View Slide

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
    

    View Slide

54. ޙ΋͏Ұͭ
    

    View Slide

55. electron ͷҭͯํ
    • electronica 

    electron tutorial Λ࡞࣮ͬͯߦͯ͠ΈΔͱ͍͍
    ͔΋
    

    View Slide

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

    View Slide

57. electron ͷҭͯํ
    • electronica 

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

    View Slide

58. DEMO
    

    View Slide

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

    View Slide

60. ·ͱΊ
    

    View Slide

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

    View Slide

62. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide