Moddable SDKの開発環境構築を自動化するxs-devツールを試してみた。(macOS編)

# はじめに

Moddable SDK 3.6.0のリリースノートに記載されていたModdable SDKの開発環境構築を自動化するxs-devツールを試してみました。

https://github.com/Moddable-OpenSource/moddable/releases/tag/3.6.0

https://github.com/hipsterbrown/xs-dev

https://hipsterbrown.github.io/xs-dev/en/introduction/

# xs-devツールのインストール

Node.jsがインストールされていない場合は、最初にNode.js v14以上をインストールします。
Node.jsの<a href="https://nodejs.org/ja/">サイト</a>へアクセスし、推奨版のソフトウェアをダウンロードします。

![スクリーンショット 2023-03-09 14.44.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/1c22a159-dee9-c316-9387-f45abd1797b0.png)

ダウンロードしたファイル(pkgファイル)を実行してインストールします。
インストールが完了したらターミナルを開き、以下のコマンドで動作を確認します。

```bash
$ node -v
v18.14.2
$ npm -v
9.5.0
```

Node.js v14以上がインストールされている場合は、npmコマンドでxs-devツールをインストールします。

```bash
$ npm install -g xs-dev
```

以下のコマンドで動作確認します。

```bash
$ xs-dev -v
0.23.0
```

xs-devツールを更新する場合は、以下のコマンドを実行します。

```bash
$ npm update -g xs-dev
```

# Moddable SDKの開発環境の構築

前提条件

- Intel MacBook Pro (2017)
- macOS Big Sur (バージョン 11.7.4)
- Xcode (バージョン 13.1)
- Homebrew

XcodeとCommandLineToolsがインストールされている必要があります。
XcodeのインストールとCommandLineToolsの設定は以下のページで確認できます。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

Homebrewがインストールされていない場合は、以下のコマンドでインストールします。

```bash
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## Moddable SDKのセットアップ

以下のコマンドを実行します。

```bash
$ xs-dev setup
ℹ Downloading release tools
✔ Getting latest Moddable-OpenSource/moddable release
✔ Installing xsbug-log dependencies
✔ Moddable SDK successfully set up! Start a new terminal session and run the "helloworld example": xs-dev run --example helloworld
```

デフォルトではModdable SDKの最終リリースバージョンがインストールされるため、GitHubのメインブランチをインストールする場合は、以下のコマンドを実行します。

```bash
$ xs-dev setup --target-branch public
```

セットアップが完了すると、.bashrcに以下のコマンドが追加されます。

```bash
source /Users/kitazaki/.local/share/xs-dev-export.sh
```

コマンドを実行するか、ターミナルを閉じて新しく開きます。
※ 以下のエラーが表示されますが、問題ありません。ESP32デバイスのセットアップ後は表示されません。

```bash
-bash: /Users/kitazaki/.local/share/esp32/esp-idf/export.sh: No such file or directory
```

以下のコマンドでインストール後の環境を確認します。

```bash
$ xs-dev info
xs-dev environment info:
  CLI Version                0.23.0                                        
  OS                         Darwin                                        
  Arch                       x64                                           
  NodeJS Version             v18.14.2 (/usr/local/bin/node)                
  Python Version             3.9.6 (/opt/local/bin/python)                 
  Moddable SDK Version       3.7.6 (/Users/kitazaki/.local/share/moddable) 
  Supported target devices   mac 
```

以下のコマンドでサンプルプログラム(helloworld)を実行します。

```bash
$ xs-dev run --example helloworld
```

## ESP32デバイスのセットアップ

以下のコマンドでESP32デバイスのビルドツール(ESP-IDF)をインストールします。

```bash
$ xs-dev setup --device esp32
ℹ Ensuring esp32 install directory
✔ Cloning esp-idf repo
✔ Installing pyserial through pip3
⠼ Installing esp-idf toolingDetecting the Python interpreter
Checking "python" ...
⠦ Installing esp-idf toolingPython 3.9.6
"python" has been detected
Installing ESP-IDF tools
⠇ Installing esp-idf toolingCurrent system platform: macos
Creating /Users/kitazaki/.espressif/idf-env.json

(中略)

⠸ Installing esp-idf toolingAll done! You can now run:

  . ./export.sh

✔ Installing esp-idf tooling
ℹ Sourcing esp-idf environment
✔ 
  Successfully set up esp32 platform support for Moddable!
  Test out the setup by starting a new terminal session, plugging in your device, and running: xs-dev run --example helloworld --device=esp32
  If there is trouble finding the correct port, pass the "--port" flag to the above command with the path to the /dev.cu.* that matches your device.
```

以下のコマンドでインストール後の環境を確認します。

```bash
$ xs-dev info
xs-dev environment info:
  CLI Version                0.23.0
  OS                         Darwin
  Arch                       x64
  NodeJS Version             v18.14.2 (/usr/local/bin/node)
  Python Version             3.9.6 (/Users/kitazaki/.espressif/python_env/idf4.4_py3.9_env/bin/python)
  Moddable SDK Version       3.7.0 (/Users/kitazaki/.local/share/moddable)
  Supported target devices   mac, esp32
  ESP32 IDF Directory        /Users/kitazaki/.local/share/esp32/esp-idf 
```

## ESP32デバイスの接続ポート番号を確認する

M5StickC Plusを接続した例

```bash
$ xs-dev scan
✔️ Found the following available devices!
  Port               Device             Features
  /dev/cu.usbserial-09535D631E   ESP32-PICO-D4 (revision 1)   WiFi, BT, Dual Core, 240MHz, Embedded Flash, VRef calibration in efuse, Coding Scheme None
```

## ESP32デバイスでサンプルプログラムを実行する

M5StickC Plusでサンプルプログラム(helloworld)を実行する例

```bash
$ xs-dev run --example helloworld --port /dev/cu.usbserial-09535D631E --device esp32/m5stick_cplus
⠴ Building and deploying project /Users/kitazaki/.local/share/moddable/examples/helloworld on esp32/m5stick_cplus
```

M5StickC Plusでボールデモ(piu/balls)を実行する例

```bash
$ xs-dev run --example piu/balls --port /dev/cu.usbserial-09535D631E --device esp32/m5stick_cplus
⠴ Building and deploying project /Users/kitazaki/.local/share/moddable/examples/piu/balls on esp32/m5stick_cplus
```