はじめに
Electronという、ChromiumとNode.jsを使ったWeb技術でデスクトップアプリを作ることができるフレームワークを使います。
最初にやること
Node.jsをインストールする
Node.jsをインストールします。
https://nodejs.org/ja/download/
から、自分のOSを選びます。
詳しくはこちらから。
Node.jsをインストールすることでElectronアプリを作ることができます。
フォルダ作成
アプリを作成するためのフォルダを作成します。
今回は、hello-worldとしました。
$ mkdir hello-world
$ cd hello-world
としてフォルダを指定する。
package.jsonを作成する
$ npm init -y
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
このようなファイルが作成される。
バージョンを変更するにはnpm version *****を使う
Electronをインストールする
$ npm i -D electron
srcフォルダ等作成
srcフォルダを作り、その中に
- index.html
- main.js
- package.json
を作成。
index.htmlはご自由に書いてください。
今回はHello Worldを表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
const { app, Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 1200, height: 675, 'icon': __dirname + 'favicon.ico'})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
'icon': __dirname + 'favicon.ico' でアイコンを指定している。なくても良い。
{
"main": "main.js"
}
main.jsを指定
試しに起動してみる
$ npx electron src
Hello worldが表示されました。
パッケージング
electron-packagerを使ってパッケージングする
electron-packagerのインストール
$ npm i -D electron-packager
それでは、パッケージングしていきます。
windows向けです。
$ npx electron-packager src hello-world --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico
ここでもアイコンを指定しています。
Electronのデザイン
全画面＆タイトル、メニューバーなし
mainWindow = new BrowserWindow({kiosk: true, 'fullscreen': true, 'frame': false});
main.jsのnew BrowserWindowを指定しているところに追加する
展示用などにおすすめ。
Ctrl+Wでアプリがシャットダウンされる。
メニューバーなし
mainWindow.setMenu(null);
new BrowserWindowのあとに追加する。
とてもシンプルで良い。
パッケージングを楽に
"scripts": {
"start": "electron ./src",
"macos": "electron-packager ./src hello-world --platform=darwin --arch=x64 --overwrite --icon=src/favicon.ico",
"windows": "electron-packager ./src hello-world --platform=win32 --arch=x64 --overwrite --icon=src/favicon.ico"
}
と、追加しておきます。
このとき、忘れずに"start"の前に,を追加してください。
$ npm run windows
とするとかんたんにパッケージングできます。
windowsをmacosに変えるとMacOS向けにパッケージングされます。
まとめ
Web技術でアプリを作ることができました。
サクっとアプリが作れるいい時代ですね。
参考