Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for RYOTA RYOTA
December 05, 2022
0
260

Web技術 で デスクトップアプリ !!? 〜 Electron のすすめ〜

Avatar for RYOTA

RYOTA

December 05, 2022
Tweet

More Decks by RYOTA

See All by RYOTA
Webの基本のキ
Avatar for RYOTA weberyota
0
51
高卒エンジニアがMBAを受講してみた
Avatar for RYOTA weberyota
0
120
“効率的”とは
Avatar for RYOTA weberyota
0
150
人を集める
Avatar for RYOTA weberyota
0
79
ブロックチェーンを活用したスキル証明技術.pdf
Avatar for RYOTA weberyota
0
400

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
HDC tutorial
Avatar for Michiel Stock michielstock
1
390
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
It's Worth the Effort
Avatar for 3n 3n
188
29k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
320
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

Transcript

  1. RYOTA 〜 Electron のすすめ〜 Web技術 で デスクトップアプリ !!?

  2. RYOTA 経歴 D 大手重工業 　 工場作業員（5年2 D 大手人材系企業 　 営業マン　

    （3年2 D Webエンジニア　 　 　 　 　 　 　 （3年2 D フリーランスエンジニア （現在）

  3. RYOTA 技術スタック

  4. お話しする内容 ) Electronと% ) Electronの実行環 ) Electronのプロセスモデル

  5. What' s Electron?

  6. Web技術でデスクトップアプリが作れる

  7. クロスプラットフォーム アプリケーション ※Linux OSにも対応

  8. Electron製アプリ ※代表作

  9. Runtime Node.js Chromium

  10. ※Vue.js等も使用可能 Electronが起動 Chromiumが駆動 HTML/CSS/JavaScriptをロード Reactをレンダリング Node.js環境で実行

  11. 実際にやってみた

  12. $ yarn start

  13. /index.js /index.html /package.json

  14. Process Model Main Process Renderer Process

  15. メインプロセス 9 アプリケーションのエンドポイントとして機& 9 アプリケーションのライフサイクルを管 9 アプリケーションウィンドウを作成し管 9 ネイティブ機能を制御

  16. レンダラー プロセス レンダラー プロセス レンダラー プロセス メインプロセス IPC 通信 (InterProcess

    Communication)

  17. まとめ Web技術でデスクトップが作れる Node.js環境で実行、内部でChromiumが駆動 ネイティブ機能 / 中枢機能をメインプロセスが担う

  18. Thank you !!