Electronアプリケーション構成

Electronについて全く知らないので、ちょっと基礎知識がないと先に進めなさそうです。。勉強したことをここに備忘録として残していきます。

Electronはmainプロセスとrendererプロセスの2つのプロセスで動作します。

project_dir
├─src
│  ├─main
│  │   index.js
│  │   mainMenu.js
│  │   preview-server.js
│  │   renderer.js
│  └─renderer
│      App.vue
│      main.js
│
├─package.json
│
└─node_module
    │  

main rendererプロセスの役割

プロセス説明
mainプロセスmainプロセスはElectron起動後最初に立ち上がるプロセスでElectronを終了するまで動作します。
rendererプロセスmainプロセスから作成されたWebページが動くプロセス。各rendererプロセスはそれぞれ独立したプロセスのため、お互いの存在を認識していない。

main⇔rendererプロセス間の通信

main⇔rendererの通信はIPCという仕組みで行われている。

プロセスモジュール説明
rendererプロセスipcRenderer①mainプロセスからのメッセージ受信
②mainプロセスへのメッセージ送信
mainプロセスipcMainrendererプロセスからのメッセージ受信を行う。
webcontentsrendererプロセスへのメッセージ送信を行う。
プロセスモジュールメソッド説明
rendereripcRendereron第1引数に指定したチャンネル購読を開始
onceonと同様の動作をするが、一度リスナーが動作すると購読解除。
removeListener指定したチャンネルのリスナー購読を解除する。
removeAllListener指定したチャンネルすべてのリスナー購読を解除する。
send指定したチャンネルにイベントを発行する。
sendSyncsend同様の動作だが、同期通信。
sendToHostsend同様の動作だが、mainではなくrendererで所有しているwebviewが対象。
mainipcMainon第1引数に指定したチャンネル購読を開始
onceonと同様の動作をするが、一度リスナーが動作すると購読解除。
removeListener指定したチャンネルのリスナー購読を解除する。
removeAllListener指定したチャンネルすべてのリスナー購読を解除する。
webcontentssend指定したチャンネルにイベントを発行する。
openDevTools開発ツールを開く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)