Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction of Electron 〜Electron入門〜
Search
8845musign
November 10, 2015
Technology
1
390
Introduction of Electron 〜Electron入門〜
8845musign
November 10, 2015
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
780
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
230
業務システムに必要なアクセシビリティ
8845musign
1
1k
業務システム狂詩曲
8845musign
4
2k
READING The Atomic Workflow
8845musign
3
670
いまさら styled components 入門した
8845musign
3
860
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2k
感性デザインとは?
8845musign
4
1.8k
Other Decks in Technology
See All in Technology
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
190
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.4k
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.8k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
200
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
140
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.7k
OPENLOGI Company Profile
hr01
0
60k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Unsuck your backbone
ammeep
669
57k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
How to Ace a Technical Interview
jacobian
276
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Site-Speed That Sticks
csswizardry
4
410
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
Introduction of Electron !NVTJHO
ࣗݾհ w !NVTJHO w 8FCσβΠφ̎ϓϩάϥϚ̎ w σβΠφ࣌ͣͬͱK2VFSZΛॻ͍͍ͯ·ͨ͠ w ԿΛؒҧͬͨͷ͔࠷ۙ(PݴޠΛॻ͍ͯ·͢
ΞδΣϯμ w &MFDUSPO֓ཁ w ͭͬͯ͘Έͨ w 8FCWTωΠςΟϒ
Electron֓ཁ
w ΫϩεϓϥοτϑΥʔϜͷΞϓϦέʔγϣϯ࣮ߦڥ w 8FCͷٕज़ͰωΠςΟϒΞϓϦ͕࡞ΕΔ w )5.-$44 w +BWB4DSJQU w खܰʹΞϓϦ͕࡞ΕΔͱ͍͏͜ͰࠓඇৗʹΓ্͕͍ͬͯΔ
w ࠃͰݸਓϨϕϧͰिʹຊ΄ͲͷΞϓϦϦϦʔε Electronͱ
None
w $ISPOJVN /PEFKT w $ISPOJVN$ISPNFͷΦʔϓϯιʔεϓϩδΣΫτ w +BWB4DSJQU͔ΒOPEFKTٴͼMJCDISPNJVNDPOUFOUΛୟ͘MJCDISPNJVNDPOUFOU $ISPOJVNΛMJCSBSZԽͨ͠ͷ w ؙ͝ͱ$ISPNFΛಉࠝ͢ΔͷͰਅͷҙຯͰΫϩεϓϥοτϑΥʔϜʁ
ࢀߟ ॕ"UPNͷ8FC$PNQPOFOUTಋೖɺ͍ͭͰʹ"UPN4IFMMͷɻ IUUQTUFQTEPEHTPOPSHCBUPNGSPNUIFTIFMMTJEF Architecture
Architecture main process renderer process renderer process Entry Point JavaScript
Script create call IPC HTML/CSS
Productionࣄྫ
None
Code Editor Atom
Git Client GitKraken
Mail Client
Chat Slack
Game DUELIST
ͬͯΈͨ
w #SPXTFS4ZODͱ͍͏8FCݕূπʔϧ w 1SPYZαʔόͱͯ͠ಈ࡞͠ɺෳͷ ϒϥβͰදࣔͷಉظΛऔΕΔ w ଞʹศརͳػೳଟ w ݕূ͕ḿΔ w
/PEFKT ͰλεΫϥϯφʔίϚϯυ Ͱ࣮ߦ Ϟνϕʔγϣϯ
σβΠφࠇ͍ը໘ා͍
(6*͕ඞཁͩɹˠɹ࡞Ζ͏
w 8FCपΓͷٕज़͔࣋ͬͯ͠ͳ͍ͧ w &MFDUSPOͯͷ͕ग़ͨΒ͍͠ w ࠷ۙྲྀߦͬͯͯΠέͯΔΒ͍͠ w +BWB4DSJQUͳΒ͍ͬͺ͍ॻ͍͖ͯͨʢ࣮ࡍK2VFSZʣ ཱ͔ͪͩΔน
w ػೳΛߜΕಠΓͰνϚνϚ࡞͍ͬͯͯԿͱ͔ͳΓͦ͏ w ͍ͭͰʹ+BWB4DSJQUΛษڧ͠Α͏ w ΫϩεϒϥβΛߟྀ͠ͳͯ͘ྑ͍ͷͰ༡ͦ͏ औΓΉʹ͋ͨͬͯ
GUISync
w OPEFKT͕͋Εಈ͘ XJOEPXTͰWJTVBMTUVEJP͕ඞཁ w ઃఆϑΝΠϧΛੜͯ͠ίϚϯυΛୟ͘ w ػೳͨͬͨ͜Ε͚ͩ w HJUIVCDPNNVTJHO(6*4ZOD
(6*4ZOD
w ͱͯૣ͍ w ͨͩ͠ɺ࣮ߦϑΝΠϧ.#ۙ͘ʹͳΔ ˠ$ISPOJVNΛؚΉͨΊ ElectronͷϏϧυ
ࢧ͑Δٕज़
w &4 w OPEFKT w )5.-$44 w 4$444"44 +BEF w
5ZQF4DSJQU w (VMQ w ϑϨʔϫʔΫҰͳ͠ +4$44ͱ ࢧ͑Δٕज़
w /PEFKT·ͩ&4ʹશରԠ͍ͯ͠ͳ͍ w #BCFMਏͦ͏ͳͷͰ&4ͷಋೖͻͱ·ͣݟૹΓ ES5
w &MFDUSPOը໘ʢϒϥβʣ͔ΒOPEFKT͕ୟ͚Δ w ΫϥΠΞϯταΠυͰSFRVJSFͰ͖Δෆࢥٞͳੈք w ϩʔΧϧϑΝΠϧͷಡΈࠐΈͪΖΜ ίϚϯυୟ͚Δ w &WFOU&NJUUFSخ͍͠ node.js
w #SPXTFS4ZODωΠςΟϒϞδϡʔϧΛ͍ͬͯΔͨΊʹϓϥοτϑΥʔϜ ͝ͱͰϏϧυ͢Δඞཁ͕͋ͬͨ w OPEFͷDIJME@QSPDDFTTTQBXO w ඇಉظͰίϚϯυ࣮ߦ w TQBXO bOQN`
<bJOTUBMM` bCSPXTFSTZOD` BrowserSyncͷϏϧυ
w +4Ͱܕ͕ཉ͍͠ w 6*Ͱͳ͍෦·Ͱ+BWB4DSJQUͰΧόʔ͠ͳ͍ͱ͍͚ͳ͍ͨΊʹಋೖ w &MFDUSPOͰ+4Λॻ͘ͷʹΘ͟ΘϏϧυͯ֬͠ೝ͢Δͷखؒ ຌϛείϯύΠϧΤϥʔͰݕ w 7JTVBM4UVEJP$PEFඇৗʹศར
w &MFDUSPO͚ͷܕఆٛϑΝΠϧϦϙδτϦʹͪΌΜͱଘࡏ TypeScript
w $44ϓϦϓϩηοα w ن͔Β͢Δͱඞཁͳ͍͕ Ͳ͏ͤ+4Ϗϧυ͢ΔͷͰೖΕͨ w $44Ϟδϡʔϧׂ͢ΔͱḿΔ SCSS/SASS
w Θ͟Θ͟ΞϓϦΛϏϧυ͢Δඞཁͳ͍ w Ͳ͏ͤ)5.-Ͱදࣔ͞Ε͍ͯΔͷ͔ͩΒ w ݕূ༻)5.-Λ༻ҙͯ͠ίϯύΠϧͨ͠$44Λಡ·ͤͯ֬ΊΔ ϨΠΞτͷ֬ೝ
WBSCUO"DUJPO7JFXOFX#UO"DUJPO7JFX \ TUBSU'VODGVODUJPO FWFOU \ UIJTDSFBUF4FUUJOH'JMF WBSTUBSUUIJTCSPXTFS4ZODTUBSU TUBSUPO
TUBSU GVODUJPO EBUB \ WBSTUS4USJOHGSPN$IBS$PEFBQQMZ OVMM EBUB ίʔϧόοΫࠈ
w OPEFKTجຊΠϕϯτۦಈͰඇಉظॲཧ w ԡ͠دͤΔίʔϧόοΫͷཛྷ w ঢ়ଶΛେྔʹཧͤ͞ΒΕͯਏ͍ w NBJOSFOEFSFSDIJME@QSPDFTT ໘ݟΔͷଟ͍ w
1SPNJTFͱ&WFOU&NJUUFSͰؤுΔ ίʔϧόοΫࠈ
͋ΔఔͷنͳΒ εςʔτϨεͷ'MVYྑͦ͞͏
Web vs ωΠςΟϒ
ී௨ͷWEBͩͱ MJTU FEJU DPOpSN QPTU DPNQMFUF w 63-ػೳ w ϢʔβͷΞΫγϣϯ63-ը໘ʹΑׂͬͯ͞ΕΔ
w ׂϢʔβମݧͷஅΛੜΉ w ͨͩ͠ɺطʹ8FCʹର͢ΔϝϯλϧϞσϧ͕ܗ ͞Ε͍ͯΔͨΊϢʔβҧײΛײ͡ͳ͍ w Ϣʔβͬͯ͘ΕΔʢ͋Δఔʣ
ωΠςΟϒΞϓϦͰ ϑΝΠϧΛ։͘ ฤू อଘ w ֤ϑϩʔΛ૬ޓʹߦ͖དྷ͠ͳ͕Β࡞ۀਐΉ γʔϜϨεͳମݧ͕͋Δ w ̍ը໘ʹ༷ʑͳૢ࡞͕ಉډ͠ɺಉ࣌ʹߦΘΕΔ w
Ϣʔβͬͯ͘Εͳ͍ w ωΠςΟϒΞϓϦͰͨΓલ
ωΠςΟϒΞϓϦͷ6*Ͱ
ྫ͑MacͷUI w ࠨ049ͷઃఆը໘ɻ0,Ωϟϯηϧ Ϙλϯ͕ଘࡏ͠ͳ͍ w ઃఆมߋˠଈө w ࠨͷด͡ΔϘλϯΛԡͯ͠ঢ়ଶอ ଘ͞ΕɺҰ࣌తʹίϯςΩετ͕Ӆ͞ ΕΔ͚ͩ
w γʔϜϨε
iOSͷ͢ΓΨϥεදݱ w J04͔Βಋೖ w લͷը໘Λಁաతʹݟͤͯ҉ࣔ͢Δ͜ͱʹΑΓɺ Ұ࿈ͷը໘ભҠ͕࿈ଓͨ͠ମݧͰ͋Δ͜ͱΛ Ϣʔβ҉͍ࣔͯ͠Δ w ܾ͓ͯ͠͠ΌΕ͚ͩͰͳ͍ w
ωΟςΟϒͷੈքͰγʔϜϨεͳ ϢʔβମݧΛߏங͢Δ ͨΊʹΛڽΒ͍ͯ͠Δ
8FCٕज़Λ͍ͬͯͯ ωΠςΟϒϨϕϧͷ6*
ElectronͰඞવతʹ SPAͱͳΔ
AtomͷΞϓϦମݧ
AtomͷΞϓϦମݧ
w 8FMDPNɺฤूɺઃఆɺϓϩδΣΫτϑΝΠϧදࣔɾɾɾͳͲͷ·ͬͨ͘ҧ ͏ίϯςΩετͷը໘͕ಉ࣌ʹදࣔ͞Ε͍ͯΔ w .BDฒΈʹγʔϜϨε w 8FC͔Β͢Δͱಉ͡Α͏ͳͷΛ࡞Δͷͱͯ͠ΜͲ͍ w ωΠςΟϒΞϓϦͰͨΓલ AtomͰ
w ଞϓϥοτϑΥʔϜҧͬͯɺ౷Ұతͳ6*͕༻ҙ͞Ε͍ͯͳ͍ w #PPUTUSBQ͋Γ͖ͨΓ w 1PMZNFS.BUFSJBM%FTJHO͋ͨΓ ϞόΠϧͷ͍͕ؾʹͳΔ ७ਮͳσεΫτοϓΞϓϦͱͯ͠Ͳ͏ͳͷʁ w &MFDUSPO͚ͷ$44ϑϨʔϜϫʔΫ͕ొ࢝͠Ί͍ͯΔ
UIਏ͍
Photon
React Desktop (alpha)
·ͱΊ
w ࣮ߦϑΝΠϧ͕Ͱ͔͍ w ϑϩϯτΤϯυք۾ͷࠞಱΛͦͷ··ܧঝ͍ͯ͠Δ w ·ͩ҆ఆ͍ͯ͠ͳ͍෦ w 6*͍͠ σϝϦοτ
w खܰ w ΫϩεϓϥοτϑΥʔϜ w Ϗϧυૣ͍ w ๛ͳ+BWB4DSJQUOQNपΓͷࢿ࢈ w ϨΨγʔϒϥβ͔Βղ͖์ͨΕָ͍ͯ͠
ϝϦοτ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠