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

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