[Electron] 環境構築、サンプルアプリの実行、パッケージ作成

Electronとは？

Electronとは、GitHubが開発したChromiumとNode.jsを使ったHTML, CSS, JavaScriptでWindows, macOS, Linux向けのクロスプラットフォームデスクトップアプリ開発するフレームワーク。

準備

Node.jsのインストール

1. Node.jsからインストーラーをダウンロードする。
2. インストーラーを実行してNode.jsとnpmをインストールする。
3. PATHが通ってなければ、PATHを通す。

$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

サンプルアプリのビルドと実行

Electron Quick Start, Electron API Demos appなどのサンプルアプリを動かすまでの手順です。

Electron Quick Start (Hello World)

Hello World!を表示するだけのサンプルアプリ

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install
$ npm start

アプリケーションパッケージ作成

Electron Packagerのインストール

アプリをパッケージ化する(Windowsであれば*.exe, macOSであれば*.appにする)にはElectron Packagerをインストールする。

$ sudo npm -g install electron-packager

/usr/local/bin/electron-packager -> /usr/local/lib/node_modules/electron-packager/cli.js
+ electron-packager@11.1.0
added 229 packages in 14.021s

パッケージ作成

Electron Packagerのコマンドは以下の通り。

$ electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

パラメータ名	値
platform	all, darwin, linux, mas, win32
arch	all, ia32, x64, armv7l, arm64, mips64el

macOSの64bitで作成するのであれば、以下を実行する。

$ electron-packager ./ SampleApp --pratform=darwin --arch=x64