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

参考

関連する記事

  • これだけは抑えておきたい収益性分析の基本これだけは抑えておきたい収益性分析の基本 収益性分析とは、主に損益起算書上の数値から収益獲得力や投資効率性を測定する分析である。企業が継続的発展を遂げるためには利益確保が欠かせないが、企業経営は好調のときもあれば不調のときもあるため、様々な観点から収益または利益の状況を把握する必要がある。 ここでは、収益性分析の代表的な指標をいくつか紹介する。 これらの代表的な指標を活用するに当たっては、業種によってかなり異 […]
  • R 文字列ベクトルで文字列を指定して要素を削除する方法R 文字列ベクトルで文字列を指定して要素を削除する方法 Rの文字列ベクトルで、文字列を指定して要素を削除する方法をお伝えする。 通常、ベクトルの要素を削除する場合は、次のように添字にマイナスを付加して削除する。 > s # 1番目の要素を削除 > s[-1] [1] "猫である。" "名前は" "まだ無い。" > # 1番目から2番目の要素を削除 > s[-1:-2] [1] "名前は" […]
  • R group_byにsummaryを適用する方法R group_byにsummaryを適用する方法 R言語のtidyverseパッケージを用いて、group_by関数によりグループ分けした結果に対してsummary関数を適用する方法についてお伝えいたします。 ここでお伝えする方法は、tidyverseパッケージを用いる方法となりますので、tidyverseパッケージを読み込んでおきます。 > […]
  • R言語 CRAN Task View:RグラフィカルモデルR言語 CRAN Task View:Rグラフィカルモデル CRAN Task View: Graphical Modelsの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: Soren Hojsgaard Contact: sorenh at […]
  • R言語 CRAN Task View:医用画像解析R言語 CRAN Task View:医用画像解析 CRAN Task View: Medical Image Analysisの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: Brandon Whitcher, Jon Clayden, John Muschelli Contact: bwhitcher at […]
Ubuntu16.04でElectronの配布アプリケーションを作成する方法