コラム：ElectronとNW.js

説明

ここでは、『Electron』と『NW.js』について少し触れます。

『Node.js』は、ウィンドウやボタンなどの『GUI』（Graphical User Interface）を持たない実行環境です。

この『node.js』に、HTMLのレンダリングエンジン『WebKit』を合成した実行環境がいくつか存在します。そうした実行環境を使えば、HTMLでユーザーインターフェースを作りながら、『Node.js』のファイル操作などの機能を利用して、アプリケーションを作成できます。

そうした実行環境に『Electron』と『NW.js』があります。ここでは、この2つについて紹介します。実際のプログラミングについては、専用の入門サイトや解説サイトなどをご覧下さい。

『Electron』と『NW.js』の違い

『Electron』と『NW.js』では、『NW.js』の方が歴史が古いです。『Electron』は、『NW.js』の不満を解決するために作られました。しかし、どちらに優劣があるわけではありません。2つの実行環境には、利点と欠点があります。それでは、この2つの違いをまずは紹介します。

相違点	Electron	NW.js
エントリーポイント	index.js (JavaScriptファイル)	index.html (HTMLファイル)
index.htmlを開く手順	起動後index.jsを実行(メインプロセス)。メインプロセスからWebKitを利用して index.htmlを開く(レンダリングプロセス)。	起動後すぐにWebKitでindex.htmlを開く。
特性	1から堅牢なアプリを開発するのに向いている。	1枚ペラの、Webアプリを EXE化するのに向いている。

『エントリーポイント』というのは、開始するファイルです。

『Electron』は、『Node.js』のプログラムのように『index.js』（JavaScriptファイル）から開始します。その中からWebブラウザ部分を起動して、HTMLファイルを読み込みます。

『NW.js』、Webページと同じように『index.html』（HTMLファイル）から開始します。

どちらの場合も、HTMLファイルから『Node.js』の機能を利用できます。

『Electron』は大規模で堅牢なアプリケーションを作るのに向いており、『NW.js』は使い捨てのアプリケーションをサクッと作るのに向いています。

『Electron』

『Electron』の公式サイトとドキュメントは以下になります。

インストールは、『nodist』でインストールした『npm』（node package manager）を利用して、コマンドプロンプトから以下のコマンドでできます。『-g』はグローバルを意味して、個別のアプリケーションではなく、『Node.js』全体の機能としてインストールするフラグです。

npm install electron -g --loglevel verbose

『--loglevel verbose』はログを詳細に表示するモードです。このフラグを付ける必要はないですが、ダウンロード時間が長く、処理が止まっているように見えるので、付けておいた方が進行が分かってよいです。

インストール後に、コマンドプロンプトで以下のコマンドを実行してください。『Electron』のウィンドウが起動します。これは確認のための実行です。これ自体では何もできません。別途プログラムを書く必要があります。

electron

それでは、プログラムを書いてみましょう。『Node.js』では、アプリケーションのあるディレクトリで、コマンドプロンプトから『node .』と入力してアプリケーションを実行しました。『Electron』では、『electron .』として実行します。

以下、簡単なサンプルです。配布可能なアプリケーションにするまでには、もっと様々な設定を追加しなければなりません。より詳しい情報は、ネットで『Electron 入門』などのキーワードで、検索エンジンで検索してください。

【ファイル構成】

●electron_test
┣●js-lib
┃┗○jquery-3.2.1.min.js
┣●js-my
┃┗○app.main.js
┣○index.html
┣○main.js
┣○package.json
┗○run.bat

【run.bat】

electron .

【package.json】

{
  "name": "electron_test",
  "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';

// モジュールの読み込み
const electron       = require('electron');
const app            = electron.app;    // App
const BrowserWindow  = electron.BrowserWindow;  // ブラウザウィンドウ

// デバッグ表示
console.log('This is a Main Process');

// 変数の初期化
var mainWin  = null;
var urlIndex = `file://${__dirname}/index.html`;

// 全ウィンドウ終了時の処理
app.on('window-all-closed', () => {app.quit()});

// 準備が整った際の処理
app.on('ready', () => {
    // ブラウザの起動
    mainWin = new BrowserWindow({width: 1200, height: 800});
    mainWin.loadURL(urlIndex);  // index.htmlを開く
});

『Electron』では『electron』モジュールを利用して、様々なGUI機能を使えます。

『Electron』では、メインプロセスとレンダープロセスという2つのプロセスがあります。最初に起動するのはメインプロセスで、そこから『BrowserWindow』を利用してレンダープロセスを起動して、HTMLファイルを読み込みます。

【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>

    <!-- /* jQuery, other... */ -->
    <script>
        window.jQuery = window.$ = require('./js-lib/jquery-3.2.1.min.js');
    </script>

    <!-- /* main */ -->
    <script src="js-my/app.main.js"></script>
  </head>
  <body>
    <div id="appTtl">Hello World</div>
    <div id="appBdy"></div>
  </body>
</html>

『Electron』では、『<script>』を利用して『jQuery』を読み込むことができません。『require』を利用して『jQuery』を読み込む必要があります。

【js-my/app.main.js】

'use strict';

// DOM準備完了後の処理
$(function() {
    var msg = 'This is a Renderer Process';
    console.log(msg);
    $('#appBdy').text(msg);
});

『NW.js』

『NW.js』の公式サイトやドキュメント、ダウンロードページは以下になります。

それでは、『NW.js』の開発環境を作ります。公式サイトからWindows用（使用しているOS用）の環境を入手します。ZIPファイルをダウンロードして解凍してください。

ダウンロード可能なファイルには『NORMAL』と『SDK』の2種類があります。『NORMAL』は、配布ファイルを作る際のものです。こちらでは開発者ツールが表示されません。『SDK』は、開発用のファイルです。こちらでは、F12（Windowsの場合）で、開発者ツールを開けます。

そのため、開発時あるいは自分だけ使うツールの場合は『SDK』を使い、配布時は『NORMAL』を使うのがよいでしょう。Windows 32-bit向けにも配布したい場合は、Windows 32-bit版を選んでおくと、32bitでも64bitでも動きます。

環境変数

『NW.js』を実行する際は、環境変数に『nw.exe』のパスを登録しておいた方がよいです。

『NW.js』を解凍したフォルダ内の『nw.exe』のパスを、Windowsの環境変数に登録しておくとよいです。『SDK』を解凍したフォルダの『nw.exe』を環境変数『nNW_PATH』、『nNORMAL』を解凍したフォルダの『nw.exe』を環境変数『NW_PATH_RELEASE』と登録しておくとよいでしょう。

環境変数のパスの登録については、以下の手順で行えます。

Windowsボタンを右クリック。［システム］を選択。
左枠の［システム詳細設定］をクリック。
［環境変数］ボタンをクリック。
［ユーザー環境変数］あるいは［システム環境変数］から、以下の操作をする（実行できるユーザーの範囲を区切るなら［ユーザー環境変数］を選ぶ）。
［新規］ボタンをクリックして、［変数名］「NW_PATH」、［変数値］「nw.exeのパス」として登録する。

※「nw.exeのパス」は実際は「C:\node-webkit\nwjs-sdk-v0.24.4-win-ia32\nw.exe」のようなパス。

『NW.js』の実行

『NW.js』では、解凍したファイル内の『nw.exe』の引数に、実行したいディレクトリを指定して、末尾に『.』と付けて実行します。アプリケーションの引数は、その後に続けます。以下、例です。

C:\node-webkit\nwjs-sdk-v0.24.4-win-ia32\nw.exe "D:\nwjs_test\." "argument"

また、作成したアプリケーションのディレクトリにバッチファイルを作成しておくのも、1つの手です。バッチファイルの例は、下記サンプルで示します。

以下、簡単なサンプルです。配布可能なアプリケーションにするまでには、もっと様々な設定を追加しなければなりません。より詳しい情報は、ネットで『NW.js 入門』などのキーワードで、検索エンジンで検索してください。

【ファイル構成】

●nwjs_test
┣●js-lib
┃┗○jquery-3.2.1.min.js
┣●js-my
┃┗○app.main.js
┣○index.html
┣○package.json
┗○run.bat

【run.bat】

:: バッチファイルのディレクトリを取得
set THIS_DIR=%~dp0

:: アプリのパスを作成
set APP_PTH="%THIS_DIR%."

:: 開始
start "" "%NW_PATH%" %APP_PTH% %*

【package.json】

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

【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js-lib/jquery-3.2.1.min.js"></script>
    <script src="js-my/app.main.js"></script>
  </head>
  <body>
    <div id="appTtl">Hello World</div>
    <div id="appBdy"></div>
  </body>
</html>

『NW.js』は『Electron』と違い、『<script>』を利用して『jQuery』を読み込むことができます。

【js-my/app.main.js】

'use strict';

// DOM準備完了後の処理
$(function() {
    var msg = 'Insert Message.';
    console.log(msg);
    $('#appBdy').text(msg);
});

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード（右クリックから保存してください）

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る

マンガで分かる JavaScriptプログラミング講座第3版

コラム：ElectronとNW.js

目次

説明

『Electron』と『NW.js』の違い

『Electron』

『NW.js』

環境変数

『NW.js』の実行

サンプルの入手

メニュー

JavaScript

マンガで分かる JavaScriptプログラミング講座 第3版

コラム：ElectronとNW.js

目次

説明

『Electron』と『NW.js』の違い

『Electron』

『NW.js』

環境変数

『NW.js』の実行

サンプルの入手

メニュー

JavaScript

マンガで分かる JavaScriptプログラミング講座第3版