Electron App の作り方

Transcript

1. Electron App ͷ࡞Γํ @yosuke_furukawa

2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

3. New Logo

4. Twitter: @yosuke_furukawa Github: yosuke-furukawa

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

6. Recent works in my company • front-end / server-side engineer

   • creating apps using Electron • creating widget library using React • creating server APIs

7. Recent works in my company • front-end / server-side engineer

   • creating apps using Electron • creating widget library using React • creating server APIs

8. Electron

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

   GitHub ࣾ੡ʢ΋ͱ΋ͱ͸ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨ΋ͷʣ

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

    Ίɺશ͘ผͳϓϩμΫτʹͳͬͨɻ

11. Electron ͱ͸ • Electronͷத਎͸ • • Chromium • Browser ͷϨϯμϦϯάϓϩηε͸Chromium͕୲

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

12. Electron ͷத਎

13. $ISPNJVN .BJO
    1SPDFTT 3FOEFSFS
    1SPDFTT IPC ௨৴ fork

14. $ISPNJVN .BJO
    1SPDFTT 3FOEFSFS
    1SPDFTT IPC ௨৴ fork ϒϥ΢βͷ ϨΠϠ ϒϥ΢βΛૢ࡞͢ Δϓϩηε

    JSͰૢ࡞Մೳ ϝΠϯϓϩηε

15. Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτ • Node.js ͕୲౰ • Renderer Process

    ͱ௨৴ͯ͠ॲཧΛߦͬͨ Γɺͦ΋ͦ΋Renderer Process Λىಈͤͨ͞ Γ͢Δॴɻ

16. Renderer Process • Main process ͕ࢦఆͨ͠URLʹ͋ΔϦιʔεΛϩʔ υͯ͠ىಈ͢Δϓϩηε • htmlΛදࣔ͢ΔɺcssͰϨΠΞ΢τ૊ΉɺJSͰdomΛ ૢ࡞͢ΔͳͲ΄΅ϒϥ΢βͷ࢓ࣄ

    • །Ұϒϥ΢βͱҧ͏ͷ͸Renderer Process ͔Β Main ͱ௨৴ͯ͠ɺ Node.js ͷॲཧΛಁաతʹݺ΂Δॴ

17. ͕͍ͧ͜͜͢͝ Electron

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

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

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

21. None
22. None

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

24. PhotonKit

25. PhotonKit CSS class set ͕طʹ͋Δ

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

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

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

29. ࣄྫ͕๛෋ Chat application FRIENDS ౳

30. Electron APIs

31. Electron APIs • Main Process (node.jsଆ) • app 
 ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻

    API • autoUpdater 
 ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ • powerMonitor 
 όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌ • Menu/MenuItem
 ͍ΘΏΔ͜Ε→
 γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ

32. Electron APIs • Render Process (chromiumଆ) • desktopCapturer 
 σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API

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

33. ࢀߟʹ͢Δ΂͖ࢿྉ

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

35. ޙ΋͏Ұͭ

36. None

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

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

    $ electronica # ͜ΕͰىಈʂ

39. DEMO

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

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