【electron】アーキテクチャ図解

はじめに、electronプロジェクトの作成手順はelectron getting startedを参照。 簡単にまとめる。

npm init
npm install --save-dev electron
touch index.js
vim package.json # scriptsに"start": "electron ."を追加
npm start

さて、本題。
※この記事の目的は概念の整理であり、具体的なプログラムの書き方を示すものでありません。

electronアーキテクチャ

electron.jpg

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をレンダラープロセスから呼び出すことで、メインプロセスとレンダラープロセス間で通信（片方向通信、双方向通信）ができるようになる。レンダラープロセスを起点にした通信、メインプロセスを起点にした通信の両方に対応している。

プリロードスクリプトのアタッチはメインプロセス側のスクリプトで行う。

まとめ

  1. npm startを実行する
  2. メインプロセスでindex.jsが実行され、アプリケーション（ウィンドウ）が立ち上がる。
  3. このとき、プリロードスクリプトも実行される
  4. その後、ウィンドウ（chromium）上でレンダラープロセスが走り、HTML・CSS・JSから画面が描画される。
  5. 必要に応じて（例えばボタンをクリックすると）、プリロードスクリプトで公開したAPIを利用してレンダラープロセスがメインプロセスへ通信を行いデータをやりとりする

以上。

参考

https://www.electronjs.org/ja/docs/latest/