こんにちは、新卒のshiroです。

NW.jsを使用し、HTML+CSS+JavaScriptのwebアプリをビルドしてみました。
今回は備忘録としてその方法の紹介です。

今回の環境もwindows10 Home 64bitOSになります。
MacOSは苦手なのです……。

NW.jsはnpmコマンドを利用して操作するので、それが入っているNode.jsのインストールが必要となります。
nodejs.orgから推奨版または最新版をインストールしておきましょう。
また今回はビルドが目的なので、用意したwebアプリの詳細は省略します。

package.jsonの作成
nw、nw-builderのインストール
起動・ビルド

package.jsonの作成

NW.jsでビルドする際、package.jsonが必要なので作成します。

今回の例でビルドするフォルダ構成の現状は以下と想定します。
各自の構成に合わせて読み替えてください。

sample
└src
　├css
　│└cssファイル群
　├js
　│└jsファイル群
　└index.html

cmdまたはNode.js command promptを管理者権限で開いて、sampleフォルダに移動します。
ここで

npm init

を入力し、確認項目で何も考えずEnterを押します。

すべてyes扱いになる

npm init -y

でもいいでしょう。
するとsampleフォルダ直下にpackage.jsonファイルが作成されます。
これをsrcフォルダ内にコピーします。
これで現在、フォルダ構成は以下の様になっているはずです。

sample
├src
│├css
││└cssファイル群
│├js
││└jsファイル群
│├index.html
│└package.json
└package.json

まずはsrcフォルダ内のpackage.jsonを編集します。

下記は一例になります。

{
  "name": "sample",
  "version":"1.0.0",
  "main": "index.html",
  "window": {
    "resizable": false,
    "show_in_taskbar": false
  }
}

この中で
name
version
main
は必須になります。
今回書いたwindow内の各要素は以下の通りです。

package.jsonに記述する内容の詳細はManifest Formatを確認してください。

"main": "*.*"

"main": "js/entry.js"

// NW.js 0.13.0以降の記述方法
nw.Window.open("../index.html",{
  position: "center",
  width: 350,//resizable -= 10
  height: 36//resizable -= 10
});

次にsampleフォルダ直下のpackage.jsonを編集します。
scriptの中身を以下の2行で上書きします。

"dev": "nw src/",
"build": "nwbuild -p win32,win64,osx64,linux32,linux64 -o build/ src/"

これらは”npm run <command>”で実行します。
“nw [pass]”はnw.jsで実際に起動するコマンドになります。
“nwbuild [options] [pass]”は名前の通りビルドする際のコマンドです。
“-p”はプラットフォームで、作成したいもののみ記述します。
“-o”は出力先です。
最後にソースファイルの場所を指定します。

nw、nw-builderのインストール

先ほど”script”に記述したものは、このままでは動きません。
なので、nwとnw-builderをインストールします。
今回はグローバルではなく、sampleフォルダ直下にインストールします。
nwとnwbuildはdevDependenciesに記述されるようにします。

cmdで以下の通り記述します。

npm i nw --save-dev
npm i nw-builder --save-dev

どちらも時間がかかるので、気長に待ちましょう。

npm uninstall nw --save-dev

npm i nw --nwjs_build_type=sdk --save-dev

インストール後、

sample
├node_modules
│└複数フォルダ
├src
│├css
││└cssファイル群
│├js
││└jsファイル群
│├index.html
│└package.json
├package.json
└package-lock.json

となり、またsample/package.json内に

"devDependencies": {
  "nw": "^0.25.4",
  "nw-builder": "^3.4.1"
}

が記述されていれば成功です。
0.25.4と3.4.1はバージョンなので、変わることがあります。

起動・ビルド

では、cmdで

npm run dev

と記述してみましょう。

正常にアプリが動作していれば問題ありません。
ウィンドウサイズが合わない場合、src/package.jsonの”window”にwidthとheightを記述するといいでしょう。

正常に動作することを確認したら、

npm run build

でビルドします。
これはかなり時間がかかります。

ビルドが完了すると、sample/build/sample内に-oで指定したフォルダが作成されています。
これで完了です。

一緒に語られることが多いElectronも触ってみたいですね。

楽しいプログラミングライフを！

EOF.