Electronのアプリのパッケージ

ElectronでGUIアプリを開発したら、コマンドを打たなくても、アイコンをクリックするだけでアプリを実行できるようにパッケージ化して配布できるようにします。

Electronアプリのパッケージ化は公式ではElectron Forgeを推奨していますが、挙動を細かく見ることができるelectron-builderを利用することにします。

Getting Started | Electron Forge

electron-builder

electron-builderの挙動を見るために、Electronを試してみようで作成したウィンドウに文字列を表示するだけのアプリをパッケージ化します。

今回の話はプロジェクト名をmy-electron-appにして話を進めます。

はじめにElectronアプリのディレクトリ構造を確認しておきます。

/home/******(ユーザ名が入る)/workspace/my-electron-app/

.
├── index.html
├── main.js
├── node_modules
├── package.json
└── package-lock.json

端末を開き、下記のコマンドを実行して、electron-builderをインストールします。

$ npm install -D electron-builder

インストールが終わりましたら、標準設定でElectronアプリをパッケージ化してみます。

$ cd ~/workspace/my-electron-app
$ npx electron-builder build --linux

※Windows用の場合はオプションを--windowsにし、Macの場合は--macを付与します

数分待つと、

.
├── dist
│  ├── builder-debug.yml
│  ├── builder-effective-config.yaml
│  ├── electron_1.0.0_amd64.snap
│  ├── electron-1.0.0.AppImage
│  └── linux-unpacked
├── index.html
├── main.js
├── node_modules
├── package.json
└── package-lock.json

distディレクトリが生成され、その中にAppImage形式のファイルが生成されています。

AppImage形式のファイルを起動してみます。

下記のコマンドを実行してみます。

$ sudo apt install fuse

$ cd ~/workspace/my-electron-app/dist
$ sudo chmod a+x electron-1.0.0.AppImage
$ ./electron-1.0.0.AppImage

開発中にコマンドから実行していたウィンドウと同様のウィンドウが起動しました。

ビルドする際にAppImage形式のファイルのみ生成にしたい場合は、package.jsonを書き換えます。

/home/******(ユーザ名が入る)/workspace/my-electron-app/package.json

{
  "name": "electron",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "build": {
    "linux": {
      "target":[
        {
          "target": "AppImage"
        }
      ]
    }
  },
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^29.3.0",
    "electron-builder": "^24.13.3"
  }
}

※今回はLinuxの時のみですが、WindowsやMac用の記述も可能です。

Command Line Interface (CLI) - electron-builder#Target

誰でもアプリを使用できるようにするためにはSnapに登録する必要がありますが、今回はまだ触れないことにします。

追記

クロームブックにマインクラフトパイエディションを入れて遊ぶにAppImage形式のファイルをランチャーにアイコンを設置して、アイコンをクリックすることでアプリを起動する方法が記載されています。

Electronのアプリのパッケージ

About