LoginSignup
1
1

More than 5 years have passed since last update.

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

Posted at

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

ハードウェアチェックやプログラムのブートローダーを、
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!"が表示される)

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1