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

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

RYOTA
December 05, 2022
96

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

RYOTA

December 05, 2022
Tweet

Transcript

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

    View Slide

  2. RYOTA
    経歴
    D 大手重工業   工場作業員(5年2
    D 大手人材系企業   営業マン  (3年2
    D Webエンジニア              (3年2
    D フリーランスエンジニア (現在)

    View Slide

  3. RYOTA
    技術スタック

    View Slide

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

    View Slide

  5. What' s Electron?

    View Slide

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

    View Slide

  7. クロスプラットフォーム

    アプリケーション
    ※Linux OSにも対応

    View Slide

  8. Electron製アプリ
    ※代表作

    View Slide

  9. Runtime
    Node.js Chromium

    View Slide

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

    View Slide

  11. 実際にやってみた

    View Slide

  12. $ yarn start

    View Slide

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

    View Slide

  14. Process Model
    Main Process Renderer Process

    View Slide

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

    View Slide

  16. レンダラー

    プロセス
    レンダラー

    プロセス
    レンダラー

    プロセス
    メインプロセス
    IPC 通信

    (InterProcess Communication)

    View Slide

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

    View Slide

  18. Thank you !!

    View Slide