Learn Web Frontend with Electron

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

@Linda_pp @rhysd

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

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

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

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

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

http://electron.atom.io/

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

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

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

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

࠷খͷΞϓϦέʔγϣϯ 1 { 2 name: MinimalApp, 3 version: 0.0.1, 4
main: main.js, 5 devDependencies: { 6 electron-prebuilt: ^0.34.2 7 } 8 } 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Minimal App</title> 6 </head> 7 <body> 8 Hello, world!! 9 </body> 10 </html> 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

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

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

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

Ϧιʔε • 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

IUUQLPCJUPRJJUBDPNXJO Electron ΞϓϦྫ1 Kobito for Windows

IUUQTOZMBTDPN/ Electron ΞϓϦྫ2 Nylas N1

IUUQTXXXHJUCPPLDPNFEJUPS Electron ΞϓϦྫ3 GitBook Editor

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

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

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

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

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

Shiba IUUQTHJUIVCDPNSIZTE4IJCB

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

Trendy IUUQTSIZTEHJUIVCJP5SFOEZ

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

Tilectron IUUQTHJUIVCDPNSIZTE5JMFDUSPO

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

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

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

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

ΞϓϦͷ conﬁg IUUQTHJUIVCDPNKEPSOKTPOFEJUPS

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

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

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

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

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

γϯάϧΠϯελϯεΞϓϦ 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~ʣ

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

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

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

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

Learn Web Frontend with Electron

Learn Web Frontend with Electron

More Decks by Linda_pp

Other Decks in Technology

Featured

Transcript