とりあえず試してみたいって方のための Electron 入門

phi phi on Electron, tutorial

Electron 入門です.

説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です.

「これ何やってんの?」 とか 「どういう意図で??」 などありましたら 気軽に下のコメントや Twitter にて質問してください.

Setup

ディレクトリを作成

$ mkdir electron-app
$ cd electron-app

package.json を作る

色々聞かれるので適当に enter 押す

$ npm init

出力された package.json の中身

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

package.json を修正

実行やアーカイブ用のショートハンドを設定

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

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

Install

electron 用のモジュールをインストール

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

Run

index.js を作成

/*
 * index.js
 */

'use strict';

// アプリケーションをコントロールするモジュール
var app = require('app');  
// ウィンドウを作成するモジュール
var BrowserWindow = require('browser-window');  
// 起動 URL
var currentURL = 'file://' + __dirname + '/index.html';

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

// メインウィンドウ
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});
  // 起動 url を指定
  mainWindow.loadUrl(currentURL);

  // デベロッパーツールを表示
  // 不要であればコメントアウト
  mainWindow.toggleDevTools();

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html を作成

<!doctype html>

<html>  
  <head>
    <meta charset='utf-8' />
    <title>Electron App</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>  

起動

下記コマンドで実行

$ npm run start

electron app

control + C で終了

Packing

build.js を作る

var packager = require('electron-packager');  
var config = require('./package.json');

packager({  
  dir: './',          // 対象
  out: './dist',      // 出力先
  name: config.name,  // 名前
  platform: 'darwin', // or win32
  arch: 'x64',        // 64bit
  version: '0.34.2',  // electron のバージョン
  icon: './app.icns', // アイコン

  'app-bundle-id': 'jp.phi.electron-app', // ドメイン
  'app-version': config.version,          // バージョン

  overwrite: true,  // 上書き
  asar: true,       // アーカイブ
  prune: true,
  // 無視ファイル
  ignore: "node_modules/(electron-packager|electron-prebuilt|\.bin)|release\.js",
}, function done (err, appPath) {
  if(err) {
    throw new Error(err);
  }
  console.log('Done!!');
});

ビルドする

$ npm run build

こんな感じで ./dist 以下に生成されます.

electron build

*.app をクリックすると単体で実行できます.

Shortcut

上の工程もめんどくさい! とにかく動かしてみたいって方は, Github のリポジトリ を用意したので こちらから試してみてください.

Setup and Install

$ git clone https://github.com/phi-jp/electron-app.git
$ cd electron-app
$ npm install

Run

$ npm run start

Packing

$ npm run build

Reference

参考にさせていただきましたmm