はじめに、electronプロジェクトの作成手順はelectron getting startedを参照。
簡単にまとめる。
npm init
npm install --save-dev electron
touch index.js
vim package.json # scriptsに"start": "electron ."を追加
npm start
さて、本題。
※この記事の目的は概念の整理であり、具体的なプログラムの書き方を示すものでありません。
electronアーキテクチャ
electronはchromiumのアーキテクチャをベースとしている。なので、chromiumに詳しい方はelectronの理解もしやすいと思う。
electronには2つのプロセスが存在する。
- メインプロセス
- レンダラープロセス
メインプロセス
メインプロセスはWebでいうバックエンド、サーバサイドにあたる。npm startを行うとデフォルトではindex.jsが実行されるが、そのプロセスがメインプロセスになる。メインプロセスはOS機能にアクセスできる。index.jsはメインプロセスで実行されることは大切なので意識したい。
メインプロセスの役割は下記の通り。
- アプリケーションウィンドウの作成
- アプリのライフサイクルの管理・ネイティブインターフェースの表示
- レンダラープロセスとイベントの管理
- プリロードスクリプトのアタッチ
- MessagePortの設定・割り当て
- レンダラープロセス間通信の際に有用
- 別途、レンダラープロセスからMessagePortを利用可能にするためのAPIを公開するコードをプリロードスクリプトに記載する必要がある
MessagePortの設定・割り当ては少し難しい（私のあまり把握していない）ので、必要なときに勉強すればいいと思う。
個人的によく使うのは、上4つの機能。
レンダラープロセス
レンダラープロセスの役割は下記の通り。
- 1ウィンドウに1プロセス
- 典型的なフロントエンド機能と同等
- OS、Node.js、electronAPIへのアクセスはできない
レンダラープロセスはchromium（Webでいうブラウザ）上で動作するので、OS機能やNode.js、elctronAPIにはアクセスできない。
つまり、レンダラープロセスでできること = Webブラウザの実行環境でできること、ということである。
プリロードスクリプトについて
基本的に、メインプロセスとレンダラープロセス間の通信はできない。これはつまり、アプリ画面のとあるボタンをクリックしたら、ファイルへ保存したい（もしくはファイルからデータを取得したい）、といったことができないことを意味する。これでは困る。
そこで、プリロードスクリプトというものを利用して、メインプロセスとレンダラープロセス間で通信できるようにする。
プリロードスクリプトで記述することは、レンダラープロセスからアクセスでき、かつメインプロセスへ信号を送るAPI（関数）を定義することである。プリロードスクリプトの実行環境は、一部のelctronAPIを利用できるため、そこで定義するAPIはelectronAPIを拝借してメインプロセスへの通信機能をもつことができる。
つまり、プリロードスクリプトで定義したメインプロセスへの通信機能をもつAPIをレンダラープロセスから呼び出すことで、メインプロセスとレンダラープロセス間で通信（片方向通信、双方向通信）ができるようになる。レンダラープロセスを起点にした通信、メインプロセスを起点にした通信の両方に対応している。
プリロードスクリプトのアタッチはメインプロセス側のスクリプトで行う。
まとめ
-
npm startを実行する - メインプロセスで
index.jsが実行され、アプリケーション（ウィンドウ）が立ち上がる。 - このとき、プリロードスクリプトも実行される
- その後、ウィンドウ（chromium）上でレンダラープロセスが走り、HTML・CSS・JSから画面が描画される。
- 必要に応じて（例えばボタンをクリックすると）、プリロードスクリプトで公開したAPIを利用してレンダラープロセスがメインプロセスへ通信を行いデータをやりとりする
以上。
参考