Blogブログ

エンジニアの信尾海翔です。
第十三回目のブログでは、Electronについてまとめたいと思います。
今回の内容はElectronのelectron-builderについてです。

electron-builderとは

electron-builderはElectronで作成したアプリケーションをmacOS、Windows、Linuxなどに配布可能なパッケージ化することができます。

Electronで作成したアプリケーションをパッケージ化

今回は実際にElectronで作成したアプリケーションをパッケージ化してwidnows環境で動作させてみたいと思います。
適当にElectronで作成したアプリケーションを用意（今回は「Hello, world!」を表示させるアプリケーション）
また今回はアイコンの設定も行うため、フォルダ内にicon.pngを追加しています（猫のイラスト）

electron-builderをインストール

npm install electron-builder —save-dev

package.jsonのnpm-scriptsに以下を追加
※今回はwindowsでの動作を想定しているのでoptionで指定しています。

    "build-win": "electron-builder --win --x64"

package.jsonにbuildを追加、build内にビルド設定情報を追加

  "build": {
    "appId": "electron.sample.app",
    "productName": "サンプル",
    "icon": "icon.png",
    "files": [
      "index.html",
      "index.js",
      "package.json",
      "package-lock.json"
    ]
  },

appIdにはアプリケーションID、iconにはアプリケーションのアイコンを指定しています（今回は猫のイラストを指定）
productNameにはアプリケーションの日本語名、デフォルトではpackage.jsonのnameが設定されます。
filesにはパッケージ化するファイルを指定しています。

electron-builderを実行

npm run build-win

フォルダ内にdistフォルダが生成されます。
dist/win-unpackedにあるproductName.exeを起動すると作成したアプリケーションが立ち上がります、またはdist内のproductName Setup 1.0.0.exeで、インストーラーが起動し、作成したアプリケーションのインストールが始まります。

余談

Electronで作成した音楽プレーヤーアプリをパッケージ化する際に、electron-builderを使用しました、パッケージ化、アプリアイコンの設定まで行うと、自分でデスクトップアプリケーションを作った感が強くなんだかワクワクしました。
少し前まではElectronのパッケージ化はelectron-packagerなどが使われていたようですが、現在はelectron-builderを使うのが主流のようです。