現在開発中のブラウザゲームをSteamで公開すべく、アプリケーションとしてパッケージ化するライブラリとして、NW.jsの使い方を調査していました。

出てくる情報が、Windows環境で実行しているものだったり、情報が古かったりしたので、今回色々調べてわかったことをまとめたいと思います。


Mac環境でNW.jsを用いたデスクトップアプリケーションを作る手順


NW.jsのSDKをダウンロードして、そこにファイル一式を置く方法もあるのですが、Macでやるとかなり遠回りだったので、今回ご紹介するコマンドで進めるやり方を推奨します。

フォルダ構成は以下のとおりとします。
srcの中に、自分の作りたいアプリケーションのHTML, CSS, JSを配置します。


root
├── node_modules
├── package-lock.json
├── package.json （npm用）
└── src（この中に自分の作ったWebアプリを入れる）
    ├── index.html
    └── package.json （マニフェストファイル）



ポイントとなるのは、package.jsonが2つある、ということです。

私はここを見落として何時間も溶かしました。




npm用のpackage.jsonを追加

プロジェクトファイル直下でnpm initして、package.jsonファイルを追加し、以下のようにscriptを変更します。

{
  "name": "Example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",  
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nw src/",
    "build": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --outDir build --glob=false src/"
  },
  "author": "",
  "license": "ISC",
}


scriptの中で、開発用(dev)とビルド用(build)のコマンドを指定しました。

上の例では、devの場合、src/の部分が、アプリケーションのソースコードが格納されているディレクトリへのパスで、このディレクトリ内のコードがアプリケーションとして実行されます。

--platformsでプラットフォームを指定できます。
--outDirで、出力先を指定できます。この場合、buildというフォルダの中にアプリが生成されます。
--glob=falseというおまじないを書いておかないと、package.json not found in srcDir file glob patterns.という謎のエラーが発生します。



マニフェストファイルとなるpackage.jsonを追加

2つ目のpackage.jsonを追加します。
これは、先ほどと異なる同名ファイルですのでご注意を。

NW.jsが読み取るためのものなので、これはrootでなく、srcフォルダの中に置きます。


root
├── node_modules
├── package-lock.json
├── package.json 
└── src
    ├── index.html
    └── package.json （これだよ！）



最小構成はこちら。

{
  "name":"Example",
  "main":"index.html"
}

nameはアプリ名、
mainはエントリポイントです。




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

以下の二つのコマンドを叩き、プロジェクトにnwとnw-builderをインストールします。

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

※ちなみに一つ目のコマンドで、--nwjs_build_type=sdkという引数をつけてインストールしておくことで、アプリケーションを立ち上げたときに、F12キーを叩くと開発者モードでデバッグ可能になります。


package.jsonに、以下のdevDependenciesが追加されているはずです。

  "devDependencies": {
    "nw": "^0.78.1",
    "nw-builder": "^4.3.9"
  }
  
  のような形で追加されているはず。


起動する

npm run devを叩いてみましょう。

アプリが立ち上がるはずです。やったね！




ビルドする

npm run buildを叩くと、buildフォルダ内にアプリが生成され、最終的には、こんな感じのディレクトリ構成になっているはずです。

root
├── build
│   ├── credits.html
│   └── example.app（これが出来上がったアプリ！）
├── cache
│   ├── manifest.mac.arm.json
│   └── nwjs-v0.78.1-osx-arm64
├── node_modules
│   └── （モジュール群）
├── package-lock.json
├── package.json
└── src
    ├── index.html
    └── package.json




まとめ

結構色々なところで躓いて、めっちゃ大変でした。
が、最終的にNW.jsの仕組みを少し深く理解できてよかったです。

今回の記事が、MacでNW.jsを使ったアプリ制作をしてみたい人の参考になれば幸いです。


ちなみに次回の記事では、非推奨のやり方ではありますが、builderを使わずに、自分でファイルをセットする方法もご紹介します。


参考