1 of 27

Moddableで始める

JavaScript × IoT開発

あるフロントエンドエンジニアの場合

ししかわ�@meganetaaan�https://meganetaaan.github.io/

2 of 27

ししかわ@meganetaaan

  • M5Stack-Avatar作者
  • 株式会社アールティ
    • フロントエンドエンジニア 兼 ロボットエンジニア見習い
  • M5Stack自慢大会へのエントリーを完全に忘れていたうっかりさん

やっちまったな！

3 of 27

Moddableはいいぞ！

#M5Stack_UGjp

お伝えしたいこと

4 of 27

Moddableとは

  • JavaScriptでIoTアプリケーションが作れるプラットフォーム
  • M5Stack/M5StickCにも対応している

https://www.moddable.com/

5 of 27

背景：

ArduinoでIoTを始めた

フロントエンドエンジニアの悩み

いっぱいセンサとかモータまわして

低レイヤつよつよになるぞ～

6 of 27

悩み1：C/C++がわからなくて、疲弊する

  • デバイス側で動くコードはC/C++
  • 組み込みの知識とCの文法を同時に学習する必要
  • 最初はArduinoのサンプルスケッチのコピペでなんとなく動くが
    • 応用が効かない
    • 何かトラブルがあったら自分で解決できない

！？！？？！？！？！？？！！？

詰む…

7 of 27

悩み2：凝ったUIが作れなくて、もんもんとする

  • 普段Webブラウザ越しのこういう↓�画面を見慣れている
  • 画面に映えが足りない…

https://experience.soletanche-bachy.com/en/T219-metro-singapore

積む…

夜の砂漠のように

荒涼としている

8 of 27

Moddableなら…

C/C++がわからない…

JavaScriptが使える！

凝ったUIが作れない…

画像も音声も�タッチ入力も自在！

つまない！！

9 of 27

Moddableの特徴*2

10 of 27

極小JavaScriptエンジン「XS」

  • ModdableのコアとなるJavaScriptエンジン
  • RAMが少ないマイコンでも動く
  • オフラインでも動く
  • 小さいのにECMAScriptの最新仕様をほぼ網羅

11 of 27

99.6%

ModdableのEcmaScript仕様適合率�https://github.com/tc39/test262�↓つまり�ChromeとかFirefoxと同じレベルで全部の文法が使えるってこと！

12 of 27

マイコン向けUIフレームワーク「piu」

  • Moddableに同梱のUIフレームワーク
  • モダンなUI構築のための機能が全部入り
    • ☑文字
    • ☑画像
    • ☑音声
    • ☑タッチ入力
      • （M5Core2が来れば…！）
    • ☑アニメーション/トランジション
    • ☑レスポンシブデザイン
    • ☑コンポーネント指向
    • ☑国際化対応

13 of 27

「良さそう」と思いましたか？

14 of 27

実際

15 of 27

Moddableはいいぞ！

#M5Stack_UGjp

お伝えしたいこと（再掲）

16 of 27

前置きが長くなりましたが

17 of 27

作品自慢します！

18 of 27

作例1：たたけ！ボンゴキャット

https://github.com/meganetaaan/moddable-examples/

  • ボタンを押す→ニャーンと鳴く
  • MACアドレスを使って背景色算出�→端末によって色とりどりのキャット

音声

C API

画像

（PNG）

19 of 27

作例2：ゲーミング板

  • ゲーミング概念を板状に固めたもの
  • NeoPixel（WS2812B）

NeoPixel

20 of 27

作例3：Twitterクライアント

https://github.com/meganetaaan/moddable-examples/

  • M5Stack単体でちゃんと動くTwitterクライアント
  • Twitterのタイムライン取得APIを正規の方法で叩いている

JSON

HTTP

トランジション

文字

（日本語）

21 of 27

作例4：ポモドーロタイマー

https://github.com/meganetaaan/moddable-examples/

  • パーティーパロットが回ることで仕事への意欲が不思議とアガるタイマー
  • 残り時間が少なくなると回転速度もアガる

画像

（gif）

Timer

22 of 27

作例5：息子ロボ

https://github.com/meganetaaan/moddable-examples/

  • 息子のスケッチがツボにはまったので作った
  • M5ATOMでマイクロサーボを駆動

PWM

NeoPixel

23 of 27

作例6：PLEN5Stackの制御

https://github.com/meganetaaan/moddable-plen5stack/

  • PLEN5Stack拡張ボードとI2C通信
  • 音声はGoogleCloudTTSで生成�→piuの音声再生機能で再生
  • TypeScriptで制御された�世界初の2足歩行ロボット（自称）

I2C

音声

24 of 27

早く作って

公開できる

たくさん

フィードバックが

もらえる

知識が付く

JavaScriptなら

25 of 27

つまり

26 of 27

Moddableはいいぞ！

#M5Stack_UGjp

お伝えしたいこと（再掲）

27 of 27

宣伝：ModdableコミュニティのDiscordあります

Moddable Developers Japan�https://discord.com/invite/trX3udZ