.NET使いが始めるElectron開発環境構築

1.事の始まり
①業務ではもっぱらWPF＋C＃
でも正直秋田
②JavaScriptをそろそろ勉強したい。

上記二点について考えていたところ、職場でATOMを触る機会があり、
調べるとJavaScript書かれてるらしい→Electronというもので作られているらしい。。。という感じでいっちょ勉強がてら作ってみようと思った。

ちなみに環境はMacOS Sierraです。

2.実践

2.1 nodebrew && Node.jsのインストール
NodebrewがNode.jsのバージョン管理ツールらしく
Node.jsがjavaScriptの拡張の一つらしい。

curl -L git.io/nodebrew | perl - setup

Node.jsはとりあえず安定版を入れました。(2017/3/14時点でv7.7.2)

nodebrew install-binary stable

2.2 electronのインストール
electron-prebuildと書いている記事もあるけど、最近はelectronでいいらしい。(2017/3/14時点でv1.6.2)
sudo npm -g install electron

2.3 package.jsonの変更

mkdir ElectronSample cd ElectronSample npm init -y

自動生成されたjsonファイルを以下に変更

package.json

{
  "name": "ElectronSample",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/electron .",
    "release": "node release.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.6 起動
main.js,index.htmlを同じフォルダに入れて下記のコマンドを打つと起動

Main.js

'use strict';

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
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('file://' + __dirname + '/index.html');

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

index.htmlはHelloWOrldでも貼っておけば良い

実行（Control+Cで終了してね）
electron ElectronSample/

2.5 electron-pacageのダウンロード&パッケージ化

npm i electron-packager -g

release.jsの作成

release.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
  electronVersion: '1.4.14',  // electron のバージョン
  icon: './app.icns', // アイコン
 
  'app-bundle-id': 'jp.miyamura.sample', // ドメイン
  '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を最新版にする
②NODE_PATHにグローバルモジュールのPATHを記述
以上、実行後下記のコマンドrelease.jsと同一階層で実行する
npm run release

3.締め
普段、IDEでアプリを作っている自分にとってほぼコンソール上での作業だったので、なかなか苦戦を強いられた。ただ、他所でも言われてる通り、フロントエンジニアの方はかなり楽にできると思われる。

次はTwitterAPIを用いて実際にものを作っていきたい。
その前に、Node.jsとHTML５の勉強をもしないと。。。。。

参考URL
1.30分で出来るElectron環境構築
http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29
2.electronを使ってみた
http://xanadu6291ex.webcrow.jp/wp/?p=175
3.electronのインストールでコケた時の解決方法 on OS X
http://qiita.com/masato_t/items/0a0f5f31b8225c3d9e52
4.node.jsのversionを管理するためにnodebrewを利用する
http://qiita.com/sinmetal/items/154e81823f386279b33c
5.NodeBrewインストール編
http://qiita.com/ebisennet/items/15c3c9fdb04e66db6323