NW.jsでアプリ作成
NW.jsとは
公式のURLは以下です。
NW.jsはNode.jsで動作するアプリをネイティブアプリにします。
似たようなものとして、Electronがあります。
Electronに関しての日本語資料はたくさんありますが、NW.jsはそれに比べると少ないです。
Electronの方が多機能と思いますが、NW.jsの方が作りやすいようです。
既にHTML表示できているようなものをアプリにするのであれば、NW.jsの方が早いと思われます。
NW.js開発準備
公式 NW.js からインストーラをダウンロードすることもできますが、普通にnpmで設定できます。
node
v12以上が必要なので、v12以上のnodeをインストールしておいてください。
nvm install 12
nvm use 12
npm init
初期化します。
取り合えず、entry pointだけ"src/views/index.html"に変更しておきます。
package name: (xxxxxx)
version: (1.0.0)
description:
entry point: (index.js) src/views/index.html
test command:
git repository:
keywords:
author:
license: (ISC)
NW.js
NW.jsをインストールします。
npm install --save-dev nw nw-builder
設定
起動スクリプトを設定しておきます。
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "dev":"nw src/",
+ "build":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
},
src/package.json
nwの設定ファイルを作成します。
同じpackage.jsonというファイル名ですが、これはアプリ側の設定で、srcディレクトリに作成します。
{
"name": "nw.js-sample",
"main": "views/index.html",
"window": {
"min_width": 400,
"min_height": 400
}
}
index.html
起動画面のindex.htmlを作っておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Sample</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
※Linux環境について
ここで本来は起動するのですが、私の環境ではエラーとなりました。
WindowsやMac、Desktop Linuxのnode.js環境の方は問題ないと思います。前回はhttp-serverが動作すればよいので、dockerで最小限のCUIのLinuxを使っていました。
今回はGUIアプリになりますので、WindowManagerが必要（まあ、画面表示なんで当たり前ですね）。desktopのLinuxが必要になります。
自分でDesktop環境をつくるのも大変なので、docker hubから良さそうなのを引っ張ってきます。
docker pull dorowu/ubuntu-desktop-lxde-vnc
DockerのLinux起動関連はここでは詳細は省略します。
このイメージならばVNc接続表示できるので、GUIアプリの動作確認にも使用できます。
起動
準備できたら、以下のコマンドで起動してみます。
npm run dev
正常に表示されました。
Build
表示できましたので、以下のコマンドでBuildします。
npm run build
dist配下に各プラットフォームの実行体が作られました。
Windowsで実行してみると、いくつかセキュリティ警告が表示されます。内部通信と署名で引っかかるようです。
Windows用のアプリとして出すには証明書が必要だと思われます。許可すれば実行されます。
アプリとして実行できました。