Electronの覚書 | ワクガンス

Electronについて

ElectronはWEBシステムの開発技術を用いてデストップアプリを作成する技術である。
ChromiumとNode.jsを一つのランタイムとすることにより動いている。
GUIはChromium、プログラム部分はNode.jsという感じ。
Node.jsとChromiumで使用しているV8エンジンを使用している。（V8エンジンのインスタンスは共有している）
GitHubチームと有志により開発されている。

Electronのアーキテクチャ

Electronにはメインプロセスとレンダラープロセスという2つのプロセスタイプが存在する。
package.json の main で指定されたスクリプト(index.js)を実行するプロセスをメインプロセスという。
レンダラープロセスはChromium のマルチプロセスアーキテクチャを利用したプロセスとのこと。
WEBシステムで例えるとサーバーサイドに相当するものがメインプロセス、フロントサイドに相当するものがレンダラープロセスと思われる。
メインプロセスとレンダラープロセスの間で通信を行う必要がある。
通信方法にはipcRendere,ipMain,RPCスタイルremoteモジュールなるものがある。

Electron API

Electron APIというものが用意されている。
Electron APIはメインプロセスからだけ使用できるもの、レンダラープロセスだけ使用できるもの、両方から使用できるものが存在する。

Node.js API

Node.js で利用できるすべての API は Electron で利用できる。
npmでAWS-SDKをインストールして使用するといったことも可能。

デバッグ

WEBシステムでサーバーサイドとフロントサイドでデバッグ方法が違うのと同様、メインプロセスとレンダラープロセスでデバッグ方法はことなる。
レンダラープロセスをデバッグするときは、Chromium Developer Toolsetなるツールを利用できる。
メインプロセス中のJavaScriptをデバッグするときは、Electronを--inspectまたは、--inspect-brkフラグ付きで起動し、外部デバッガを使用する必要がる。また、Chromium デベロッパーツールなるツールを使うようである。

アプリケーションの配布

実行ファイルであるElectron.app (Linuxではelectron、Windowsではelectron.exe) が作成でき、一般配布することが可能。
プレビルドバイナリなるものをダウンロードする必要がある。
また、ファイル構成を下記のように変更する必要がある。

	electron/resources/app
	  ├── package.json
	  ├── main.js
	  └── index.html

ファイル群をパッケージ化するasarアーカイブなるものも存在する。（dllと似たようなものか？）

electron.exe のファイル名を変更したり、アイコンやその他の情報を rcedit などのツールで編集可能。

2018-7-16

Electronのインストール

npmを使ってElectronをインストールできる。

	$ npm -g install electron-prebuilt

2018-7-16

ElectronのHello World

プロジェクトのディレクトリに移動する
```
	$ cd hello_world
```
package.jsonを作成する
```
	$ npm init -y
```

hello_worldディレクトリ内にindex.jsとindex.htmlを作成

	hello_world
	  ├── package.json
	  ├── index.js
	  └── index.html

(メインプロセス)


'use strict';

var electron = require('electron'); // Electronの使用
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

let mainWindow; // メイン画面オブジェクト

// 全ての画面が閉じられたときのイベント。
app.on('window-all-closed', function() {
	if (process.platform != 'darwin') {
		app.quit();
	}
});

// Electronの初期化完了後に実行
app.on('ready', function() {
	
	// メイン画面のサイズを指定して表示
	mainWindow = new BrowserWindow({
		width: 640,
		height: 480
	});
	
	// レンダラープロセスの呼び出し
	mainWindow.loadURL('file://' + __dirname + '/index.html');

	// 画面が閉じられたらメイン画面オブジェクトも開放。
	mainWindow.on('closed', function() {
		mainWindow = null;
	});
});

(レンダラープロセス)


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

実行する
```
	$ electron .
```
$ electron （ディレクトリパス）
「.」は現在のカレントディレクトリ、すなわちhello_worldディレクトリを示している。
Windows環境なら、helle_worldディレクトリの直下にrun.batファイルを作成するとよい。
run.batの中身
```
	electron .
```
実行するときはrun.batを実行するだけで済む。