普段は仕事でリモコンなどのハードウェアを作製してます
ハードウェアチェックやプログラムのブートローダーを、
C#で書いて運用してましたが、
electronという、webベースでシリアル通信などのコントロールも可能な
ネイティブアプリを作ることができるということを知り
興味がてら作成してみることにしました。
やること、やったことのメモがてらに書いてきます
とりあえず環境構築から
# 環境
- macOS 10.13.3
- node.js v8.9.4 言わずもがなnpmなどの導入
- electron v1.8.2 electronの基
インストール
- node.jsサイトより推奨版(8.9.4)をダウンロード
- 下記コマンドでelectronダウンロード
command
npm i -D electron@latest
テスト
command
mkdir helloworld
cd helloworld
npm init -y
touch index.js
##window表示用のスクリプトを作成
index.js
'use strict';
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
//mainWindowを作成 サイズ指定
mainWindow = new BrowserWindow({width: 500, height: 400});
//electronに表示するパスを絶対パスを指定する
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
##テスト用のhtmlを作成
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Electron HelloWorld</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
##起動
command
electron .
これで一応は動作すると思われる (ただ"Hello World!"が表示される)
ちょっとずつ今後も進めて行きます