ElectronインストールからHello worldまで #Node.js

Electronって何

GitHub社が開発
HTML,CSS,JavaScriptでネイティブアプリが作れるオープンソースフレームワーク
クロスプラットフォーム対応(Mac, Linux, Windows)
Node.jsとChromiumで動いている
AtomとかSlackとかkobitoとか

Electronの準備

ElectronはNode.jsで動いてるので、まずはPCにNode.jsの実行環境を作る必要があります。
Node環境の構築はこちらMacにNode.js環境を作る(nodebrew)

では早速アプリを作っていきます

ディレクトリ作成

$ mkdir electron-app
$ cd electron-app

package.json作成

$ npm init

色々聞かれて作られたpackage.jsonファイル

package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "saekis",
  "license": "MIT"
}

実行とかアーカイプ用とかに一部を修正

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

↓

package.json

"scripts": {
  "start": "node_modules/.bin/electron .",
  "build": "node build.js"
},

Electron用モジュールをインストール

$ npm --save-dev install electron-prebuilt
$ npm --save-dev install electron-packager

Hello world

jsファイルとhtmlファイルを作る

index.js

'use strict';

// アプリケーションをコントロールするモジュール
var app = require('app');
// ウィンドウを作成するモジュール
var BrowserWindow = require('browser-window');
// 起動URL
var currentURL = 'file://' + __dirname + '/index.html';
// クラッジュレポーター
require('crash-reporter').start();
// メインウィンドウはGCされないようにグローバル宣言
var mainWindow = null;
// 全てのウィンドウが閉じたら終了
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(currentURL);
  mainWindow.toggleDevTools();
  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

$ npm run start

簡単！