Chapter 03

Electron アプリのパッケージング

Kei Touge
Kei Touge
2022.02.16に更新

Electron アプリを配布可能な形式にパッケージしよう

このアプリを第三者にも配布するには、このまま myapp フォルダを zip で固めても良いのですが、相手方にも Node.js をインストールしてもらい、そののちに npm run start コマンドを実行してもらう必要があります。

それでは不便なので、配布可能なアプリケーション形式にパッケージしてくれるツールを利用します。

パッケージャのインストール

electron-packager をインストールします。

https://www.npmjs.com/package/electron-packager
bash
$ npm i -D electron-packager

added 88 packages, and audited 176 packages in 5s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

electron-packagerdevDependencies としてインストールされている必要があるので、-D (= --save-dev) オプションを使います。これによって、そのモジュールは package.jsondevDependencies エントリに追記されます。

package.json
 {
   "devDependencies": {
     "electron": "^13.1.2",
+    "electron-packager": "^15.2.0"
   }
 }

ビルドスクリプトの登録

NPM スクリプト へパッケージングするスクリプトを追加しましょう。

package.json
 {
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "build": "electron-packager ."
   }
 }

electron-packager の第 1 引数には、パッケージング対象のフォルダを指定します。ここではカレントディレクトリである . ですね。

パッケージングの実行

NPM スクリプト は、 npm run スクリプト名 で実行できましたね。さっそく実行してみましょう。

bash
$ npm run build

> myapp@1.0.0 build
> electron-packager .

Packaging app for platform win32 x64 using electron v13.1.2
Wrote new app to C:\Users\zenn\myapp\myapp-win32-x64

Windows10 の場合:

プロジェクトフォルダ内に myapp-win32-x64 というフォルダが作られました。この中の myapp.exe をダブルクリックすれば、Node.js がインストールされていない PC でもアプリを起動できます。

fig06
Windows10 の場合

アプリを配布するには、この myapp-win32-x64 フォルダを zip で固めればいいでしょう。

macOS の場合:

プロジェクトフォルダ内に myapp-darwin-x64 というフォルダが作られました。この中の myapp.app をダブルクリックすれば、Node.js がインストールされていない環境でもアプリを起動できます。

fig07
macOS の場合

アプリを配布するには、この myapp.app を相手に渡すだけです。

アプリをカスタマイズしてみよう

パッケージしたアプリの実行ファイルの名前が myapp.exe または myapp.app のままであることに気が付きましたか? さらにアプリのアイコンもデフォルトのままです。

fig06
現在のアプリの名前とアイコン(Windows)

このアプリの名前は マイアプリ であるはずです。また、あなた独自のアプリであると認識してもらうためにもカスタムアイコンが必要ですね。

実行ファイル(アプリ)の名前を変更する

アプリ名変更のもっとも簡単な方法は、package.jsonname エントリを書き換えることです。

しかし pacakge.json の仕様により、name エントリの値を日本語やキャメルケースとすることは非推奨となっています。

そこで productName エントリを追加します。

package.json
 {
   "name": "myapp",
+  "productName": "マイアプリ"
 }

electron-packager は、この productName を検知して マイアプリ.exe を作成してくれます。

パッケージング再び

さっそく、もう一度パッケージングしてみましょう。

bash
$ npm run build

アプリの名前が マイアプリ へと変わりました。

fig08
Windows10 の場合

アプリのアイコンを変更する

では、アイコンも独自のものへ変更しましょう。

アイコンファイルの用意

Electron アプリでは、アプリアイコンとして Windows では ICO 形式の画像、macOS では ICNS 形式の画像が必要となります。

ICO ファイルについては、マルチサイズの ICO を作成する Web サービスがたくさんありますので、これらの中から気に入ったものを利用してください。

ICNS ファイルの作成については、以下の記事が参考になります。

https://wakabamac.hatenablog.com/entry/2017/04/02/034254

もしくは拙作の ICO / ICNS ジェネレータを利用してください。

https://github.com/sprout2000/elephicon#readme

NPM スクリプトのアップデート

アイコンファイルの準備ができたら、pacakge.jsonbuild スクリプトを更新しましょう。

package.json
   "scripts": {
     "start": "electron .",
-    "build": "electron-packager ."
+    "build": "electron-packager . --icon=app.ico --overwrite"
   },
  • --icon: アイコンの場所を指定します。
  • --overwrite: すでに同名のフォルダが存在していたら上書きします。

三たびパッケージング

この本では、FLAT ICON DESIGN さんから以下のアイコンを借用しました。


ペンギンのアイコン素材 (FLAT ICON DESIGN)

http://flat-icon-design.com/
bash
$ npm run build

> myapp@1.0.0 build
> electron-packager . --icon=app.icns --overwrite

Packaging app for platform darwin x64 using electron v13.1.2
Wrote new app to /Users/zenn/myapp/マイアプリ-darwin-x64



macOS での例