Electronについて全く知らないので、ちょっと基礎知識がないと先に進めなさそうです。。勉強したことをここに備忘録として残していきます。
Electronはmainプロセスとrendererプロセスの２つのプロセスで動作します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 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 | 開発ツールを開く |
