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
RYOTA
December 05, 2022
0
150
Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜
RYOTA
December 05, 2022
Tweet
Share
More Decks by RYOTA
See All by RYOTA
高卒エンジニアがMBAを受講してみた
weberyota
0
73
“効率的”とは
weberyota
0
74
人を集める
weberyota
0
65
ブロックチェーンを活用したスキル証明技術.pdf
weberyota
0
250
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Six Lessons from altMBA
skipperchong
19
3k
Thoughts on Productivity
jonyablonski
57
3.8k
Teambox: Starting and Learning
jrom
128
8.4k
Being A Developer After 40
akosma
56
580k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Happy Clients
brianwarren
91
6.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Agile that works and the tools we love
rasmusluckow
323
20k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
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 !!