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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
8845musign
November 10, 2015
Technology
420
1
Share
Introduction of Electron 〜Electron入門〜
8845musign
November 10, 2015
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
1
1.3k
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
300
業務システムに必要なアクセシビリティ
8845musign
1
1.1k
業務システム狂詩曲
8845musign
4
2.2k
READING The Atomic Workflow
8845musign
3
760
いまさら styled components 入門した
8845musign
3
970
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.8k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2.2k
感性デザインとは?
8845musign
4
2k
Other Decks in Technology
See All in Technology
2026-04-02 IBM Bobオンボーディング入門
yutanonaka
0
240
機能・非機能の学びを一つに!Agent Skillsで月間レポート作成始めてみた / Unifying Bug & Infra Insights — Building Monthly Quality Reports with Agent Skills
bun913
5
3.5k
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
visional_engineering_and_design
1
290
試されDATA SAPPORO [LT]Claude Codeで「ゆっくりデータ分析」
ishikawa_satoru
0
190
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
10
77k
OPENLOGI Company Profile for engineer
hr01
1
62k
遊びで始めたNew Relic MCP、気づいたらChatOpsなオブザーバビリティボットができてました/From New Relic MCP to a ChatOps Observability Bot
aeonpeople
1
180
本番環境でPHPコードに触れずに「使われていないコード」を調べるにはどうしたらよいか?
egmc
1
190
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
4
13k
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
you
PRO
0
250
【関西電力KOI×VOLTMIND 生成AIハッカソン】空間AIブレイン ~⼤阪おばちゃんフィジカルAIに続く道~
tanakaseiya
0
170
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
happysamurai294
0
390
Featured
See All Featured
Crafting Experiences
bethany
1
110
How to Ace a Technical Interview
jacobian
281
24k
Believing is Seeing
oripsolob
1
110
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
120
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
210
Testing 201, or: Great Expectations
jmmastey
46
8.1k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
500
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
500
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
170
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 ϨΨγʔϒϥβ͔Βղ͖์ͨΕָ͍ͯ͠
ϝϦοτ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠