やりたいこと
下のElectronを使ってWindows向けのアプリケーションを作成します。
electronとは
electronはJavaScript/HTML/CSSで作成したWebページから実行ファイルを作成します。
Windows/MAC/Linux向けの実行ファイルが作成できますが、ここではWindows向けの実行ファイルを作成します。
詳細は以下の公式ページ。
プロジェクトの作成
事前準備
Node.jsが必要です。
以下のリンクから環境にあったNode.jsをインストールします。
プロジェクトの作成
任意の作業フォルダを作成して以下のコマンドを実行します。
npm init -yElectronでの実行
Electronのインストール
インストール
コマンドプロンプトを開いて作業フォルダで以下のコマンドを実行します。
npm i electron --save-dev実行するファイルの準備
実行ファイルに変更するファイルを作成したフォルダの下にSrcフォルダを作成して置きます。(例えばViteでバンドルしたdistフォルダの中をまるごと任意のフォルダにコピーします。)フォルダ構成は元の構成を壊さないようにしてください。
今回用意したファイルは以下の2個です。同じフォルダに保存します。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRON TEST</title>
</head>
<body>
<h1>ELECTRON TEST</h1>
<img src="./img.png">
</body>
</html>img.png
エントリーポイントの作成
上記の2個のファイルを作成したフォルダに新規でmain.jsという名前のファイルを作成します。
(index.html以外のファイルを読み込む場合はwin.loadFile(‘file://’ + __dirname + ‘/index.html’)のindex.html部分を編集します)
const { app, BrowserWindow } = require('electron/main')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('file://' + __dirname + '/index.html');
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})loadFileの引数は”index.html”だけでもElectronは実行できますが、パッケージした後に失敗します。
実行
作業フォルダ(Srcフォルダの親フォルダ)で以下のコマンドを実行します。
node_modules/.bin/electron .以下のように作成したHTML+画像が表示されます。
パッケージ化
electron-builderのインストール
作業フォルダで以下のコマンドでelectron-builderをインストールします
npm i electron-builder --save-devPackage.jsonの修正
プロジェクトフォルダにあるPackage.jsonを開きます。
以下の設定を
"main": "index.js",下のように修正します
"main": "src/main.js",electron-builderの実行
以下のコマンドでビルドが行えます。
node_modules\.bin\electron-builder builddistフォルダ下にexeファイルができれば完了です。(dist直下にあるexeはインストーラです)
以下のようなエラーがでた場合、管理者権限がない場合があります。
ビルドのコマンドを実行するアプリ(コマンドプロンプトやVisualStudioCodeなど)を管理者権限で実行してコマンドを実行してください。
ERROR: Cannot create symbolic link : �N���C�A���g�͗v�����ꂽ�������ۗL���Ă��܂����B結果
webアプリケーションをWindowsで動作するexeファイルにすることができました。
ご参考
作成されたファイルサイズは以下の通りです。(チューニングはしていない状態では最小に近いと思います。)
Chromiumを使用しているのでそれなりに大きいです。
| ファイルサイズ(MByte) | |
| インストーラ | 78 |
| 展開後 | 264 |
参考にさせていただいたサイト
コメント