M5stackをModdableを使ってjavascriptで動かしてみる

#はじめに
昨今、とてもはやっているそうなjavascriptを学んでみたかったのです。
何かできないかなぁと調べていたらM5stackがModdable + JavaScriptで動くという記事があったため、試してみようということで始めました。

調べて出てきた記事が以下です。
著者のJavaScript視点からの説明は勉強になりました。ありがとうございます！

JavaScript x IoTの大本命「ModdableSDK」をM5Stackで動かしてみた

本記事では、windowsで構成を作ってみたいと思います。

#やりたいこと

• windowsでのModdableの構成
• JavaScriptでのプログラミング
• Moddableで定周期制御やタイマ割込みの周期調べ

##開発環境

• windows 10 Home 64bit
• Moddable
  • 使用言語はJavaScript

##M5stackについて
M5stackはESP32を使用しているLCDディスプレイ付きのマイコンキットです。
ESP32はFree RTOSを基にArudiono(C,C++)を使ってプログラミング可能です。
開発環境では、PlatformIOなどがあります。

m5stackについては以下の記事に中身を調べたことを記載しています。

m5stackで遊ぼう

##Moddableについて
ModdableはJavaScriptでマイコンプログラミングするためのSDKだそうです。
公式は以下になります。英語なので中学生以下の英語力しかない自分では読むのが大変です。
Google翻訳を駆使して自分なりの解釈で構成を進めていきます。

Moddable-OpenSource/moddable

対応マイコンは以下だそうです。

• ESP8266(Xtensa)
• ESP32(Xtensa)
• Gecko(Arm)
• QCA4020(Arm)

GeckoとQCA4020は初めて知りました。
wifi付きマイコンは今すごい増えてるんですね。

#ゲッティングスタート
ここから本題です。
頑張って英語を翻訳にぶち込みながら進めていきます。

##あなたの環境でセットアップしよう！
今回の自分の環境はwindowsです。セットアップのドキュメントが別にあるのでそれを進めろと言われてます。
ESPシリーズ、Geckoシリーズ、QCA4020はそれぞれでドキュメントはあるようです。
今回はESPシリーズしか使わないので素直に進めていきます。

手順としては先にPC側の設定、次にマイコンとの接続設定となっているようです。マイコンはESP32のセットアップを進めます。
基本的には公式ドキュメントに記載があるフォルダ構成を作ってコマンドを入力していけば問題ないです。
以下の手順は自分がざっくり行った手順を記載しています。詳細は公式ドキュメントを読んでください

###PC側の設定の手順
PC側はGitのインストールしているとコマンドですべてできます。

1. Microsoft Visual Studio 2019 Community EditionのDesktop development for C++インストールする
2. GitでModdableのダウンロード
3. xsbugとmcconfigを使い為の環境変数設定の設定
4. xsbugの起動とmcconfigでサンプルのハローワールドのコンパイルと起動

PC側の設定では、x86 Native Tools Command Prompt for VS 2019を使ってビルドのみではなく環境変数設定とPATHの設定もできます。
なので、手順1.のインストールが終わったらすべてをx86 Native Tools Command Prompt for VS 2019でコマンドを打ち込んで問題なかったです。

常識かもしれませんが・・・環境変数のPATH設定の時にPATHを追加する形で書いてください。
自分はこの辺りが疎すぎてPATHを上書きですべて消してしまって再インストールすることになりました・・・

###ESP32の接続設定の手順

1. USB-UART変換ドライバのインストール(これはUSBさすと自動でインストールされます)
2. tool chain (all-in-one Windows toolchain and MSYS2) のダウンロード
3. 'MinGW32を起動してESP-IDFのダウンロード(git clone`でダウンロード)
4. シェルファイルの作成、中身はコマンドのみを記載(ここだけコマンドラインを使わずにやりました)
5. m5stackとPCをUSBでつないでCOM PORT番号を確認
6. 環境変数の設定を行ってコンパイルとダウンロードを実施(最後のコマンドはmcconfig -d -m -p esp32/m5stackにする必要があります)

ここも手順の2.3以外はすべてx86 Native Tools Command Prompt for VS 2019で文章通りのコマンドを打つだけでした。
一か所引っかかったところは6.の環境変数の設定で、\ではなく、/で階層を表せってところでした。
ちゃんと英語で注意書きに書かれていたので見逃していました・・・

###やってみた感想
基本的には公式ドキュメントのコマンドを次々打っていく感じでした。
途中、シェルファイルの作成があったり、MinGW32の操作がありましたが、基本的にはフォルダ構成の作成と環境変数の設定だけだったので特に考えないで実行する分には簡単でした。

ですが、今回のハローワールドのサンプルだと特にシリアル通信で返答するわけでもなく一瞬でターミナルが終了するので書き込めてるのかどうか確認しにくかったです。
今回は自分が前もって入れていたテストのファームが入っていたので書き換わっていると確認取れましたが、実際何が起きてるか全くわからなかったです。唯一変わったのはm5stackから音が出ることですが、それで正しいのかわからないです。

この手順をやってみて気づいたのですが、xsbugは基本的にwindowsのみの場合のみデバッグ機能なのか、自分の設定が悪くて使えてないだけなのかわからなかったです。
後は、x86 Native Tools Command Prompt for VS 2019だけで完結しているのでうまくいけばVSCodeでも動かせそうかもしれないですが、自分の技量だとわからないですね・・・。

#最後に
今回は環境セットアップのみでしたが、これだけで1日かかりました。
やっぱり環境を作るのが一番時間がかかります・・・
開発環境の設定が自分にとって一番大変な作業なのでどなたかできたら教えてほしいです。

次回はjavascriptでm5stackを動かしてみようと思います。