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
簡単！