Electronについて全く知らないので、ちょっと基礎知識がないと先に進めなさそうです。。勉強したことをここに備忘録として残していきます。
Electronはmainプロセスとrendererプロセスの２つのプロセスで動作します。
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プロセス | ipcMain | rendererプロセスからのメッセージ受信を行う。 |
| webcontents | rendererプロセスへのメッセージ送信を行う。 |
| プロセス | モジュール | メソッド | 説明 |
|---|---|---|---|
| renderer | ipcRenderer | on | 第１引数に指定したチャンネル購読を開始 |
| once | onと同様の動作をするが、一度リスナーが動作すると購読解除。 | ||
| removeListener | 指定したチャンネルのリスナー購読を解除する。 | ||
| removeAllListener | 指定したチャンネルすべてのリスナー購読を解除する。 | ||
| send | 指定したチャンネルにイベントを発行する。 | ||
| sendSync | send同様の動作だが、同期通信。 | ||
| sendToHost | send同様の動作だが、mainではなくrendererで所有しているwebviewが対象。 | ||
| main | ipcMain | on | 第１引数に指定したチャンネル購読を開始 |
| once | onと同様の動作をするが、一度リスナーが動作すると購読解除。 | ||
| removeListener | 指定したチャンネルのリスナー購読を解除する。 | ||
| removeAllListener | 指定したチャンネルすべてのリスナー購読を解除する。 | ||
| webcontents | send | 指定したチャンネルにイベントを発行する。 | |
| openDevTools | 開発ツールを開く |
コメント