⚛️

electron-builder 入門 (Apr, 2021)

11 min read

ソースコードの準備

electron-quick-start からソースコードを取ってきて、それを electron-builder で配布可能な形にパッケージングしていきます。

https://github.com/electron/electron-quick-start

https://www.electron.build/
bash
// quick-start キットを sample という名前のフォルダとしてクローン

$ npx degit electron/electron-quick-start sample
npx: 1個のパッケージを6.907秒でインストールしました。
> cloned electron/electron-quick-start#HEAD to sample

$ cd sample

依存パッケージのインストール

現時点では electron のみが依存パッケージです。

bash
$ npm install

ファイル構成の変更

パッケージングしやすいようにアプリケーションを構成するファイル(index.html, main.js, preload.js, renderer.js)を app という名前のフォルダにまとめます。

bash
$ mkdir app
$ mv index.html main.js preload.js renderer.js app/

ここまでのファイル・フォルダ構成

bash
$ tree -a -I 'node_modules'
.
├── .github
│   └── dependabot.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── app
│   ├── index.html
│   ├── main.js
│   ├── preload.js
│   └── renderer.js
├── package-lock.json
└── package.json

2 directories, 10 files

フォルダ構成にあわせてコードを編集

このままでは npm start で electron が立ち上がらなくなるので、 main.jspackage.json に手を入れます。

app/main.js(10~20)
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
   });

   // and load the index.html of the app.
-  mainWindow.loadFile('index.html');
+  mainWindow.loadFile('app/index.html');

   // Open the DevTools.
   // mainWindow.webContents.openDevTools()
 }
package.json
 {
   "name": "electron-quick-start",
   "version": "1.0.0",
   "description": "A minimal Electron application",
-  "main": "main.js",
+  "main": "app/main.js",
   "scripts": {
     "start": "electron ."
   }

起動テスト

bash
$ npm start

fig01.png

electron-builder のインストール

electronelectron-builderdevDependencies としてインストールされている必要があります。
--save-dev オプションを使います。

bash
$ npm install --save-dev electron-builder

とりあえずパッケージングしてみよう

ここまでで最低限のパッケージング環境が整ったので、さっそくパッケージングしていきましょう。

ビルドスクリプトの作成

electron-builder の設定は package.json に記述することも可能ですが、ここでは後々の取り回しを考えてビルドスクリプトとして設定をおこなっていきます。また、JS で記述することでエディタの補完機能も利用できます。

bash
$ mkdir scripts
$ touch scripts/build.js
scripts/build.js
const { build } = require('electron-builder');

build({
  config: {
    appId: 'com.example.Sample',
    productName: 'Sample',
    files: ['app/**/*'],
  },
});
  • appId: OS 上でこのアプリを特定するために一意な識別子が必要です
  • productName: アプリの名前。指定しないと package.jsonname エントリの値が使われます
  • files: アプリを構成するファイル(パッケージングするファイル)を指定します

参考リンク

https://www.electron.build/configuration/configuration

ビルドしてみる

ビルドスクリプトを Node で実行します。

bash
$ node ./scripts/build.js
  • electron-builder  version=22.10.5 os=10.0.19042
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=12.0.2 appOutDir=dist\win-unpacked
  • Unpacking electron zip  zipPath=undefined
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=dist\Sample Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=dist\Sample Setup 1.0.0.exe.blockmap

dist フォルダ中に win-unpacked フォルダと Sample Setup 1.0.0.exe NSIS インストーラーが作成されました。

2021-04-14-110113.png

macOS (Intel) の場合は、

  • Sample-1.0.0-x64-mac.zip
  • Sample-1.0.0-x64.dmg
  • mac-x64 ディレクトリ

が作成されると思います(その他の YAML ファイル類は省略)。

参考リンク

https://www.electron.build/configuration/dmg

https://www.electron.build/configuration/nsis

カスタムアイコンを設定しよう

現状では Sample.exe には Electron のデフォルトアイコンが設定されています。

bash
• default Electron icon is used  reason=application icon is not set

Sample.exe をダブルクリックで起動しても、タスクバー上では下のように表示されています。

fig03.png

よりアプリらしくするには、独自のアイコンが必要ですね。
Windows では ICO ファイル、macOS では ICNS ファイル が必要となります。

マルチアイコンの ICO ファイル作成には多くのオンライン・サービスが用意されているので、これらを利用しましょう。
ICNS ファイルの作成については以下の記事が参考になります。

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

もしくは拙作ユーティリティを利用してください。

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

ICO / ICNS ファイルの指定

config オブジェクトのトップレベルに win, mac のそれぞれのエントリを作成します。
ここではアイコンファイルは assets ディレクトリに配置することとします。

scripts/build.js
build({
  config: {
    appId: 'com.example.Sample',
    productName: 'Sample',
    files: ['app/**/*'],
    win: {
      icon: 'assets/icon.ico',
    },
    mac: {
      icon: 'assets/icon.icns',
    },
  },
});

再度ビルド

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


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

http://flat-icon-design.com/
bash
$ rm -rf dist && node ./scripts/build.js



macOS での例

ファイルの関連付けを設定しよう

アプリに関連づけるファイルの種類(≈ 拡張子)を設定することで、ファイルのダブルクリックなどによってこのアプリが開かれるようにすることもできます*(※その後のファイルの処理は別途アプリに組み込む必要があります)*。

Windows の場合

Windows の場合、ファイルの関連付けは単純に config.win.fileAssociations エントリへ対応したいファイルの拡張子を連ねていくだけで OK です。

scripts/build.js
    win: {
      icon: 'assets/icon.ico',
      fileAssociations: [
        {
          // 拡張子
          ext: ['ico', 'gif', 'png', 'jpg', 'jpeg', 'webp'],
          // ファイルの種類
          description: 'Image files',
        },
      ],
    },

参考リンク:

https://www.electron.build/generated/platformspecificbuildoptions

macOS の場合

macOS では、mac.extendInfo エントリへ CF*LS* または NS* の接頭辞ではじまるエントリを追加しなければいけません。これらはパッケージング後に Info.plist (バイナリ化済み)へ注入されます。

Info.plist とは、そのアプリについての基本的な初期設定情報が格納されるファイルです。 electron-builder では mac.extendInfo の内容を含んだ Info.plist を自動的にバイナリ化して出力します*(画像は Apple 公式ドキュメントより引用)*。

ちなみに electron-packager では、バイナリ化していない Info.plist、つまり XML ファイルが出力されます。

xcode_infoplist_editor_2x.png

scripts/build.js
    mac: {
      icon: 'assets/icon.icns',
      extendInfo: {
        CFBundleName: 'LeafView',
        CFBundleDisplayName: 'LeafView',
        CFBundleExecutable: 'LeafView',
        CFBundlePackageType: 'APPL',
        CFBundleDocumentTypes: [
          {
            CFBundleTypeName: 'ImageFile',
            CFBundleTypeRole: 'Viewer',
            LSItemContentTypes: [
              'com.google.webp',
              'com.microsoft.bmp',
              'com.microsoft.ico',
              'com.compuserve.gif',
              'public.jpeg',
              'public.png',
            ],
            LSHandlerRank: 'Default',
          },
        ],
      },
    },

参考リンク

https://developer.apple.com/documentation/bundleresources/information_property_list/

https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html#//apple_ref/doc/uid/TP40009259

M1 Mac (arm64) に対応する

Apple Silicon ネイティブなパッケージを作成するには、 NodeJS v15.x と M1 Mac が必要です。

scripts/build.js
    mac: {
      icon: 'assets/icon.icns',
      target: {
        target: 'default',
        arch: ['x64', 'arm64'],
      },
    },

参考リンク

https://github.com/electron-userland/electron-builder/pull/5481#pullrequestreview-553974622

https://www.electron.build/configuration/mac

さらにもう一歩

ここまでで自作アプリを配布可能な形式へパッケージングできた訳ですが、さらに不特定多数の第三者へ配布したり、アプリストアなどへ登録するためにはコード署名が必要です*( macOS の場合はさらに「公証」も)*。

本稿はあくまでも入門編なので、これらのことには触れられませんが以下のような記事が参考になると思います。

https://qiita.com/pochman/items/756a5446bec2ea0f16d8

https://zenn.dev/sprout2000/articles/65165d8055bc56

https://zenn.dev/sprout2000/articles/9c239cb9a8c1a8

Discussion

ログインするとコメントできます