WindowsでElectronの開発環境を整える

Electronとは？

Node.js+HTML+CSSでデスクトップアプリを作る・・・らしい
一番気になるのは、これ一本でWindows,Mac,Linuxのアプリを作れるらしいということ
今回はHello worldまで

準備

Node.jsのインストールは以前の記事の通り

renga.hatenadiary.com

Electronのインストール

上記記事のとおりNode.jsをインストールしてあれば、npmもインストールしてあるはず
npmでElectronをインストールする

コマンドプロンプトから以下のコマンドを打ち込む

npm -g install electron-prebuilt

f:id:goods-tmu:20160715220840p:plain

作業フォルダの作成

適当に作業フォルダを作り、そこで以下のコマンドを打ち込む

npm init -y

f:id:goods-tmu:20160715221314p:plain

すると「package.json」というファイルができているので内容を以下のように変更

package.jdon

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

作業フォルダ内に「main.js」と「index.html」を新規作成し、以下のようにする

main.js

"use strict";

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示。ウィンドウの幅、高さを指定できる
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

作業フォルダの一階層上で以下のコマンドを打ちこむ

electron sample/

f:id:goods-tmu:20160715230605p:plain

すると以下のようにアプリが立ち上がる！
f:id:goods-tmu:20160715230629p:plain

main.jsのapp.on内に以下の処理を加えることでデバッグ情報を出しながら実行できるようになる

  // デバッグツールを起動（開発中のみ必要な機能）
  mainWindow.webContents.openDevTools();

"use strict";

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示。ウィンドウの幅、高さを指定できる
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // デバッグツールを起動（開発中のみ必要な機能）
  mainWindow.webContents.openDevTools();

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});