環境 Linux Mint 18 Mate 2016-11-30

nvm でもいいのだが今回は n package を使った手法で入れてみる。

n package というのは node 自身で node のバージョンをコントロールするモノっぽいが 最初の一発目が必要なので、その n を駆動するためだけの node を apt でインストールする

$ sudo apt install nodejs
$ sudo apt install npm
$ nodejs -v
v4.2.6

この状況で n を npm で突っ込む

$ sudo npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── n@2.1.4 
$ sudo n -V
2.1.3

n というもうちょっと長くしてよと思えるコマンドが使えるようになった。

ここで安定版最新をインストールする

$ sudo n stable

     install : node-v7.2.0
       mkdir : /usr/local/n/versions/node/7.2.0
       fetch : https://nodejs.org/dist/v7.2.0/node-v7.2.0-linux-x64.tar.gz
######################################################################## 100,0%
   installed : v7.2.0
$ node -v
v7.2.0

もう普通に使える。7.2.0 が最新のようだ

駆動するために入れた node はもういらんので消す

$ sudo apt purge -y nodejs npm
$ nodejs
bash: /usr/bin/nodejs: そのようなファイルやディレクトリはありません

ということでOK

こんな感じでドッチャリ入る

$ sudo npm -g install electron-prebuilt
/usr/local/bin/electron -> /usr/local/lib/node_modules/electron-prebuilt/cli.js

> electron-prebuilt@1.4.10 postinstall /usr/local/lib/node_modules/electron-prebuilt
> node install.js

ディレクトリをホルホル

$ cd Documents
$ mkdir source
$ cd source
$ mkdir electron
$ cd electron
$ mkdir helloworld
$ cd helloworld

Packeage 作り

$ npm init -y

エントリーポイントが index.js になっていることを確認

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.js を作る。このへんは定番記述のようなのでそれに従う。

'use strict';
 
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
 
var mainWindow = null;
 
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
 
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 をロードしているのでこいつを作る。 面倒なので1行でいいだろう

helloworld

このディレクトリで

$ electron .

で、こうなる。

X ボタンで終了できるし、File→Quit でも終了できる基本的なアプリケーションとして成立していることがわかる。

Electron の魅力といえばパッケージ化することによるクロスプラットフォーム実行だろう。やってみる。

パッケージャーをインストールする

$ sudo npm -g install electron-packager

パッケージ化に Electron のバージョンが必要なそうなのでそれを確認

$ electron --version
v1.4.10

$ electron-packager . helloworld --platform=all --arch=x64 --version=1.4.10
Downloading SHASUMS256.txt
Downloading electron-v1.4.10-linux-x64.zip
Downloading electron-v1.4.10-mas-x64.zip
[============================================>] 100.0% of 41.14 MB (962.39 kB/s)
Downloading electron-v1.4.10-win32-x64.zip
[============================================>] 100.0% of 54.33 MB (1.43 MB/s)
Packaging app for platform win32 x64 using electron v1.4.10
Could not find "wine" on your system.

Wine is required to use the app-copyright, app-version, build-version, icon, and 
win32metadata parameters for Windows targets.

Make sure that the "wine" executable is in your PATH.

See https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms for details.

なんか Windows 向けのパッケージには wine が必要だぞというらしい。とりあえず Linux 版と Mac 版はできたようだ。

とりあえずディレクトリにそれっぽいディレクトリが作られているディレクトリごと Mac に持っていったら拍子抜けするほど簡単に実行できた。 X ボタンで終了しないというMacっぽい挙動が index.js に書いてあったが、その通り Macっぽくxでアプリが終了しない挙動。簡単。

では wind 問題を解決してみる

$ apt search wine
p   wine    - Microsoft Windows Compatibility Layer (meta-package)

なので

$ sudo apt install wine
$ wine --version
wine-1.6.2

OK

再び Windows 版だけ再パッケージ

$ electron-packager . helloworld --platform=win32 --arch=x64 --version=1.4.10

なんか、wine 側でイロイロダウンロードして完了。また1個ディレクトリが出来てそこに、helloworld.exe があった。これでOK