Electron App の作り方

#html5jplat で発表したElectorn App の話です。

Transcript

1. Electron App ͷ࡞Γํ
   @yosuke_furukawa
   

   View Slide

2. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

3. New Logo
   

   View Slide

4. Twitter: @yosuke_furukawa
   Github: yosuke-furukawa
   

   View Slide

5. Node.js ೔ຊϢʔβάϧʔϓ
   ୅ද
   

   View Slide

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

   View Slide

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

   View Slide

8. Electron
   

   View Slide

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

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

   View Slide

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

    View Slide

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

    View Slide

12. Electron ͷத਎
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. ͕͍ͧ͜͜͢͝ Electron
    

    View Slide

18. 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

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

    View Slide

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

    View Slide

21. View Slide

22. View Slide

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

    View Slide

24. PhotonKit
    

    View Slide

25. PhotonKit
    CSS class set ͕طʹ͋Δ
    

    View Slide

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

    View Slide

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

    View Slide

28. ࣄྫ͕๛෋
    PlayBack => video player
    

    View Slide

29. ࣄྫ͕๛෋
    Chat application FRIENDS ౳
    

    View Slide

30. Electron APIs
    

    View Slide

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

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

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

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

    ͍ΘΏΔ͜Ε→

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

    View Slide

32. 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

33. ࢀߟʹ͢Δ΂͖ࢿྉ
    

    View Slide

34. 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

35. ޙ΋͏Ұͭ
    

    View Slide

36. View Slide

37. electron ͷҭͯํ
    • electronica 

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

    View Slide

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

    View Slide

39. DEMO
    

    View Slide

40. electron ͷҭͯํ
    • electronica 

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

    View Slide

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

    View Slide