Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Learn Web Frontend with Electron
Linda_pp
November 07, 2015
Technology
28
12k
Learn Web Frontend with Electron
Slide at #nodefest
Linda_pp
November 07, 2015
Tweet
Share
More Decks by Linda_pp
See All by Linda_pp
ripgrep をライブラリとして使う
rhysd
0
58
port-monolith-to-wasm-for-chrome-extension
rhysd
0
320
Fuzzing Rust Text Editor
rhysd
1
2.5k
Vim compiled to WebAssembly
rhysd
5
1.5k
about-neovim-0.4.0-floating-window
rhysd
3
1.8k
reply.vim
rhysd
0
890
Vim ported to WebAssembly (VimConf 2018)
rhysd
4
2.7k
go-selfupdate-github で ツールを自己アップデートする
rhysd
5
3.8k
小さく始めて育てるコンパイラ
rhysd
13
4.5k
Other Decks in Technology
See All in Technology
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
8
1.8k
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
4
2.6k
Backlog × RPAでいろいろ捗った話
z_tetsu
0
370
もうつまらないとは言わせない!「わかりやすい」プレゼンを作るために気をつけたいこと
torisoup
4
1.3k
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
200
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
yoshiakiyamasaki
1
570
ログ集約基盤をCloudWatchからOpenSearchに変えてみた
yuhta28
0
130
MySQL v5.7 勉強会/study-mysql-ver-5-7
andpad
0
2k
セキュアなTerraformの使い方 ~ 機密情報をコードに含めず環境構築するにはどうしたらいいの?
harukasakihara
8
1.2k
今 SLI/SLO の監視をするなら Sloth が良さそうという話
shotakitazawa
0
260
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
190
GCCP Creator @ COSCUP 2022
line_developers_tw
PRO
0
1.4k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
Fireside Chat
paigeccino
13
1.4k
Support Driven Design
roundedbygravity
87
8.6k
Clear Off the Table
cherdarchuk
79
290k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Embracing the Ebb and Flow
colly
73
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Transcript
Σϒॳ৺ऀ͕ 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 fly
ͰίϯύΠϧ • 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 • ΩʔϘʔυγϣʔτΧοτ • ΞϓϦ config • Electron
ΞϓϦͷςετ • npm ύοέʔδͱͯ͢͠Δ • ωΠςΟϒΞϓϦʹ͍ۙσβΠϯ • …ͦͷଞʢ͕࣌ؒ͋Εʣ
ΩʔϘʔυγϣʔτΧοτ • HTML KeyboardEvent • https://github.com/ccampbell/mousetrap • https://github.com/atom/atom-keymap • Menu
ͷ item ͷγϣʔτΧοτ • global-shortcut Ϟδϡʔϧ • ϗοτΩʔͳͲ
ΞϓϦͷ config JSON Schema Ͱઃఆ߲Λఆٛͯ͠ json- editor Ͱઃఆ UI Λੜ
IUUQTHJUIVCDPNKEPSOKTPOFEJUPS
ΞϓϦͷ config 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
ͰφΠεͳσεΫτοϓΞϓϦΛͭ ͘ΔͨΊͷݟΛڞ༗͍͖ͯ͠·͠ΐ͏ʂ