5. パッケージング

前章で HTMLをアプリケーションとして実行することが可能となりましたが、他の人へアプリとして配布するには.exeファイルや.appファイルにするためのパッケージング作業が必要となります。アプリケーションのパッケージングには「electron-packager」を使用すると簡単です。

1. コマンドラインを立ち上げ、以下のコマンドを実行してelectron-packagerをインストールします。コマンドラインを入力するのはFirstAppフォルダーの直下です。srcフォルダーでは実行しないようにしてください。

npm i -D electron-packager

2. パッケージングを実行します。

macOS(darwin)向けアプリケーションを作るときのコマンド

npx electron-packager src FirstApp --platform=darwin --arch=x64 --overwrite

Windows向けアプリケーションを作るときのコマンド

npx electron-packager src FirstApp --platform=win32 --arch=x64 --overwrite

上記のコマンドは、『srcというディレクトリに入っているソースコードをFirstAppというアプリケーション名で64ビット向けにパッケージングし、2回目以降は上書きを行う』という命令となります。アプリケーションのappファイルの作成にはmacOSを利用し、exeファイルの作成にはWindowsを利用するのがいいでしょう。

※ macOSからWindows向けのビルドを行う際はWineというmacOS上でWindowsアプリケーションを動かすためのプログラム群が必要です。
※ その他パラメータ・詳しい使い方はelectron-packager公式ページの「usage」をご参照ください。

3. パッケージングに成功すると、プラットフォームごとにフォルダに入ったアプリケーションが作成されます。配布するときはこのフォルダーをZIPファイルに圧縮して提供するといいでしょう。

開発TIPS: コマンドはnpm scriptsに書くのがオススメ

コマンドを実行するときにnpx electron ./srcと毎回入力するのは手間なので、npm scriptsを使うことを強くオススメします。npm scriptsはコマンドのショートカットのようなもの。package.jsonファイルのscriptsの項目に次のようにコマンドを書いておきます。

▼package.json

{
  "scripts": {
    "start": "electron ./src",
    "build-macOS": "electron-packager ./src FirstApp --platform=darwin --arch=x64 --overwrite",
    "build-windows": "electron-packager ./src FirstApp --platform=win32 --arch=x64 --overwrite"
  },
  "devDependencies": {
    "electron": "^1.8.2",
    "electron-packager": "^11.0.1"
  },
  "private": true
}

※package.jsonファイル内のnameやlisenceなど不要な情報は消してしまって大丈夫です。

こうすればコマンドでnpm run startと入力するだけでElectronを実行できます。ビルドしたいときはnpm run build-macと入力するだけ。コマンドの引数など長くて入力するのは大変なので、package.jsonに書くのがいいでしょう。npm scriptsの使い方は記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ」に詳しくまとめています。

おまけ – デバッグ方法

Chromiumをベースとしているため、「Chrome Developer Tools」を使用できます。electronコマンドで実行した場合のメニューから[View]→[Toggle Developer Tools]を選択することでDevToolの表示を切り替えられます。

初めて起動した場合、アプリケーションのウィンドウ内部にDeveloper Toolsが表示されて不便なので、右上の切り替えアイコンを長押しして別ウィンドウモードに切り替えておきましょう。また、詳しい使い方は「Chrome DevTools Overview」を確認すると良いでしょう。

まとめ

アプリケーション化まであっけなく実行できたのではないでしょうか。Electronを使用すればちょっとしたアプリケーションならばサクッと作れます。興味がわいた人はさらに利用用途を広げるために、ElectronのAPIを学んでいきましょう。解説は続編記事「テキストエディターを作ってElectronの基礎を学ぼう」へ続きます。

(編集部注*この記事は2015年7月15日に公開された記事を再編集したものです)