Electronアプリのビルドのやり方

February 2, 2021

Electron アプリのビルドのやり方

前回は、Electron アプリを作成する「流れ」について解説しました。開発用の PC 上で、デスクトップアプリを動かすところまでをカバーしています。この記事では、実際に配布するパッケージをどのように作るかを解説していきます。

Electron アプリは複数のプラットフォームで実行可能

Electron アプリの最大の魅力は２つです：

Windows/Mac/Linux で共通のソースコードで対応可能
Web 技術（Javascript/HTML）で開発可能

複数のプラットフォームで実行可能というのは事実ですが、実は制限もあります。この記事ではその辺を含めて配布パッケージを生成する方法を解説していきます。

配布パッケージ生成のモジュール

Electron アプリの配布パッケージを生成するためのモジュールを使って各プラットフォームの配布パッケージを作ります。最初にやる事はこのパッケージのインストールです。

$ npm install electron-builder --save-dev

でインストールができます。実際はアプリのアイコンを指定したりなど細かい事がありますが、今回は標準設定のアイコンを使う事にして、各プラットフォームの配布イメージを作る方法を中心にお届けします。

配布パッケージ作成のツールのインストールが済んだら、作成のためのスクリプトの設定を行います。「package.json」に追記します。例として以下のような記述を追加します。

"scripts": {
   "start": "npm run build && electron .",
   "build": "tsc",
   "create": "electron-builder",
   "win": "electron-builder --win --x64",
   "mac": "electron-builder --mac --x64",
   "linux": "electron-builder --linux --x64"
},
"build": {
   "extends": null,
   "files": [
     "build/**/*",
     "*.js"
   ],
   "directories": {
     "output": "dist"
   },
   "mac": {
     "target": [
       "dmg"
     ]
   },
   "win": {
     "target": [
       "portable",
       "nsis"
     ]
   },
   "linux": {
     "target": [
       "AppImage",
       "deb"
     ]
   },
   "nsis": {
     "oneClick": false,
     "allowToChangeInstallationDirectory": true
   }
 },

開発用の PC と同じプラットフォーム向け

開発用の PC と同じプラットフォーム向けの配布パッケージを作るには、「create」のスクリプトを使います。実行は以下のように行います。

$ npm run create

これで、自動的に実行中のシステムのプラットフォームを検出して配布用のパッケージを作ってくれます。

プラットフォームを指定して作成

各プラットフォーム毎に作成する配布パッケージを作成できます。ここでは、「build」の下に「win」「mac」「linux」のラベルを付けておいて、スクリプトでラベルを指定すると指定されたプラットフォームの配布パッケージを作成する仕組みになっています。同じ OS プラットフォームでも配布の形式は複数あって、その中から選択して作る仕組みになっています。作成可能な配布パッケージの形式は Web サイトにビルドのドキュメントがあります。

例えば、Windows ではインストールして利用するタイプの配布パッケージ（nsis）や、インストールなしでクリックすると実行できる配布パッケージ（portable）を上の例では作成する様になっています。

Linux は Ubuntu などで利用される「.deb」や RedHat などで利用されている「.rpm」他様々な形式がサポートされています。「.deb」のパッケージを作成するには、「package.json」で「author」を記述して、その下に「email(auther.email)」を定義しておかないとエラーになります。など、パッケージによっては、配布パッケージを生成するのに他の情報が必須である場合があるなど、制限事項もあります。

Mac は特別！

一番大きな制限事項は MacOS 用の配布パッケージです。実は、これは Mac を使わないとエラーになります。これは、配布パッケージには「サイン」が必要になりますが、このサインは Mac でないとできないので、Windows や Linux 上で MacOS 用の配布パッケージを作ろうとするとエラーになります。

従って、全てのプラットフォームの配布パッケージを作る場合は必ず Mac が必要になります。 Windows と Linuxj は Winodos と Linux の両方の配布パッケージは作れますが、Mac 要だけは作る事ができません。これは、ちょっと残念ですが、MacOS アプリの制限なのでどうする事もできない様です。iOS 用のアプリも基本的に Mac が必要なのと似ています。

配布パッケージの出力フォルダ

これは、「package.json」で指定しています。上に挙げた例では、「dist」というフォルダに作成されたパッケージが作られます。

あとは、コマンド（スクリプト）を実行するだけです。

$ npm run mac
$ npm run win
$ npm run linux

で各プラットフォームの配布パッケージが作れます。

これだけです、簡単ですね！

Java との違いは？

Java のアプリケーションもプラットフォームを選ばずに実行できます。ここで、Java アプリと Electron アプリの違いを簡単に説明して起きます。

Java は実行環境が必要

Java は作成する配布パッケージはどのプラットフォームでも同じです。つまり、一つの配布パッケージを作れば実行できる事になります。（インストーラが関係する場合は少し事情が違います）

しかし、Java のアプリを実行するには、JVM(Java Virtual Machine)という Java の実行環境が必要です。一旦 Java の実行環境が設定されてしまえば、あとは、問題ないのですが、Java の実行環境のバージョンが合わないとアプリが動かない事があります。

Electron アプリはネイティブ

Electron アプリは各プラットフォーム専用の配布パッケージが作成されます。つまり、実行に必要なものは配布パッケージに全て含まれている事になります。従って、利用者の PC の設定に依存する部分が少なくなります。また、Java のアプリの場合は、Java バイトコードという形で配布されるので、これを各プラットフォームように変換する手間が必要です（これが実行環境がやっている事です）。したがって、ネイティブのコードに比べると若干性能が落ちる場合が多くなります。

個別に配布パッケージを作るのは若干面倒ですが、利用者からしてみると、自分の PC 用に作られている分設定も簡単でトラブルが少なくて済むという利点があります。

開発者のメリット

Electron のアプリは開発者にも大きなメリットがあります。

Web アプリや Web サービスをデスクトップのアプリに作り替えるのは比較的簡単にできます。特に最初からデスクトップでの利用を考えて作られている場合には、ほぼ問題なくデスクトップアプリに変換する事ができます。

さらに、学習コストが低くて済むのは最大の魅力です。基本的に、HTML と Javascript だけで開発が可能です。新たにプログラミング言語を勉強しなくても、Javascript の基本がわかれば簡単に各プラットフォームのデスクトップアプリが一度にできてしまうのはとても便利です。これは、VSCODE などの例を見れば明らかです。

同じソースコードなので、VSCODE は OS が変わってもほぼ同じ環境での開発が可能です。

まとめ

Electro のフレームワークを使ってデスクトップアプリを作ると、簡単に Windows/Mac/Linux をサポートできるだけではなく、開発者は Web 開発の延長で開発が可能になります。

設定も簡単で、GUI も HTML ベースで作る事ができるので、新しいツールや言語の勉強をなしで本格的なアプリが短期間で開発可能になります。

実際の設定や開発のステップも簡単で初心者でも簡単に習得できるのは大きな魅力です。

次回は、Vue を使った Electron アプリを作る方法を紹介していきます。お楽しみに！

Firebaseの技術情報サイト

Firebase活用の為の技術情報サイトです

Electronアプリのビルドのやり方