Chapter 03

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

Kei Touge
Kei Touge
2021.09.18に更新

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

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

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

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

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"
   }
 }

この他にも electron-builder というさらに高機能なパッケージャが存在しますが、この本では electron-builder については触れません。

https://qiita.com/sprout2000/items/b7a5bb2ec16e3df434b2

ビルドスクリプトの登録

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 (もしくは app )を第三者の PC で起動しようとすると安全ではない旨の警告が表示されます。
この警告を非表示にするには、コードサイニング証明書によるアプリへの電子署名が必要ですが、この本ではコードサイニングについては触れません。

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

パッケージしたアプリの実行ファイルの名前が 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: すでに同名のフォルダが存在していたら上書きします。

三たびパッケージング

この本では、ICOON MONO のフリー素材を利用しました。

https://icooon-mono.com/
bash
$ npm run build

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

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

fig09