ししかわ商店

2020/10/02

M5Stack CORE2でModdableが使えるようになった

M5StackModdable
placeholdercover image

ししかわです。

M5Stackから待望のタッチスクリーン搭載の新機種「M5Stack CORE2」が発売されました。 早速M5Stack CORE2を入手して、Moddable SDKに対応させました。 これでJavaScriptを使って、M5StackでタッチUI付きのアプリケーションを作れるようになりました。

core2.webp

Moddableのインストールとアップデート


初めてModdableをインストールする場合はGetting Startedを、 既にインストール済みの場合はKeeping Up To Dateのドキュメントを参照ください。


Moddableのビルドコマンドmcconfigのターゲット指定オプションにesp32/m5stack_core2を与えることで、CORE2向けの設定が有効になります。

1
$ mcconfig -m -p esp32/m5stack_core2

デバッグビルドの場合-dオプションを追加します。

1
$ mcconfig -m -d -p esp32/m5stack_core2

タッチやドラッグのイベントハンドリングについてはpiuのBehaviorクラスのドキュメントに詳しい使い方が載っています。 また、タッチ機能についてはModdableの公式リポジトリに豊富なサンプルアプリケーションがあるので、 それらを動かしてみると機能や書き方が掴めると思います。

https://twitter.com/meganetaaan/status/1302262893136601088

https://twitter.com/meganetaaan/status/1302265812284108800

https://twitter.com/meganetaaan/status/1302268647751049216

1点注意として、タッチスクリーン自体は2点までのマルチタッチに対応していますが、なぜか同じ列の2点タッチができません。 Moddableが認識するタッチの個数を設定config/touchCountで替えられるので1本にしておくのが得策です(アプリケーションでの設定例)。

スピーカー、9軸センサ、振動モータについてはアプリ起動時に実行されるセットアップスクリプトsetup-target.jsに動かすコードが載っているので、読むと使い方の雰囲気が分かるかと思います。

また、本体に搭載されたPSRAMもマニフェストファイルの設定から有効化できます。 こちらは公式に取り込まれていませんが拙作のサンプルアプリ集に作例を乗せました。 (PSRAMは8MBですが、設定で自動的に使えるようになるのは4MBまでのようです)

上記以外の機能(マイク、SDカードの読み書き、RTCなど)も実装したいですが、 私が直近作りたいものとは関係ない機能なので、なかなか腰が上がらないのが正直なところです…。 代わりにプルリク出してくださる方、歓迎します!


昨年の技術書典7で頒布した「実践Moddable」のコラムでも述べましたが、 Moddableはタッチスクリーンと組み合わせることで真価を発揮します。

今までもModdableのサイトから技適付きのリファレンス端末であるModdable Twoが入手可能ですが、国内での取扱が無く、入手製が良くないという現状がありました。 一方M5Stackでは一年前から防水&タッチスクリーン搭載の「M5Tough」開発の噂は流れていたものの、設計見直しなどがあったらしく発売には至っていませんでした、 そんな経緯があり、今回のM5Stack CORE2発売はまさに「待ちに待った」という感じです。

個人Makerの作品にもUIとしてスマートフォンを埋め込んだものはよく見られますが、 M5StackとModdableの組み合わせは「小型」「安価」「入手性がよい」など良いことづくめで、組み込み開発におけるスマホUIの多くを代替する可能性を秘めていると思います。 是非試してみてください。

わからない点があればModdableユーザコミュニティのDiscordでの質問なども歓迎です。

https://t.co/qohuIAKjm8?amp=1


今回のプルリクエストは@StupidDogさんと協力しながら作りました。 実践ModdableをきっかけにModdableを使った開発を始められたそうで、 今回(多分?)GitHubのOSSへの初めてのコントリビューションを手助けできて光栄です。