ElectronはNode.jsを使用したJavascriptでデスクトップアプリケーションを作成するフレームワークです
※Node.jsが入っている事が前提

事前準備

npm初期化

npm init

インストール

Electron本体

npm install electron-prebuilt --save-dev

リリース用アプリケーションを出力するためのpackager

npm install electron-packager --save-dev

今回は--save-devとともに-gでグローバルにもインストールしました

Hello World

package.json

{
  "name": "FirstApp",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-packager": "^5.2.0",
    "electron-prebuilt": "^0.36.0"
  }
}

index.js

エントリポイントとなるjsファイル

index.js

// アプリケーション作成用モジュールをロード
var app = require('app');
var BrowserWindow = require('browser-window');

// クラッシュレポート
require('crash-reporter').start();

var mainWindow = null;

// 全てのウィンドウが閉じた時のハンドラ
app.on('window-all-closed', function() {
  // アプリケーションを終了
  app.quit();
});

// アプリケーションの初期化ハンドラ
app.on('ready', function() {
  // メインウィンドウの背臭い
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600
  });
  // メインウィンドウに表示するURLを指定
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  // メインウィンドウ終了ハンドラ
  mainWindow.on('closed', function() {
    // 参照を破棄
    mainWindow = null;
  });
});

index.html

index.jsで指定した最初に表示するhtmlファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="style.css">
  <title>HelloElectron</title>
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
<h1>HelloElectron</h1>
</body>
</html>

実行

起動します

electron index.js

electron indexとかでも起動できます

リリース

HelloElectronという名前のアプリケーションをリリースしてみます
今回はwindowsとos x向けの64ビットアプリケーションをリリースします

electron-packager ./ HelloElectron --platform=darwin,win32 --arch=x64 --version=0.29.2 --overwrite

Electronを導入してみる

事前準備

インストール

Hello World

package.json

index.js

index.html

実行

リリース