Visual Studio CodeでツクールMVをデバッグ～NW.js(ローカル環境)編～

### 前提記事
「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

### はじめに
現在開発中のプロジェクトがVisual Studio Code(以下VScode)のchrome(ブラウザ環境)デバッグで動かなかったので、NW.js(ローカル環境)でデバッグする方法を紹介します。

### こんな人におすすめ
- ツクールMVをダウンロード版として開発していて、アツマールやPLiCyなど、ブラウザで配布する予定がないのでローカル環境でテストしたい
- 開発中のMVプロジェクトが、ブラウザ版では使えない機能を使っている
- ~~ブラウザ版だとキーの入力受付が数フレーム遅くて、操作感が気に入らない~~
- ツクールMVでNW.jsの最新バージョンや特定のバージョンを手軽に試したい

## 導入方法
VScodeの導入については、、@Sanshiro さんの記事

「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

が分かりやすいです。

まずはこちらを読んで、『「Visual Studio Code」の導入』から『拡張機能「Debugger for Chrome」の導入』まで進めておいてください。

Debugger for Chromeのインストールが終わったところから手順が変わります。

### Debugger for NWjsの導入

VScode左側のアイコンから拡張機能(Extensions)をクリック。
検索欄に「NWjs」と入力して、出てきた「Debugger for NWjs」をinstallします。
![2020-03-29_01-24-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/ad58874b-6ed1-7347-ac69-c179bf0e6db8.png)

Debugger for NWjs導入のためにDebugger for Chromeを消す必要はありません。chrome→NWjsの順で両方がインストールされているようにしてください。

### VScodeにNW.jsをインストール

VScode上で「F1キー」や「Ctrl+Pキー」で出てくるコマンドパレットに「nwjs」を打ち込みます。
候補として出てきた「NWjs Install」を選択します。
![2020-03-29_01-28-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/c28662d9-990a-7c62-fd50-6323477c41e2.png)

バージョンがズラッと出てきます。
![2020-03-29_01-33-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/14ec80eb-957a-9069-3f75-67d17fe46820.png)
ツクールMV 1.6.2で使われているNW.jsはバージョン0.29.4なので「0.29.4 win-ia32」を選択します。

画面右下に「Install complete」の通知が出るまで待ちましょう。
![2020-03-29_01-46-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/3d522905-baeb-4b54-b284-ead173fe3642.png)

<!-- (最新版を選ぶとjavascriptやnode.jsの最新の機能が使えたりして楽しいですが、当然配布する時も同じバージョンのNW.jsにする必要が出てきます) -->

※今後ツクールMVがバージョンアップした際にNW.jsのバージョンを調べるには、ツクールMVのエディタからテストプレイを開始>「F8キー」か「F12キー」でコンソールを開き、
「nw.process.versions.nw」と打ち込みます。
![2020-03-29_01-40-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/1c85a141-7b0e-d663-99e6-c25ea0dfa699.png)

### launch.jsonの作成

VScode左側のアイコンから虫アイコンの「デバッグ(Run)」をクリック。
「Run and Debug」からNWjsを選択します。
![2020-03-29_01-51-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/480a5c69-8123-ec34-030b-8f44e478e811.png)
![2020-03-29_01-51-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/cd267907-bb7f-25f0-c027-76932d668c97.png)

既にlaunch.jsonが作成済の場合は以下のような画面になっているはずなので、
![2020-03-29_01-52-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/be1d645d-b2c7-136d-cc01-35be04f47ae9.png)
ツクールの開発フォルダにある.VScodeの中のlaunch.jsonを(バックアップしてから)削除します。

### launch.jsonの編集
作ったばかりのlaunch.jsonから、"webRoot"を編集します。
`"${workspaceFolder}/ツクールMVのindex.htmlがあるフォルダ"`に書き換えましょう。
例えばフォルダ構造がNewData/index.htmlとなっていて、VScodeでNewDataフォルダを開いた場合は以下の通り。

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "nwjs",
            "request": "launch",
            "name": "Launch NWjs",
            "nwjsVersion": "0.29.4",
            "webRoot": "${workspaceFolder}/NewData",
            "reloadAfterAttached": true
        }
    ]
}
```
さらにテストプレイモードで起動する場合は
`"runtimeArgs": ["${workspaceFolder}/NewData", "test"]`
を追記します(情報提供: @InabaByakko さん)

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "nwjs",
            "request": "launch",
            "name": "Launch NWjs",
            "nwjsVersion": "0.29.4",
            "webRoot": "${workspaceFolder}/NewData",
            "reloadAfterAttached": true,
            "runtimeArgs": ["${workspaceFolder}/NewData", "test"]
        }
    ]
}
```

2020/11/05追記:
`nwjsVersion`について、初期値の"any"のままだとインストールされたうちの最新のバージョンが実行されるようです。ツクールのnwjsと同じバージョンなど指定しておきましょう。


### デバッグ実行

編集したら
RUN ▷ Launch...
をクリック！
![2020-03-29_01-59-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280086/949ccd18-bee5-c53f-0990-568e6258cf03.png)


Chromeの画面ではなくアプリケーション画面になっていたら成功です！



### 参考

「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

vscode + node.js + nw.js
https://ameblo.jp/fundarakoketa/entry-12299609144.html