Electron   Build

ホーム

Build

electron-builder を使って　Electron アプリケーションをビルドする方法を説明しています。 アプリケーションをビルドすると、ダブルクリックで起動する、 アイコンの付いた実行ファイルが作れます。

Linux については、Ubuntu、Fedora、CentOS、Mint で正常動作しますが、 Debian では動作しません。

electron-builder のインストール

前章で electron-builder をインストールしていなかった場合は、 コマンドプロンプトもしくはターミナルを起動して、Hello ディレクトリに移動して、 次のようにコマンドします。必ず Hello ディレクトに移動してから行ってください。

npm i -D electron-builder

アイコンの準備

PNG形式のアイコンを自作するか、 次のサイトなどから PNG 形式のアイコンをダウンロードします。 大きさは 512px などの一番大きなものが良いでしょう。

フリーアイコンSVG、PNG、ICO、ICNS

自作した、もしくはダウンロードした PNG ファイルを Hello ディレクトリに入れます。

Electron は、PNG 形式のアイコンを、そ れぞれの OS に適した形式に自動的に変換してくれます。

package.json の編集

package.json を次のように変更します。

package.json

// 変更前
{
  "name": "Hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
    "scripts": {
	"start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.1.4",
    "electron-builder": "^22.11.7"
  }
}

// 変更後
{
  "name": "Hello",
  "version": "1.0.0",
  "description": "Hello",
  "main": "index.js",
    "scripts": {
	"start": "electron ."
  },
  "keywords": [],
  "author": "viva Cocoa",
  "build": {
      "win": {
          "target": "nsis",
          "icon": "clover.png"
      },
      "mac": {
          "target": "dmg",
          "icon": "clover.png"
      },
      "linux": {
          "target": "AppImage",
          "icon": "clover.png"
      }
  },
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.1.4",
    "electron-builder": "^22.11.7"
  }
}
    

コード説明

1. description と author に何か記述しなければ、ビルド時にエラーになります。
2. build 項目はどこに記述しても正常に機能しますが、 一応 author 項目の次に記述することになっているみたいです。
3. Windows と macOS と Linux の build 項目を記述しましたが、 次のように必要なプラットフォーム (OS) だけでも大丈夫です。

   
   ・・・
    "author": "viva Cocoa",
    "build": {
   	"win": {
   	    "target": "nsis",
   	    "icon": "clover.png"
   	}
    },
     "license": "ISC",
     ・・・
       

4. それぞれの target は省略することもできますが、省略するとサポートされている、 いろいろなインストーラが作成されてしまいます。
5. icon のところは、あなたが PNG ファイルにつけた名前にします。 icon 項目を省略するとエラーになるみたいです。

ビルド

コマンドプロンプトもしくはターミナルを起動して、 それぞれの OS 上で次のようにコマンドします。

// Windows 32bit の場合
npx electron-builder --win --ia32

// Windows 64bit の場合
npx electron-builder --win --x64

// macOS の場合
npx electron-builder --mac --x64

// Linux の場合
npx electron-builder --linux --x64

// はじめのコマンドは npm ではなく、npx です。注意してください。
// なお、macOS の場合、次のようにコマンドして、一度にすべてのプラットフォームのインストーラを作成することもできます。
npx electron-builder -wml
    

インストール

Windows の場合

作成された dist ディレクトリの中の Hello Setup 1.0.0.exe をダブルクリックすると インストーラが起動します。

このインストーラでインストールした Hello アプリケーションは、 コントロールパネルのプログラムのアンインストールで、 安全にアンインストールすることもできます。

dist ディレクトの中の win-ia32-unpacked もしくは win-x64-unpacked の中の Hello.exe をダブルクリックしても Hello アプリケーションは起動しますが、 この実行ファイルを他の場所へ移動させた場合は、DLL エラーで起動できません。

macOS の場合

作成された dist ディレクトリの Hello-1.0.0.dmg をダブルクリックして、 インストーラを起動します。インストール方法は通常どおりです。

また、dist ディレクトリの中の mac ディレクトリの中に作成された実行ファイルをそのまま使うこともできます。

この実行ファイルは、Windows の場合と違って、どこへ移動させても正常に動作します。

Linux の場合

Linux の場合は、ビルドし他だけではアプリケーションにアイコンは付きません。 アイコンを付けるには別の作業が必要になります。ただし、package.json にアイコンを指定しておかないとビルド時にエラーになります。

作成された dist ディレクトの Hello-1.0.0.AppImage はどこへ移動させても起動できます。ただし名前を変更すると起動できなくなります。

dist ディレクトリの中の linux-unpacked の中の hello 実行ファイルは ダブルクリックしても起動しません。ターミナルで ./hello とコマンドすると起動できます。

Linux でアプリケーションにアイコンを付ける方法

次の場所にHello-1.0.0.AppImage とアイコンファイルを移動もしくはコピーします。

/home/ユーザー名/.local/share/applications

applications ディレクトリに次の hello.desktop ファイルを作成します。

hello.desktop

[Desktop Entry]
Type=Application
Version=1.0
Name=Hello
Exec=/home/ユーザー名/.local/share/applications/Hello-1.0.0.AppImage
Icon=/home/ユーザー名/.local/share/applications/clover.png
Comment=I am Hello
Categories=
    

コード説明

1. Version は、Hello-1.0.0.AppImage のバージョンではなく、1.0 としておきます。 もしくは記述しなくても大丈夫です。
2. Comment は、Name と同じ文字列にすることはできません。
3. Categories を指定しない場合は、「その他」に分類されます。
4. 次のコマンドで hello.desktop に間違いがないか確認できます。
   desktop-file-validate hello.desktop
   何も表示されなければエラーはありません。
5. hello.desktop は、すぐに有効になる Linux もあれば、 再ログイン後に有効になる Linux もあります。
6. アクティビティなどで検索すると Hello アプリケーションがアイコン付きで表示されます。

システム全体に登録する方法

上記の方法は、ユーザ専用に Hello アプリケーションを登録する方法です。 システム全体 (全ユーザが使えるよう) に登録する場合は次のようにします。 ユーザ専用とシステム全体の両方がある場合は、ユーザ専用が優先されます。

1. Hello-1.0.0.AppImage は
   /usr/bin
   にコピーするか移動します。
2. アイコンファイルは
   /usr/share/icons/hicolor/scalable/apps
   にコピーするか移動します。
3. hello.desktop は
   /usr/share/applications
   に作成します。

そして、hello.desktop は、次のように記述します。

hello.desktop

[Desktop Entry]
Type=Application
Version=1.0
Name=Hello
Exec=Hello-1.0.0.AppImage
Icon=clover.png
Comment=I am Hello
Categories=
    

/usr/bin と /usr/share/icons/hicolor/scalable/apps には、システムによってパスが通っていますので、ファイル名だけで OK です。

ホーム   目次