Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

Moddableとは

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

「JavaScriptでIoT」の夢

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

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

Moddableのすごいところ

ECMAScriptの仕様をほぼ満たしている

例えば前述の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はビルドツールだけでなくシミュレータとデバッガが付属します。

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

オープンソース

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

Moddableの始め方

環境構築

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

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

筆者は次の環境で動作を確認しています。
* Ubuntu 18.04 LTS
* M5Stack Core (gray)

サンプル実行

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

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

$ mcconfig -d -m -p esp32/m5stack

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

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

$ mcconfig -d -m -p lin

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

weather

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

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

// 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");
        }
    }
}

neon

examples/piu/neon-light

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

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


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

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

meganetaaan
夕焼けと歌とあなたと、まったり生活。「人と一緒に働くロボット」のUI/UXをつくっています。
https://meganetaaan.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした