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
280
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
63
高卒エンジニアがMBAを受講してみた
weberyota
0
120
“効率的”とは
weberyota
0
160
人を集める
weberyota
0
83
ブロックチェーンを活用したスキル証明技術.pdf
weberyota
0
410
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
950
Art, The Web, and Tiny UX
lynnandtonic
304
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
630
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
390
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
330
From π to Pie charts
rasagy
0
210
Paper Plane
katiecoart
PRO
1
51k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
290
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.3k
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 !!