Angular アプリを Electron で動かす事始め

Electron (エレクトロン) は、HTML・CSS・JavaScript で構築した Web アプリケーションを Windows や Mac 向けのネイティブアプリとしてビルドしてくれるフレームワーク。ハイブリッドスマホアプリとしてビルドしてくれる Apache Cordova と似たようなモノで、Cordova のデスクトップ版、とでも言おうか。Windows 向けには .exe、Mac 向けには .app 拡張子にまとめ上げたファイルを生成してくれる。GitHub の開発者がメンテナンスしている。

今回はこの Electron を使って、Angular アプリを構築するための初歩の初歩をやってみようと思う。

目次

プロジェクト雛形の生成

まずは Angular CLI で Angular プロジェクトの雛形を起こす。使用したのは @angular/cli@6.1.5。

$ ng new ng-electron --routing --style=scss
$ cd ng-electron/

Electron のインストール

次に、プロジェクトに Electron をインストールする。

$ npm install -D electron

そしたらプロジェクト直下に main.js というファイルを作る。このファイルが Electron のネイティブアプリとしての振る舞いを制御するファイルになる。中身は公式のドキュメントを参考にした以下のようなソースで。

$ touch main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600
  });
  
  // load the dist folder from Angular
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }));
  
  // Open the DevTools optionally:
  // win.webContents.openDevTools();
  
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if(win === null) {
    createWindow();
  }
});

Angular プロジェクトの修正

Angular6 系は、ng build の成果物を dist/ng-electron/ と一段階下がった階層に出力してしまうため、angular.json の outputPath を修正する。

// 次のような行があるはず
"outputPath": "dist/ng-electron",

// → このように直す
"outputPath": "dist",

次に src/index.html を開き、Electron ビルドのための Base Href を修正する。

<base href="/">   <!-- ← このような行を -->
<base href="./">  <!-- ← このように直す -->

最後に、package.json に main プロパティと、npm-scripts electron を追加する。

{
  // 中略…
  "main": "main.js",
  // 中略…
  "scripts": {
    "electron": "ng build --base-href ./ && electron .",
    // 以下略…
}

これで準備完了。

Electron 向けにビルドしてみる

それでは、この設定で Electron を立ち上げてみよう。

$ npm run electron

と実行すると、Angular ビルド後、./dist/ ディレクトリの成果物と main.js ファイルを利用して Electron ウィンドウが起動する。とっても簡単！

Angular アプリから Electron プロセスを操作する ngx-electron

Electron は、package.json の main プロパティで指定したファイルをベースとした Main プロセスと、そこから画面を立ち上げる Renderer プロセスとに別れて動作する。dist/index.html をエントリポイントとして動作する Angular アプリは、当然 Renderer プロセス内で動作することになる。

この Renderer プロセス内から、Electron に対して操作をお願いする Renderer API というモノが用意されており、ngx-electron という npm パッケージを導入すると、それを Angular 内で扱いやすくしてくれるようだ。

コチラはまだ未検証だが、参考までに…。

実行ファイルをビルドするには…

ここまでの環境構築では、.exe や .app といった実行可能ファイルを生成できていない。ネットを調べてみると、angular-electron というボイラープレートプロジェクトがあり、コレがキレイに動いてくれる。

しかしこのプロジェクト、postinstall.js などを見てみると、node_modules/ 配下にインストールされた @angular/devkit/build-angular/ のソースコードを直接書き換えてビルドに利用していたりして、作りがかなりギリギリ感ある。現状このソースコードをそのまま利用すればアプリ開発はできるものの、メンテが大変そうだ。

以上

Angular + Electron な開発をスタートさせるための初歩の初歩を紹介した。ココまでの内容であれば、ココからさらに Cordova プロジェクトとマージして、Angular アプリを Electron もしくは Cordova でビルドして吐き出せる、デスクトップ・スマホ両対応のハイブリッドアプリが作れそうだ。

ココから先、実行可能ファイルに生成するまでの開発プロセスを、バージョンアップに追随しやすい形でまとめきれていなので、そこが今後の課題…。