node.js＋electronのインストから「Hello World」出力と配布用の作成

node.jsってヤツを調査していたらjsベースのデスクトップアプリが作れるとか・・・少し寄り道して試してみた

作成日:2017-11-08, 更新日:2017-11-19

流れ

１．node.jsのインスト
２．electronのインスト
３．「Hello World」出力
４-a．アーカイブ化：使い道は不明
４-b．パッケージ化：配布用

環境

・2017/11/08時点
・Win10

node.jsのインスト

「https://nodejs.org/download/」から「msi」をダウンロードしてインスト。

「https://nodejs.org/download/」の「release」の中の「v9.1.0」の中に「msi」がいる。

「node-v9.1.0-x64.msi」をDLして、インスト。

electronのインスト

CMDから下記実行

> npm -g install electron-prebuilt

「C:\Users\〇〇〇\AppData\Roaming\npm\node_modules\electron-prebuilt」にインストされる

CMDから下記実行でバージョンの確認等ができる。

> electron

「Hello World」出力

１．適当なフォルダを作る。
２．下準備
３．ファイル作成
４．実行

適当なフォルダを作る

ワークスペース（？）になるフォルダを作成。

ひとまず「sample」という名のフォルダを作成。

下準備

作ったフォルダ（ワークスペース（？））に何かを作る

CMDから下記実行

> cd sample
> npm init -y

※「cd sample」は環境にあわせてPATH修正が必要

実行後、「フォルダ：sample」の中に「package.json」が作られる。
「package.json」を開いて「main」の値を確認

ファイル作成

「package.json」を開いて「main」の値が「index.js」の場合
※「index.js」を実行して「index.html」を読み込む感じのサンプル

▼index.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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

実行

CMDに戻って上の階層にカレントを移してフォルダを実行

> cd ..
> electron sample

アーカイブ化

使い道は不明なため、やる必要ないんじゃないかな・・・。

１．アーカイブ化するためのツールインスト
２．アーカイブ化
３．アーカイブファイルの実行

アーカイブ化するためのツールインスト

アーカイブ化するには「asar」というツールが必要だそうで、インスト。

CMDから下記実行

> npm install -g asar

アーカイブ化

「asar pack 「アプリケーションディレクトリ」「出力ファイル名」.asar」な感じでCMDから下記実行

> asar pack ./sample ./sample.asar

アーカイブファイルの実行

CMDから下記実行

> electron sample.asar

パッケージ化

配布用。

１．パッケージ化するためのツールインスト
２．パッケージ化
３．配布、実行

パッケージ化するためのツールインスト

パッケージ化するには「electron-packager」というツールが必要

CMDから下記実行

npm i electron-packager -g

パッケージ化

パッケージ化する。下記はMacとWindows向けらしいが、Macで動作確認はしていないので不明。

「electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<version>」な感じでCMDから下記実行

> electron-packager ./sample sample --platform=darwin,win32 --arch=x64 --electronVersion=1.4.13

■platform
all, linux, win32, darwin のいずれかを選択。複数入れる場合はカンマ区切りで。

■arch
all, ia32, x64 のいずれかを選択。

■electronVersion
Electronのバージョン(1.4.13は2017/11/08時点におけるElectronの最新バージョン)

配布、実行

フォルダごと渡して、中にあるexeファイルを実行。