AngularをElectronでネイティブアプリ化する

ElectronはVSCode, Slack, Atomにも使われている技術でWebアプリをネイティブアプリとして出力できるパッケージです。例えば、Angularアプリをお手軽にクロスプラットフォームにネイティブアプリ化ができます。

先日、実際に試してみたのでパッケージングまでの手順を記録しておきます。

動作環境

Windows10 20H2

$ node -v
v10.22.0

$ npm -v
6.14.6

$ ng --version
Angular CLI: 11.0.2
Node: 10.22.0

Angularプロジェクトを準備

まずは既に作成されたAngularプロジェクトを用意します。今回の例ではsample-appという名前のプロジェクトを作成しました。

もし軽く試すだけなら、公式のチュートリアルに沿って新規プロジェクトを作るのが手っ取り早いのでおすすめです。

https://angular.jp/guide/setup-local

Electronをインストール

まずはnpm installしていきます。

$ npm i --save-dev electron

Electron用の設定ファイルを作成

Angularプロジェクトのディレクトリ最上部にmain.jsを作成します。このmain.jsはelectronでビルドする際の設定値を保持します。

$ touch main.js

main.jsの中身は以下のように記述します。

main.js

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('dist/sample-app/index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

注意すべき点は、win.loadFile('...')の引数は、Angularでビルドした後に出力されたindex.htmlへのパスになるように指定する必要があります。ここで存在しないパスを指定してしまうと、Electronでビルドしたネイティブアプリを起動しても画面が真っ白になり動作しません。（ここで何度かハマりました）

続いてpackage.jsonに追記します。

package.json

{
  ...
  "name": "sample-app",
  "version": "0.0.0",
  "author": "your name",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "electron": "ng build --base-href ./ && npx electron ."
  ...
}

ng newで作成したAngularプロジェクトにはauthor, descriptionがありませんが、Electronでパッケージングするにはどちらも記述しておかないと、エラーになりますので必ず記述しておきます。

scriptsに追記をしたことで、npm run electronをターミナルで実行すれば、Angularのビルド完了後にElectronのビルドが実行されるようになります。

続いてindex.htmlを以下のように修正します。

index.html

...
<base href="./">
...

最後にangular.jsonのoutputPathにビルド後に出力されたプロジェクトのディレクトリを指定します。

angular.json

{
    "projects": {
      "sample-app": {
        "architect": {
          "build": {
            "options": {
              "outputPath": "dist/sample-app",
            },
            ...
        }
      }
    },
    ...
}

ElectronでWebアプリを起動してみる

ここまでの設定ができたら、後は以下のコマンドを実行するのみです。

$ npm run electron

新規ウィンドウが立ち上がり、Electron上でアプリが動作するはずです。

Electronでパッケージングする

ElectronでAngularアプリが動いたことを確認できたら、配布できるようにパッケージングします。プロジェクトのルートで下記を実行します。

$ npx @electron-forge/cli import
$ npm run make

処理が終わるとoutディレクトリ内に実行ファイルの入ったディレクトリが作成されているはずです。 Windowsの場合は、out/{プロジェクト名}-win32-x64/{プロジェクト名}.exeを実行すれば、ネイティブアプリ化されたAngularアプリが動きます。

あとがき

Electronの嬉しいところは、Webアプリをそのままネイティブアプリ化できるという点と、クロスプラットフォーム(Win, Mac, Linux)であることに尽きると思います。

HTML, CSS, JSといったWebアプリの知識がそのまま生かせるのも良いですね😊

ネイティブアプリ開発は専用の言語や仕様を覚える必要がある点で割と勉強コスト、保守コストが高めだったりするので機会があれば業務にも積極導入していきたいと思いました。