【JS/Electron】Hello Worldをやってみる
こんにちは、しきゆらです。
今回は、ElectronでHello Worldを作って遊びたいと思います。
前回Electronのことを書いてからすでに半年以上経っていますね。
どうしても、環境構築するだけで満足してしまう部分があります・・・。
環境構築が一番楽しいと思うのですがどうでしょうか。
さて、では作っていきます。
Electronの導入
これは、すでに前回の記事で書いているので特に必要ないかと。
前回の記事
合わせて、かんたんにアプリに変換できるものも一緒にいてれおくと良いかと思います。
npm install electron-packager -g
Hello Worldしよう
導入が済んだら、実際に作っていきましょう。
適当にディレクトリを作成しましょう。
hello_electron/ └── src/
「src/」の中にファイルを追加していきます。
package.json
まずはこれ、package.json。
{
"name": "electron-intro",
"version": "0.0.1",
"main": "main.js"
}
Electronアプリの構造を定義するためのものっぽいです。
最低限、アプリ名・バージョン・メインとなるjsファイルを指定する必要があるようですよ。
main.js
画面を作成したり、閉じたときの処理を書きます。
コメントを書いてありますが、そこまで難しくはないかと。
// アプリケーション作成用のモジュールを読み込み
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
// メイン画面
let mainWindow;
function createWindow() {
// メイン画面を作成
mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// メイン画面に表示するURLを指定する
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
}));
// デベロッパーツールの起動
mainWindow.webContents.openDevTools();
// メインウィンドウが閉じたときの処理
mainWindow.on('close', function() {
mainWindow = null;
});
}
// 初期化が完了したときの処理
app.on("ready", createWindow);
// すべてのウィンドウが閉じたときの処理
app.on('window-all-closed', function() {
// macOS以外は、アプリケーションを終了
if (process.platform !== 'darwin') {
app.quit();
}
});
// アクティブになったとき
app.on('activate', function() {
// メインウィンドウが消えている場合は再度作成する
if (mainWindow === null) {
createWindow();
}
});
index.html
ElectronはWebの技術でアプリを作る事ができるものなので、画面はHTMLで作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>初めてのElectronアプリケーションです！</h1>
Nodeのバージョン：
<script type="text/javascript">
document.write(process.versions.node);
</script>
<br>
Electronのバージョン：
<script type="text/javascript">
document.write(process.versions.electron);
</script>
</body>
</html>
ここまでファイルを作ると、ディレクトリは以下のようになっているはず。
hello_electron/ └── src/ ├── package.json ├── index.html └── main.js
実行
では、作ったものを動かしてみます。
cd /path/to/hello_electron # 実行 electron src
とすると、以下のように開くはず。
アプリにしてみる
最初に入れた「electron-packager」を使ってアプリにしていきます。
electron-packager src Hello --platform=darwin --arch=x64 --overwrite --electron-version=1.7.9
これは、「src」ディレクトリのものをHelloという名前のアプリとして作成します。
オプションとして「darwin」「x64」をターゲットとし、更新した時は上書きし、使うElectronのバージョンは「1.7.9」を使いますよー、と言う感じ。
すると、同じディレクトリにアプリが作成されます。
この中にアプリがあります。
かんたんにアプリを作れるので、HTMLとJSがかければ自分用のアプリを作れそうですね。
今回はこのへんで。
おわり