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
410
Introduction of Electron 〜Electron入門〜
8845musign
November 10, 2015
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
1.2k
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
250
業務システムに必要なアクセシビリティ
8845musign
1
1.1k
業務システム狂詩曲
8845musign
4
2.1k
READING The Atomic Workflow
8845musign
3
720
いまさら styled components 入門した
8845musign
3
910
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2.1k
感性デザインとは?
8845musign
4
1.8k
Other Decks in Technology
See All in Technology
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
110
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
360
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
150
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
株式会社ARAV 採用案内
maqui
0
190
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
3.1k
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
570
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
180
あなたの知らない OneDrive
murachiakira
0
210
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.5k
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
350
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Code Review Best Practice
trishagee
70
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What's in a price? How to price your products and services
michaelherold
246
12k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Building an army of robots
kneath
306
45k
Faster Mobile Websites
deanohume
309
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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 ϨΨγʔϒϥβ͔Βղ͖์ͨΕָ͍ͯ͠
ϝϦοτ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠