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
240
Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜
RYOTA
December 05, 2022
Tweet
Share
More Decks by RYOTA
See All by RYOTA
Webの基本のキ
weberyota
0
39
高卒エンジニアがMBAを受講してみた
weberyota
0
120
“効率的”とは
weberyota
0
140
人を集める
weberyota
0
76
ブロックチェーンを活用したスキル証明技術.pdf
weberyota
0
370
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
BBQ
matthewcrist
89
9.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Docker and Python
trallard
46
3.6k
It's Worth the Effort
3n
187
28k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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 !!