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

参考

関連する記事

  • SlideShareで公開されているR言語関係のまとめSlideShareで公開されているR言語関係のまとめ SlideShareで公開されているR言語関係の資料をまとめてみたのでご紹介する。全てを網羅しているわけではないが、あなたのお役に立てれば幸いだ。 Rによる医療統計2015 第1部 医療統計の基礎知識 前編 2015-12-18 / 70 slides Rによる医療統計2015 第1部 後半 2015-12-18 / 57 […]
  • R言語 CRANパッケージ一覧R言語 CRANパッケージ一覧 CRANで公開されているR言語のパッケージの一覧をご紹介します。英語でのパッケージの短い説明文はBing翻訳またはGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。何かのお役に立てれば幸いです。 パッケージ確認日:2021/07/01 パッケージ数:17783 また、パッケージをお探しの方は「R言語 CRAN Task […]
  • アンケートの自由記述からニーズを抽出する方法アンケートの自由記述からニーズを抽出する方法 アンケートは様々な場面で有効活用されていると思うが、特に、「年齢」などの数量回答や、「男性・女性」、「満足度の5段階評価」などの単一回答、「購入動機を3つまで回答してください」などの複数回答は、集計や分析がしやすいため、重点的に活用していることだろう。 回答者の立場で考えると、数量回答・単一回答・複数回答は、設問者からの問いかけに対し、返答があらかじめ用意されていること […]
  • Ubuntu14.04でPython3に対応したmatplotlibを使用するための手順Ubuntu14.04でPython3に対応したmatplotlibを使用するための手順 Ubuntu14.04でPython3に対応したmatplotlibを使用するための手順をご紹介する。 1. […]
  • さくらVPSのUbuntuでWordPressをHTTPからHTTPSへ移行する手順さくらVPSのUbuntuでWordPressをHTTPからHTTPSへ移行する手順 当サイトをhttpsに移行した手順をお伝えいたします。 当サイトはさくらVPS上のUbuntu 14.04LTSでWordPressを構築して運用しております。そこで、SSLサーバ証明書はさくらインターネットのサービスであるラピッドSSLを使用することにしました。このサービスを選んだ理由は次になります。 価格が安い […]
Ubuntu16.04でElectronの配布アプリケーションを作成する方法