5. パッケージング

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

1. コマンドラインを立ち上げ、以下のコマンドを実行してelectron-packagerをインストールします。

npm install electron-packager -g

※macOSで「npm ERR! Error: EACCES: permission denied」のエラーが発生した場合、管理者権限(sudo)で試してみてください。

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

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

electron-packager src FirstApp --platform=darwin --arch=x64 --overwrite --electron-version=1.4.15

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


electron-packager src FirstApp --platform=win32 --arch=x64 --overwrite --electron-version=1.4.15

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

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

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

FirstApp作成完了

おまけ – デバッグ方法

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

Electronのデバッグ画面

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

まとめ

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

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