Electronを始めてみる-環境構築

5753 ワード
Electron Electron テキストリンク

普段は仕事でリモコンなどのハードウェアを作製してます

ハードウェアチェックやプログラムのブートローダーを、
C#で書いて運用してましたが、
electronという、webベースでシリアル通信などのコントロールも可能な
ネイティブアプリを作ることができるということを知り
興味がてら作成してみることにしました。
やること、やったことのメモがてらに書いてきます

とりあえず環境構築から

　環境

  • macOS 10.13.3
  • node.js v8.9.4 言わずもがなnpmなどの導入
  • electron v1.8.2　electronの基

インストール

  1. node.jsサイトより推奨版(8.9.4)をダウンロード
  2. 下記コマンドで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!"が表示される)

ちょっとずつ今後も進めて行きます

python - summary with code on fileinput module
Python進捗バーの表示