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などが簡単に見えるようになっております。

参考

関連する記事

  • Python 度数分布表から乱数を生成するPython 度数分布表から乱数を生成する Pythonで与えられた度数分布に従う乱数を生成する方法をご紹介する。 さっそくだが、全コードを以下に記す。 import random import matplotlib.pyplot as plt def random_freq_index(freq_list): """ 度数分布表から乱数を生成してインデックス番号を返します […]
  • R knitrできれいな多重クロス集計をPDFで出力する方法R knitrできれいな多重クロス集計をPDFで出力する方法 knitrパッケージのkable関数を使えば、matrixやdata.frameなどの表形式をきれいに出力してくれるが、ftable関数を用いた多重クロス集計の結果は、kable関数を使うことができない。 これは非常に残念なので、他の方法できれいに出力する方法をお伝えする。ちなみにこの方法ではPDF出力のみの対応となるので注意してほしい。 手順を簡単に説明すると、 […]
  • Bioconductor Workflowパッケージ一覧Bioconductor Workflowパッケージ一覧 BioconductorのWorkflowパッケージの一覧をご紹介します。英語での説明文をgoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。パッケージを探す参考にしていただければ幸いです。 パッケージ確認日:2021/10/01 パッケージ数:29 1. rnaseqGene RNA-seq workflow: gene-level […]
  • R qgraphを用いてデータをネットワークとして可視化するR qgraphを用いてデータをネットワークとして可視化する qgraphは、ネットワークとしてデータを視覚化するために使用することができ、加重グラフィカルモデルを視覚化するためのインタフェースを提供しているパッケージです。 リファレンスマニュアルには、関数のサンプルコードのみで出力されたグラフがありません。そこで、qgraphのサンプルコードと合わせてグラフを並べてみました。 qgraph library(qgraph) […]
  • 石川県金沢市周辺のツイッターの利用状況 2014年3月石川県金沢市周辺のツイッターの利用状況 2014年3月 2014年3月の石川県金沢市周辺のツイッターの利用状況を調査した結果を紹介する。利用状況を調査する上で必要となるデータはTwitter […]
Ubuntu16.04でElectronの配布アプリケーションを作成する方法