Electron App の作り方

by Yosuke Furukawa

Slide 1

Slide 1 text

Electron App ͷ࡞Γํ @yosuke_furukawa

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

New Logo

Slide 4

Slide 4 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Electron

Slide 9

Slide 9 text

Electron ͱ͸ • ΫϩεϓϥοτϑΥʔϜσεΫτοϓΞϓϦ έʔγϣϯϑϨʔϜϫʔΫ  Windows, Linux, Mac OSX • GitHub ࣾ੡ʢ΋ͱ΋ͱ͸ Atom ΤσΟλͷͨ Ίʹ࡞ΒΕͨ΋ͷʣ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Electron ͷத਎

Slide 13

Slide 13 text

$ISPNJVN .BJO1SPDFTT 3FOEFSFS1SPDFTT IPC ௨৴ fork

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

͕͍ͧ͜͜͢͝ Electron

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

OSX ͬΆ͍ݟͨ໨ʹ͍ͨ͠

Slide 24

Slide 24 text

PhotonKit

Slide 25

Slide 25 text

PhotonKit CSS class set ͕طʹ͋Δ

Slide 26

Slide 26 text

ࣄྫ͕๛෋ awesome-electron Λࢀর

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ࣄྫ͕๛෋ PlayBack => video player

Slide 29

Slide 29 text

ࣄྫ͕๛෋ Chat application FRIENDS ౳

Slide 30

Slide 30 text

Electron APIs

Slide 31

Slide 31 text

Electron APIs • Main Process (node.jsଆ) • app   ΞϓϦέʔγϣϯͷىಈ΍ऴྃͳͲͷLifeCycle؅ཧ༻ API • autoUpdater   ࣗಈߋ৽ݕ஌ɾμ΢ϯϩʔυɾΞοϓσʔτػೳ • powerMonitor   όοςϦʔ͕੾Εͯsuspendʹͳͬͨ/ACΞμϓλʔ͕੾Εͨ౳ͷݕ஌ • Menu/MenuItem  ͍ΘΏΔ͜Ε→  γϣʔτΧοτΩʔͰϝχϡʔݺͼग़͠ͳͲ΋ରԠ

Slide 32

Slide 32 text

Electron APIs • Render Process (chromiumଆ) • desktopCapturer   σεΫτοϓΩϟϓνϟʔΛऔΕΔΑ͏ʹ͢Δɺڧ͍API • webframe   zoom, input text ﬁeld ʹରͯ͠spell checkerΛ͢Δ͔Ͳ͏͔౳ • Both Process (྆ํͰ࢖͑ΔAPI) • clipboard   ΫϦοϓϘʔυͷதͷίϐʔͨ͠΋ͷΛऔΕΔΑ͏ʹ͢Δ • shell  desktopͷػೳͱͷڞଘ shell.openExternal Ͱ֦ுࢠʹඥ෇͍ͨػೳΛ࣮ߦ͢Δ(ॴҦ open ίϚϯυͱಉ༷)

Slide 33

Slide 33 text

ࢀߟʹ͢Δ΂͖ࢿྉ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ޙ΋͏Ұͭ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

DEMO

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Electron ΛҰॹʹҭ͍͖ͯͯ ·͠ΐ͏ɻ