コラム：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版