Ubuntu16.04を用いて開発したElectronアプリケーションを配布に適したファイル群で出力する方法をお伝えします。

ここでは、サンプルアプリケーションとして、electron-quick-startを利用させていただき、配布のための環境構築からWindows用アプリケーションとして実行しているところまでをご紹介します。

環境

今回の作業環境を確認しておきます。また、以下の作業はすべてターミナルにて行っております。

Ubuntuのバージョン


$ cat /etc/lsb-release

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial
DISTRIB_DESCRIPTION="Ubuntu 16.04.3 LTS"

Node.jsのバージョン


$ node -v
v8.4.0

npmのバージョン


$ npm -v
5.3.0

wineのインストール

以下でもご説明しますが、electron-packagerを用いてWindows用アプリケーションを作成するためにはwine環境が必要になります。
そのため、事前に次のコマンドでwineをインストールしておきます。


$ sudo apt-get install wine

wineのインストール後、再起動しておきます。

サンプルアプリケーションの準備

サンプルアプリケーションとして、githubからelectron-quick-startを利用させていただきます。


# クイックスタートリポジトリからクローンします
$ git clone https://github.com/electron/electron-quick-start

# カレントディレクトリを移動します
$ cd electron-quick-start

# パッケージをインストールします
$ npm install

> electron@1.6.13 postinstall /home/system-developer/electron-quick-start/node_modules/electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 155 packages in 8.048s


# クイックスタートを実行します
$ npm start

配布のためのパッケージをインストール

WindowsやMac、Linuxに対応する配布アプリケーションを作成するためのパッケージはいくつかありますが、ここではelectron-packagerを使用することにします。
また、インストール先は、グローバルインストールではなく、先ほど作成したelectron-quick-startディレクトリにします。


$ npm install electron-packager --save-dev
+ electron-packager@9.1.0
added 66 packages in 9.784s

Windows用のアプリケーションの作成

electron-packagerを用いてWindows用のアプリケーションを作成するためのコマンドのオプションは、次のようになっています。
コマンドオプションの詳しい内容は、electron-packager/api.md at master · electron-userland/electron-packager · GitHubを参照してください。
例えば、アプリケーションのアイコンを設定できたり、出力ディレクトリを指定できたりします。


electron-packager   --platform= --arch= [optional flags...]

ここでは、Windowsの64bit用で、すでに出力ディレクトリがある場合は上書き、そしてソースコードを記載したJavaScriptを一つのファイルに固めるように設定して、実行します。


$ ./node_modules/electron-packager/cli.js . electron-quick-start --platform=win32 --arch=x64 --overwrite --asar
Packaging app for platform win32 x64 using electron v1.6.13
Wrote new app to /home/system-developer/electron-quick-start/electron-quick-start-win32-x64

今回は、electron-quick-start-win32-x64ディレクトリに出力されますので、Windows環境に移動し、electron-quick-start.exeを実行します。

補足

electron-packagerで、ソースコードを記載したJavaScriptを一つのファイルに固めるオプション–asarを指定した場合と指定しなかった場合のファイル構成を見ておきます。
asarオプションを指定した場合は、次のようになり、アプリケーション本体はapp.asarになっていることが確認できます。

asarオプションを指定しなかった場合は、次のようになり、main.jsなどが簡単に見えるようになっております。

参考

関連する記事

  • Ubuntu OpenCVをインストールする手順Ubuntu OpenCVをインストールする手順 Ubuntu16.04にOpenCV3.3をインストールする手順をお伝えいたします。 OpenCVは、JPEGとPNGの画像だけを扱うように、できるだけ最小の構成を目指します。 そのため、動画に関する設定はできるだけ除いた形でインストールを行います。 環境 今回の作業環境を確認しておきます。また、以下の作業はすべてターミナルにて行っております。 Ubuntuのバージ […]
  • R言語 CRAN Task View:生存時間解析R言語 CRAN Task View:生存時間解析 CRAN Task View: Survival Analysisの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: Arthur Allignol and Aurelien Latouche Contact: arthur.allignol at […]
  • Windows上のMariaDBでサービスの開始・停止を行う方法Windows上のMariaDBでサービスの開始・停止を行う方法 Windows上のMariaDBでサービスの開始・停止を行う方法をお伝えいたします。 一般的なアプリケーションは、立ち上げて何か操作し閉じるというサイクルを持ちます。一方、MariaDBは、他のアプリケーションからアクセスされるまで待機しており、アクセスされる度にアプリケーションへ応答を返します。この間、MariaDBはずっと稼働中となります。そのため、MariaDBは […]
  • R ggplotに回帰直線の式を表示する方法R ggplotに回帰直線の式を表示する方法 R言語のggplotにおいて、グラフに回帰直線の式を表示する方法をお伝えします。 ggplotのグラフに回帰直線の式を表示する方法はいくつかあります。 ここでは最も簡単と思われるggpmiscパッケージを用いて回帰直線の式を表示する方法をお伝えします。 環境 今回の作業環境をsessionInfo()関数で確認しておきます。 > […]
  • Ubuntu apt-getでRがアップデートできない場合の対処法Ubuntu apt-getでRがアップデートできない場合の対処法 apt-getコマンドでRがアップデートできない理由はいくつか考えられる。ここでは、アップデートできない原因別に対処法をお伝えする。 接続できない 「apt-get […]
Ubuntu16.04でElectronの配布アプリケーションを作成する方法