- electronでApp開発をするためのテストコード及び環境構築メモ.
- Node.jsをインストールする.
- Node.js
#ディレクトリを生成し移動(ここに必要なものをinstallしていく)
mkdir electron_app_test
cd electron_app_test
#package.jsonを生成
npm init -y
#electronをinstall(リリースパッケージに含まないので,devDependenciesとして管理する)
npm install --save-dev electron
#Codeをおくディレクトリを生成する
mkdir src
cd src
#package.jsonを生成して,
#エントリーポイントとなるJavaScriptのファイル名を指定する.(指定が間違っていると起動しない)
New-Item package.json
#################->ここから
{
"main": "main.js"
}
#################->ここまで
#"main.jsを生成して,
#エントリーポイント（アプリケーションの実行開始場所）となるjsファイルを作る.
New-Item main.js
#################->ここから
// アプリケーション作成用のモジュールを読み込み
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
// メインウィンドウ
let mainWindow;
function createWindow() {
// メインウィンドウを作成します
mainWindow = new BrowserWindow({width: 800, height: 600});
// メインウィンドウに表示するURLを指定します
// （今回はmain.jsと同じディレクトリのindex.html）
mainWindow.loadFile('index.html');
// デベロッパーツールの起動
mainWindow.webContents.openDevTools();
// メインウィンドウが閉じられたときの処理
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// 初期化が完了した時の処理
app.on('ready', createWindow);
// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
// macOSのとき以外はアプリケーションを終了させます
if (process.platform !== 'darwin') {
app.quit();
}
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', () => {
// メインウィンドウが消えている場合は再度メインウィンドウを作成する
if (mainWindow === null) {
createWindow();
}
});
#################->ここまで
#メインウィンドウとして開くHTMLファイルを作る
New-Item index.html
#################->ここから
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>初めてのElectron</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>
#################->ここまで
#electoronをtest実行
cd .. (electron_app_testに戻る)
npx electron ./src
#electronを実行ファイル化するため,electron-packagerをinstall
cd .. (electron_app_testに戻る)
npm i -D electron-packager
#WindowsOS用の実行ファイルを生成する
npx electron-packager src FirstApp --platform=win32 --arch=x64 --overwrite
electron_app_test-win32-x64というディレクトリが出来て,.exeができる.
- 上記で,electronでApp開発する最低限の環境構築ができる.
- node_modulesは,electronやelectron-packagerなど実行ファイルが全部入ってるので大きい.
- ./srcとpackage.json,package-lock.jsonにnpmパッケージの依存関係が書いてあるので, npm installで取り込める.
- だからこのリポジトリをgit cloneして,npm installすれば,同じ環境が作れる.
- 1から環境構築する方法と,package.jsonから環境構築する方法,2つの方法があることを知っておくこと.
- electoron
- electron-packager