松山事務所の くろもん です。
今回はElectronを用いてWindowsのデスクトップアプリを作成してみました。
Electronとは
公式サイト(https://electronjs.org/)
github(https://github.com/electron/electron)
ChromiumとNode.jsを用いて、デスクトップアプリを作成できるフレームワークです。
開発環境について
Node.js(npm)がインストールされている必要があります。
今回はElectron本体の他に、作成したアプリをWindows用のexeへ変換するためのライブラリを導入して作成しました。
導入時のコマンドは以下の通りです。
|
1
2
|
npm install --save-dev electron
npm install --save-dev electron-builder
|
単純な例
以下のコードが、Electronアプリを起動するための単純なコードです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('ready', function () {
// ブラウザ(Chromium)の起動, 初期画面のロード
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
|
{
"name": "electronSample",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"electron": "^4.1.4",
"electron-builder": "^20.39.0"
}
}
|
これらのファイルを、以下のフォルダ構成にして、
ルートディレクトリ内で “npx electron .” と実行することで、画面が表示されます。
|
1
2
3
4
|
├index.html
├index.js
├node_modules
└package.json
|
実行ファイル(exe)の作成
先ほど表示した画面を、electron-builderを使用して実行ファイルにします。
ただ、方法は単純で、package.jsonを以下の通り編集し、出力されるファイルの情報を設定した上で、 “npx build” と実行するだけです。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"devDependencies": {
"electron": "^4.1.4",
"electron-builder": "^20.39.0"
},
"build":{
"appId": "jp.test.app1",
"win": {
"target": "portable"
}
}
}
|
“dist”というフォルダが作成され、フォルダ内に” .exe”という形式で実行ファイルが作成されます。
|
1
2
3
4
5
6
7
|
├dist
|├electronSample 1.0.0.exe
|└***
├index.html
├index.js
├node_modules
└package.json
|
今後の内容
ローカルのファイルやシェルへのアクセスの実現方法について、まとめている最中です。
また、開発用とアプリ用のpackage.jsonは分けたほうがいいとのことなので、フォルダ構成についても修正するつもりです。