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

Electron App の作り方

Electron App の作り方

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

Yosuke Furukawa
PRO

March 07, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

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