ししかわ商店

2018/12/13

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

M5StackModdable
placeholdercover image

これは(非公式)NSSOLアドベントカレンダー2018の12日目の記事です。前回は「コンテナ初心者がKubernetesによるNFSボリュームマウントができるようになるまで」でした。DockerとKubernetesの概要がわかりやすくまとまっていて素晴らしい記事ですね!

筆者は業務Webシステム開発のためのプラットフォームなどを生業にする傍ら、最近(趣味で)電子工作を始めました。M5Stackという開発ボードにハマるあまりコミュニティのミートアップでLTしてみたり技術書典で同人誌を出したりしています

今日はIoT関連で最近注目している ModdableSDK というプラットフォームを紹介します。

Moddableとは


JavaScriptでプログラミングできる IoT開発プラットフォームです。 ESP8266やESP32などのマイコン上で動作するアプリケーションをJavaScriptで簡単に作れるようになります。

Node.js環境を使えるRaspberryPiなどと違い、ArduinoなどのマイコンはCやC++による開発が主流です。しかしWebエンジニアならば使い慣れたJavaScriptでプログラミングしたい方も多いことでしょう。 Moddableの他にもJavaScriptが使えるIoT向けのプラットフォームは多数あります。

しかし、これらの多くには「マイコン以外に別途ホストマシンやインターネット環境が必要」「JavaScriptの一部の機能しか使えない」などの制約がありました。 Moddableは後述の特徴によってこれらの制約を解決し、快適なIoT開発を実現してくれます。


例えば前述のMongoose OSで使われているJSエンジンのmjs標準ライブラリやnewキーワードが使えないといった制約があります

Moddableは独自の組み込み向けJavaScriptエンジンxsを搭載し、最新のECMAScript2018仕様をほぼ満たしています。newはもちろんRegExpGeneratorも使えますし、なんとサブセットながらWorkerを使ったマルチスレッド処理まで書けます

参考:コミッターによるxsの解説

johny fiveはNode.jsでマイコン制御のプログラムを書けます。このプログラムはNode.js環境が構築できるRaspberryPiやEdison上では直接動かせますが、Arduinoなどのマイコンでは別途ホストマシンが必要となります。 また、obnizは専用のクラウドサービスを介してボードを制御する仕組みのため、インターネット環境が必須です。もちろんこれらの制約を設けることでセットアップが簡単になるなどメリットがありますが、(例えばセンサーデバイスを持って屋外を歩き回るような場合など)ネットワークが不安定になったり完全にオフラインになる環境下では動作が難しくなります。

Moddableは前述のJSエンジンを内蔵しているため、ネットワーク環境は不要で単体でプログラムを動作させることができます。

Moddableはビルドツールだけでなくシミュレータとデバッガが付属します。

https___qiita-image-store.s3.amazonaws.com_0_20447_6e4a8c74-72c8-5079-19f9-7d1d97fd7c93.gif

ブレークポイントでの停止とステップ実行、変数の監視なども、普段のJS開発と同じ感覚でできます。

ModdableSDKの全ソースコードがGitHub上で公開されています(ライセンスはGPL3.0、CC、Apache2.0などの複合です)。


公式リポジトリのドキュメントを見るのが最も近道です。Windows、MacOS、Linuxそれぞれで手順が異なるので注意してください。

MacOSでの環境構築の解説(インストールスクリプト付き)を書いている方もいます。  ESP32をJavaScriptで動かすModdable SDK | Make | kosakalab

筆者は次の環境で動作を確認しています。

  • Ubuntu 18.04 LTS
  • M5Stack Core (gray)

moddable/examplesディレクトリ配下に各機能のサンプルコードがあります。

M5Stack向けにコードをビルド/アップロードするには、次のコマンドを実行します。

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

-dはデバッグ用ビルド、-mはmakeコマンドを同時実行する、-p platformはプラットフォームを選択するためのオプションです。

また、シミュレータ上でコードを動かすには、OS毎のプラットフォーム名を-pオプションに指定します。

1
$ mcconfig -d -m -p lin

サンプルの中にはタッチ液晶を前提としているために正しく動作しないものも多いです。 以降、幾つか筆者が試したサンプルコードを示します。

お天気アイコン付きで天気予報を表示します。ネットワーク接続が必要です。次のようにしてビルド時にWiFiのSSIDとパスワードを指定します。 $ mcconfig -d -m -p esp32/m5stack ssid=[SSID] password=[パスワード] examples/piu/weather

https___qiita-image-store.s3.amazonaws.com_0_20447_47978137-4cfd-beb4-af50-e148e14d13d6.jpeg

次のコード例のようにしてOpen Weather MapのAPIを叩いています。 Web(特にフロントエンド)エンジニアの皆さん、このコード普通に読めるし、書ける気がしてきませんか?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// https://github.com/Moddable-OpenSource/moddable/blob/public/examples/piu/weather/main.js
getWeatherData(application, zip) {
	let request = new Request({
		host: "api.openweathermap.org",
		path: `/data/2.5/weather?zip=${zip},${country}&appid=${APPID}&units=imperial`,
		response: String
	});
	request.callback = (message, value) => {
		if (5 == message) {
			value = JSON.parse(value);
			let icon = value.weather[0].icon.substring(0,2);
			let toDraw;
			switch (icon){
				case "01":
					toDraw = SUN;
					break;
				case "02":
					toDraw = PARTIAL;
					break;
                                /* 中略 */
				default:
					toDraw = TORNADO;
					break;
			}
			this.data.city = value.name,
			this.data.temp = value.main.temp + " F",
			this.data.condition = titleCase(value.weather[0].description),
			this.data.icon = toDraw
			application.first.delegate("onTransitionOut");
		}
	}
}
[examples/piu/neon-light](https://github.com/Moddable-OpenSource/moddable/tree/public/examples/piu/neon-light)

ネオンライト キラキラネオンライト 夜の秋に この街はライトでできています

(なぜか急に日本語が出てきたのでびっくりしました)


以上です。 今後、Moddableの開発方法を深堀りした記事をシリーズにしてお届けする予定ですので、 この記事を見て興味がわいた方はぜひいいね!をお願いします:sunglasses:

次回の記事はhkambeさんの「Data Version Control(DVC)でデータ分析のモデル作成を再現可能にする」です。