Edited at

Electronでアプリビルドまでのフロー

久しぶりにWindows向けの簡単なデスクトップアプリ開発する必要が発生したのですが、日常Mac環境の中、今更Windows環境でVisual Studio入れてFormアプリを書くのもなんなのでElectronで書こうと思った際のメモ。


やりたいこと

まあ、HTMLとかCSSとかJSは理解してるつもりなので、HelloWorldアプリをMac用, Win用の単体アプリとしてビルドするまでの流れを確認。

完成版は下記のような感じ。


前提

MacでWindows向けのデスクトップアプリを開発したい。


準備


作業スペースの確保

electronはpackage.jsonが無いと怒られる系のやつ。なので、npm initしてpackage.jsonを作っておく。

mkdir myApp

cd myApp
npm init -y

何も変えなくてもいいのですが、electronではエンドポイントをmain.jsとする文化のようなので変更します。


script等は環境に合わせてお好みで(何も変更しなくても良い)。



package.json

{

+ "name": "myApp",
"version": "1.0.0",
"description": "",
+ "main": "main.js",
"scripts": {
+ "start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC"
}


electronのインストール

globalでもいいのですが、ものすごい頻度でバージョンアップされるのでとりあえずローカルにインストール。

作業フォルダにて以下を実行。

npm i -D electron


-Dは--save-devと同意。



必要なファイルの生成

main.jsがエンドポイントとなり、そこからindex.htmlを呼び出すような感じにするので、2つのファイルを先に作っておきます。

touch main.js index.html


実装


main.js

実装内容はElectronのQuickStartにあるやつをベースに少し修正(ほぼまんまですが)。

Macだと少し余計な記述が必要らしい。


main.js

const { app, BrowserWindow } = require('electron')

let win

function createWindow() {

//ウインドウの作成
win = new BrowserWindow({ width: 400, height: 400 })

//ウインドウに表示する内容
win.loadFile('index.html')

//デバッグ画面表示
// win.webContents.openDevTools()

//このウインドウが閉じられたときの処理
win.on('closed', () => {
win = null
})
}

//アプリが初期化されたとき(起動されたとき)
app.on('ready',()=>{
createWindow();
})

//全ウインドウが閉じられたとき
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

//アクティブになったとき(MacだとDockがクリックされたとき)
app.on('activate', () => {
if (win === null) {
createWindow()
}
})



index.html

実際のアプリとなるファイル。


index.html

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>

<body>
<h1>Hello World!</h1>
We are using node
<script>document.write(process.versions.node)</script>,
Chrome
<script>document.write(process.versions.chrome)</script>,
and Electron
<script>document.write(process.versions.electron)</script>.
</body>

</html>



実行(動作確認)

基本electron .で実行可能。

npx electron .


npxはグローバルにインストールしなくても実行するためのコマンド。



パッケージング

単体アプリとしてMac、Winで実行できるようにします。


必要ツールのインストール

パッケージングはelectron-pakagerを利用すると簡単なのでインストールします。

npm i -D electron-packager

なお、Mac環境でWindows向けの実行アプリ(exe)をビルドするには、Wineツール群が必要なので入れます。

brew cask install xquartz

brew install wine
brew install winetricks


xquartzは途中でパスワード聞いてきます。wineはwine-monoのインストールを聞いてきます。



パッケージング実行

npx electron-packager . myapp --platform=darwin,win32 --arch=x64 --overwrite


win32とかいらなければ外します。x86用には--arch=ia32とするようです。


パッケージングすることで、


  • myapp-darwin-x64

  • myapp-win32-x64

というフォルダが作成され、それぞれMac用、Windows用の実行ファイルが出力されます。


myappのところはアプリ名依存



ハマったメモ

パッケージに開発での変更内容が反映されずに悩んでましたが、前のバージョンのアプリが起動したままになっているのが原因でした。

前の実行プロセスが残っていないかチェックしましょう。


electron-builderによるビルド

electron-builderを使うとインストーラー形式で出力したり、アイコン設定等ができるみたい。

下記は最低限度。

package.jsonに記述することもできるが、独立したjsファイルにすることもできるみたい。

Windows用に下記のように書いてみた。


zipした状態で、x64とia32(x86)用に出力する。targetをnsisとかにするとinstaller形式となる。


標準ではdistフォルダが作成され、そこの出力されるよう。gitつかうなら.gitignoreにdist/としたほうがよいかも。


build-win

const builder = require('electron-builder');

builder.build({
platform: 'win',
config: {
'appId': 'local.test.app1',
'win':{
'target': {
'target': 'zip',
'arch': [
'x64',
'ia32',
]
}
}
}
});



appIdは必要に応じて変更。


Mac用。targetをdmgとかにもできる。


build-mac

const builder = require('electron-builder');

builder.build({
platform: 'mac',
config: {
'appId': 'appId': 'local.test.app1',,
'mac':{
'target': 'zip',
}
}
});


ビルドの実行。

node build-win

node build-mac