Posted at

ElectronインストールからHello worldまで

More than 3 years have passed since last update.


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

'user 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

Electron_と_1__Electron_Helper.png

簡単!