Slide 1

Slide 1 text

΢Σϒॳ৺ऀ͕ Electron Ͱϑ ϩϯτΤϯυೖ໳ͨ͠࿩ ɹɹɹ౦ژNodeֶԂࡇ 2015

Slide 2

Slide 2 text

@Linda_pp @rhysd

Slide 3

Slide 3 text

$ͱ--7.ͰԶݴޠίϯύΠϥ ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO • ͦͷଞ • Vim ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ

Slide 4

Slide 4 text

$ͱ--7.ͰԶݴޠίϯύΠϥ ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO &MFDUSPOͰσεΫτοϓΞϓϦʂ • ͦͷଞ • Vim ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ

Slide 5

Slide 5 text

͓͠ͳ͕͖ • Electron ͱ͸ • Electron Ͱ ϑϩϯτΤϯυ ೖ໳ • Electron ։ൃ Tips

Slide 6

Slide 6 text

Electron ͱ͸ • Electron ͱ͸ • Electron ΞϓϦͷΞʔΩςΫνϟ • ΞϓϦྫ

Slide 7

Slide 7 text

Electron ͱ͸ • ΫϩεϓϥοτϑΥʔϜͳσεΫτοϓΞϓ ϦϑϨʔϜϫʔΫʢOS X, Windows, Linuxʣ • Web ͷٕज़ͰσεΫτοϓΞϓϦ͕ͭ͘ΕΔ ʢɹɹChromium + ɹɹʣ • GitHub ʢ@zcbenzʣ੡ɼAtom Editor ͷͨΊ ʹͭ͘ΒΕͨ

Slide 8

Slide 8 text

http://electron.atom.io/

Slide 9

Slide 9 text

$ISPNJVN .BJO1SPDFTT ϝΠϯϓϩηεΞϓϦ 3FOEFSFS1SPDFTT ΢ΣϒΞϓϦ *1$ TQBXO

Slide 10

Slide 10 text

Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτͰ Node.js Ξϓ Ϧ • ϒϥ΢β΢Οϯυ΢ͷ؅ཧ • ΢Οϯυ΢Λ্ཱͪ͛ͯRenderer ϓϩηεΛ ىಈ͢Δ • ։͍ͨ΢Οϯυ΢Ͱ html ϑΝΠϧΛϩʔυ

Slide 11

Slide 11 text

Renderer Process • Main ϓϩηε͕ϩʔυͨ͠ html ϑΝΠϧ͕ ΤϯτϦϙΠϯτ ʢChrome ͷλϒʣ • ҰൠతͳγϯάϧϖʔδΞϓϦέʔγϣϯͱ ࣮ͯ͠૷ • αϯυϘοΫε֎Ͱ࣮ߦ͞ΕΔ

Slide 12

Slide 12 text

σεΫτοϓΞϓϦ޲͚ػೳ • Windows Installer • Auto Updater for Windows and OS X (Squirrel) • Desktop Integration • Dock (OS X) • αϜωΠϧπʔϧόʔ (Windows) • ௨஌ʢOS XɼLinuxʣ • Mac AppStore ޲͚Ϗϧυ

Slide 13

Slide 13 text

࠷খͷΞϓϦέʔγϣϯ 1 { 2 name: MinimalApp, 3 version: 0.0.1, 4 main: main.js, 5 devDependencies: { 6 electron-prebuilt: ^0.34.2 7 } 8 } 1 2 3 4 5 Minimal App 6 7 8 Hello, world!! 9 10 1 'use strict'; 2 const app = require('app'); 3 const BrowserWindow 4 = require('browser-window'); 5 const path = require('path'); 6 7 app.on('ready', () => { 8 let win = new BrowserWindow( 9 {width: 800, height: 600} 10 ); 11 win.on('closed', () => { 12 win = null; 13 app.quit(); 14 }); 15 const url = 'file://' 16 + path.join(__dirname, 'index.html'); 17 win.loadUrl(url); 18 }); NBJOKT QBDLBHFKTPO JOEFYIUNM

Slide 14

Slide 14 text

࠷খͷΞϓϦέʔγϣϯ OPEF@NPEVMFTCJOFMFDUSPO

Slide 15

Slide 15 text

جຊతͳ։ൃπʔϧ • electron-compile • JS, CSS ΛΞϓϦىಈ࣌ʹ on the fly ͰίϯύΠϧ • electron-packager • ֤ϓϥοτϑΥʔϜ޲͚ʹҰൃͰ഑෍ύοέʔδ࡞੒ • electron-rebuild • ໘౗ͳ native ύοέʔδͷϏϧυΛࣗಈԽ • electron-mocha • mocha Ͱॻ͍ͨςετΛ Electron ্ʢϝΠϯ or ϨϯμϥʣͰ࣮ߦ

Slide 16

Slide 16 text

αϯϓϧΞϓϦɿCurve-app IUUQTHJUIVCDPNCFOPHMFDVSWFBQQ • GitHub ͷதͷਓ੡ ͷαϯϓϧΞϓϦ • جຊతͳ Electron ։ൃπʔϧͷ࢖͍ ํ͕෼͔Δ

Slide 17

Slide 17 text

Ϧιʔε • https://github.com/atom/electron/tree/master/docs • ެࣜυΩϡϝϯτɽඞಡɽ • https://discuss.atom.io/c/electron • Electron ͷ࣭໰͕Ͱ͖ΔϑΥʔϥϜɽ • https://github.com/sindresorhus/awesome-electron • awesome Ϧετɽ • Slack • atomio ͷ #electronɼelectron-jp

Slide 18

Slide 18 text

IUUQLPCJUPRJJUBDPNXJO Electron ΞϓϦྫ1 Kobito for Windows

Slide 19

Slide 19 text

IUUQTOZMBTDPN/ Electron ΞϓϦྫ2 Nylas N1

Slide 20

Slide 20 text

IUUQTXXXHJUCPPLDPNFEJUPS Electron ΞϓϦྫ3 GitBook Editor

Slide 21

Slide 21 text

Electron Ͱ ϑϩϯτΤϯυೖ໳ • Electron ͷྑ͞ • ࣗ෼ͷ৔߹ • ϑϩϯτΤϯυΛษڧ͠ͳ͕Β࡞ͬ ͨΞϓϦ

Slide 22

Slide 22 text

Electron ͷྑ͞ • ๲େͳ web ͷࢿ࢈͕࢖͑Δ • Node.js ͷࢿ࢈͕࢖͑Δ • ΢ΣϒαʔϏε޲͚ʹ࡞੒ͨ͠ίϯϙʔωϯτ͕ͦͷ·· ࢖͑ΔʢReact ίϯϙʔωϯτͳͲʣ • Chromium ͚ͩߟ͍͑ͯΕ͹ྑ͍ʢES2015, HTML5ɼCSS3 ࢖͍์୊ʣ • ࡞Γ࢝Ί͔ͯΒಈ͔ͤΔΑ͏ʹͳΔ·Ͱ͕͘͢͝ૣ͍

Slide 23

Slide 23 text

ࣗ෼ͷ৔߹ ࢓ࣄͰʮWindows Ͱಈ͘ GUI ݕূπʔϧʯ ͕ඞཁʹͳΔ → Javaʁ Qtʁ ͲͪΒ΋͋·Γ֮͑ͯͳ͍… → Ͳ͏ͤͳΒ web ΋ֶ΂Δ Electron ࢖ͬͯ ΈΔ͔ʂ

Slide 24

Slide 24 text

web ͷ஌͕ࣝແ͍ͷΛߟྀʹ ೖΕͯ΋αΫοͱͰ͖ͨ ࠓ·Ͱ΄͍͠ͱࢥ͍ͭͭࠊ͕ॏ ͔ͬͨπʔϧ΋ͬ͞ͱͰ͖Δͷ Ͱ͸…ʁ

Slide 25

Slide 25 text

ͭͬͯ͘Έͨ • ShibaɿϚʔΫμ΢ϯϓϨϏϡʔΞϓϦ • TrendyɿGitHub τϨϯυϦϙδτϦΫϥΠΞ ϯτ • TilectronɿλΠϧܕ΢Οϯυ΢ϒϥ΢β • ࡞Γத

Slide 26

Slide 26 text

Shiba IUUQTHJUIVCDPNSIZTE4IJCB

Slide 27

Slide 27 text

Shiba • จॻϏϡϫʔʢϑΝΠϧอଘ࣌ʹࣗಈߋ৽ʣ • ɹɹPolymer + ɹɹTypeScript • ͪΐ͏Ͳ Polymer 1.0 ͕ग़ͨλΠϛϯάͩͬ ͨ • ϓϥάΠϯͱͯ͠ WebComponent Λ௥Ճ͢ Δ͜ͱͰରԠจॻΛ௥ՃͰ͖ΔΑ͏ʹ͍ͨ͠ IUUQTHJUIVCDPNSIZTE4IJCB

Slide 28

Slide 28 text

Trendy IUUQTSIZTEHJUIVCJP5SFOEZ

Slide 29

Slide 29 text

Trendy • GitHub ͷ Trending ϖʔδΛ crawling ͯ͠৽نϦϙ δτϦ͕͋Ε͹௨஌͢Δ • ϝΠϯϓϩηεଆͰ crawling ͯ͠Ϩϯμϥଆʹ௨஌ • ϝχϡʔόʔΞϓϦ • React + Flux + ɹ Primer +ɹɹTypeScript • Flux ָ͍͠ IUUQTSIZTEHJUIVCJP5SFOEZ

Slide 30

Slide 30 text

Tilectron IUUQTHJUIVCDPNSIZTE5JMFDUSPO

Slide 31

Slide 31 text

Tilectron • ޿͍σΟεϓϨΠ޲͚ͷ΢Οϯυ΢෼ׂՄೳͳϒϥ΢ βɽ΢Οϯυ΢͕ڱ͘ͳͬͨΒϞόΠϧϖʔδʹ fallbackʢ࡞Γதʣ • ɹ React + Redux + ES2015 + Dexie.js • ϒϥ΢βͷίΞ෦෼͸ Electron Λͦͷ··࢖͑Δ • UI ͱΩʔϚοϐϯά෦෼Λ͕Μ͹Δ IUUQTHJUIVCDPNSIZTE5JMFDUSPO

Slide 32

Slide 32 text

Electron ։ൃ Tips • ΩʔϘʔυγϣʔτΧοτ • ΞϓϦ config • Electron ΞϓϦͷςετ • npm ύοέʔδͱͯ͠΋഑෍͢Δ • ωΠςΟϒΞϓϦʹ͍ۙσβΠϯ • …ͦͷଞʢ͕࣌ؒ͋Ε͹ʣ

Slide 33

Slide 33 text

ΩʔϘʔυγϣʔτΧοτ • HTML KeyboardEvent • https://github.com/ccampbell/mousetrap • https://github.com/atom/atom-keymap • Menu ͷ item ͷγϣʔτΧοτ • global-shortcut Ϟδϡʔϧ • ϗοτΩʔͳͲ

Slide 34

Slide 34 text

ΞϓϦͷ config JSON Schema Ͱઃఆ߲໨Λఆٛͯ͠ json- editor Ͱઃఆ UI Λੜ੒ IUUQTHJUIVCDPNKEPSOKTPOFEJUPS

Slide 35

Slide 35 text

ΞϓϦͷ config IUUQTHJUIVCDPNKEPSOKTPOFEJUPS

Slide 36

Slide 36 text

Electron ΞϓϦͷςετ • Electron ඇґଘ → Ұൠతͳ node ΞϓϦͱಉ͡ • Ϩϯμϥϓϩηε or ϝΠϯϓϩηεͷΈͷ୯ମςετ → electron-mocha • Ϩϯμϥϓϩηε + ϝΠϯϓϩηε • → WebDriver.js + Selenium Ͱ E2E ςετ • http://electron.atom.io/docs/v0.34.0/tutorial/using-selenium-and- webdriver/ • → ςετ࣮ߦ༻ͷখ͍͞ Electron ΞϓϦΛࣗલͰͭ͘Δ

Slide 37

Slide 37 text

Electron ΞϓϦͷςετ Electron ͸ϔουϨεͰ࣮ߦͰ͖ͳ͍ͷͰɼ Travis ΍ Docker ্Ͱ࣮ߦ͢Δ࣌͸Ծ૝Ϟχ λΛ࢖͏ 1 before_script: 2 - "export DISPLAY=:99.0" 3 - "sh -e /etc/init.d/xvfb start"

Slide 38

Slide 38 text

npm ύοέʔδͰ΋ఏڙ͢Δ • ύοέʔδͱͯ͠΋഑෍ͭͭ͠ɼίϚϯυҰൃͰೖ Δ npm ύοέʔδͱͯ͠΋഑෍͢Δ • electron ͷόΠφϦΛෳ਺ΞϓϦͰڞ༗͢Δ • electron-prebuilt Λ͋͑ͯґଘؔ܎ʹೖΕͳ͍ ʢnpm2ʣ • npm3

Slide 39

Slide 39 text

ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • PhotonʢOS X ෩ʣ IUUQQIPUPOLJUDPN

Slide 40

Slide 40 text

ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • react-desktop • ʢϓϥοτϑΥʔϜωΠςΟϒͳσβΠϯʣ IUUQQIPUPOLJUDPN

Slide 41

Slide 41 text

γϯάϧΠϯελϯεΞϓϦ 1 var myWindow = null; 2 3 var shouldQuit = app.makeSingleInstance(function(cmdline, workdir) { 4 // Someone tried to run a second instance, we should focus our window 5 if (myWindow) { 6 if (myWindow.isMinimized()) myWindow.restore(); 7 myWindow.focus(); 8 } 9 return true; 10 }); 11 12 if (shouldQuit) { 13 app.quit(); 14 return; 15 } 16 17 // Create myWindow, load the rest of the app, etc... 18 app.on('ready', function() { /*...*/ }); ಉ͡ΞϓϦΛෳ਺ىಈ͠ͳ͍Α͏ʹ͢Δʢv0.34.1~ʣ

Slide 42

Slide 42 text

ϝχϡʔόʔΞϓϦ MojibarʢֆจࣈೖྗʣɹgitifyʢGitHub ௨஌ʣ IUUQTHJUIVCDPNNVBONPKJCBS IUUQTHJUIVCDPNFLPOTUBOUJOJEJTHJUJGZ

Slide 43

Slide 43 text

ϝχϡʔόʔΞϓϦ Electron ͷ΢Οϯυ΢ΛϝχϡʔόʔΞϓϦ ͱͯ͠ wrap ͨ͠ϥΠϒϥϦ IUUQTHJUIVCDPNNBYPHEFONFOVCBS

Slide 44

Slide 44 text

ipc ͷ஫ҙ఺ • ipc ͸େ͖͍σʔλΛ΍ΓͱΓ͢Δͱ஗͍ • େ͖͍σʔλΛ΍ΓͱΓ͢Δͷ͸ආ͚Δ • ϑΝΠϧܦ༝ • WebSocket • ϝΠϯϓϩηεΛ worker తʹ࢖͏ͷ͸΍Ίͯ WebWorker Λ࢖͏ • https://github.com/atom/electron/issues/1258

Slide 45

Slide 45 text

·ͱΊ • Electron ͰσεΫτοϓΞϓϦ͕؆୯ʹͭ͘ ΕΔ • Ϋϩεϒϥ΢βΛؾʹͤͣϑϩϯτΤϯυٕ ज़Λֶָ͘͠΂Δ • Electron ͰφΠεͳσεΫτοϓΞϓϦΛͭ ͘ΔͨΊͷ஌ݟΛڞ༗͍͖ͯ͠·͠ΐ͏ʂ