Electronアプリ #Electron

事前準備

nodeインストール

brewでインストール
```
brew install node
```
確認
```
node -v

v7.3.0
```

npm/electron-prebuiltインストール

インストール
```
npm -g install electron-prebuilt
```

npm/electron-packagerインストール

インストール
```
npm -g install electron-packager
```

開発準備

プロジェクトディレクトリを作成

mkdir -p /your/project/path/project-name
cd /your/project/path/project-name

npm initを実行
```
npm init
```
- 対話式の設定コンソールになるので答えていくと、package.jsonが生成される。

開発

Hello World!

実装

index.html配置

index.html

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

main.js配置

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var win;

function createWindow() {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
    });
    win.loadURL('file://' + __dirname + '/index.html');
    win.webContents.openDevTools();
    win.on('closed', function () {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
    app.quit();
});

app.on('activate', function () {
    if (win === null) {
        createWindow();
    }
});

確認

実行してみる
```
electron .
```
ウィンドウが立ち上がって「Hello World!」が表示された。