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

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とかいらなければ外します。

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

myapp-darwin-x64
myapp-win32-x64

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

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

ハマったメモ

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

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

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫