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
Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
RYOTA
December 05, 2022
290
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜
RYOTA
December 05, 2022
More Decks by RYOTA
See All by RYOTA
Webの基本のキ
weberyota
0
67
高卒エンジニアがMBAを受講してみた
weberyota
0
120
“効率的”とは
weberyota
0
170
人を集める
weberyota
0
84
ブロックチェーンを活用したスキル証明技術.pdf
weberyota
0
420
Featured
See All Featured
Navigating Weather and Climate Data
rabernat
0
490
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.8k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
810
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.8k
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
Documentation Writing (for coders)
carmenintech
77
5.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Embracing the Ebb and Flow
colly
88
5.1k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
220
Transcript
RYOTA 〜 Electron のすすめ〜 Web技術 で デスクトップアプリ !!?
RYOTA 経歴 D 大手重工業 工場作業員(5年2 D 大手人材系企業 営業マン
(3年2 D Webエンジニア (3年2 D フリーランスエンジニア (現在)
RYOTA 技術スタック
お話しする内容 ) Electronと% ) Electronの実行環 ) Electronのプロセスモデル
What' s Electron?
Web技術でデスクトップアプリが作れる
クロスプラットフォーム アプリケーション ※Linux OSにも対応
Electron製アプリ ※代表作
Runtime Node.js Chromium
※Vue.js等も使用可能 Electronが起動 Chromiumが駆動 HTML/CSS/JavaScriptをロード Reactをレンダリング Node.js環境で実行
実際にやってみた
$ yarn start
/index.js /index.html /package.json
Process Model Main Process Renderer Process
メインプロセス 9 アプリケーションのエンドポイントとして機& 9 アプリケーションのライフサイクルを管 9 アプリケーションウィンドウを作成し管 9 ネイティブ機能を制御
レンダラー プロセス レンダラー プロセス レンダラー プロセス メインプロセス IPC 通信 (InterProcess
Communication)
まとめ Web技術でデスクトップが作れる Node.js環境で実行、内部でChromiumが駆動 ネイティブ機能 / 中枢機能をメインプロセスが担う
Thank you !!