はじめに

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

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

Node.jsがインストールされていない場合は、最初にNode.js v14以上をインストールします。
Node.jsのサイトへアクセスし、推奨版のソフトウェアをダウンロードします。

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

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

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

$ npm install -g xs-dev

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

$ xs-dev -v
0.23.0

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

$ 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の設定は以下のページで確認できます。

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

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

Moddable SDKのセットアップ

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

$ 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のメインブランチをインストールする場合は、以下のコマンドを実行します。

$ xs-dev setup --target-branch public

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

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

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

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

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

$ 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)を実行します。

$ xs-dev run --example helloworld

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

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

$ 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.

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

$ 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を接続した例

$ 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)を実行する例

$ 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)を実行する例

$ 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