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

Electron App の作り方

Electron App の作り方

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

Avatar for Yosuke Furukawa

Yosuke Furukawa PRO

March 07, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

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

    • creating apps using Electron • creating widget library using React • creating server APIs
  3. Electron ͱ͸ • Electronͷத਎͸ • • Chromium • Browser ͷϨϯμϦϯάϓϩηε͸Chromium͕୲

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