Moddableで始めるJavaScript×IoT開発

M5Stackユーザーミーティング vol.8 の発表資料です。

Transcript

1. Moddableで始める JavaScript × IoT開発 あるフロントエンドエンジニアの場合 ししかわ @meganetaaan https://meganetaaan.github.io/
2. ししかわ@meganetaaan • M5Stack-Avatar作者 • 株式会社アールティ ◦ フロントエンドエンジニア 兼 ロボットエンジニア見習い • M5Stack自慢大会へのエントリーを完全に忘れていたうっかりさん やっちまったな！
3. Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと
4. Moddableとは • JavaScriptでIoTアプリケーションが作れるプラットフォーム • M5Stack/M5StickCにも対応している https://www.moddable.com/
5. 背景： ArduinoでIoTを始めた フロントエンドエンジニアの悩み いっぱいセンサとかモータまわして 低レイヤつよつよになるぞ～
6. 悩み1：C/C++がわからなくて、疲弊する • デバイス側で動くコードはC/C++ • 組み込みの知識とCの文法を同時に学習する必要 • 最初はArduinoのサンプルスケッチのコピペでなんとなく動くが ◦ 応用が効かない ◦ 何かトラブルがあったら自分で解決できない ！？！？？ ！？！？！ ？？！！？ 詰む…
7. 悩み2：凝ったUIが作れなくて、もんもんとする • 普段Webブラウザ越しのこういう ↓ 画面を見慣れている https://experience.soletanche-bachy.com/en/T219-metro-singapore • 画面に映えが足りない… 積む… 夜の砂漠のように 荒涼としている
8. Moddableなら… C/C++がわからない… JavaScriptが使える！ 凝ったUIが作れない… 画像も音声も タッチ入力も自在！ つまない！！
9. Moddableの特徴*2
10. 極小JavaScriptエンジン「XS」 • ModdableのコアとなるJavaScriptエンジン • RAMが少ないマイコンでも動く • オフラインでも動く • 小さいのにECMAScriptの最新仕様をほぼ網羅
11. 99.6% ModdableのEcmaScript仕様適合率 https://github.com/tc39/test262 ↓つまり ChromeとかFirefoxと同じレベルで全部の文法が使えるってこと！
12. マイコン向けUIフレームワーク「piu」 • Moddableに同梱のUIフレームワーク • モダンなUI構築のための機能が全部入り ◦ ☑文字 ◦ ☑画像 ◦ ☑音声 ◦ ☑タッチ入力 ▪ （M5Core2が来れば…！） ◦ ☑アニメーション/トランジション ◦ ☑レスポンシブデザイン ◦ ☑コンポーネント指向 ◦ ☑国際化対応
13. 「良さそう」と思いましたか？
14. 実際
15. Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと（再掲）
16. 前置きが長くなりましたが
17. 作品自慢します！
18. 作例1：たたけ！ボンゴキャット https://github.com/meganetaaan/moddable-examples/ • ボタンを押す→ニャーンと鳴く • MACアドレスを使って背景色算出 →端末によって色とりどりのキャット 音声 C API 画像 （PNG）
19. 作例2：ゲーミング板 • ゲーミング概念を板状に固めたもの • NeoPixel（WS2812B） NeoPixel
20. 作例3：Twitterクライアント https://github.com/meganetaaan/moddable-examples/ • M5Stack単体でちゃんと動くTwitterクライアント • Twitterのタイムライン取得APIを正規の方法で叩いている JSON HTTP トランジショ ン 文字 （日本語）
21. 作例4：ポモドーロタイマー https://github.com/meganetaaan/moddable-examples/ • パーティーパロットが回ることで仕事への意欲が不思議とアガるタイマー • 残り時間が少なくなると回転速度もアガる 画像 （gif） Timer
22. 作例5：息子ロボ https://github.com/meganetaaan/moddable-examples/ • 息子のスケッチがツボにはまったので作った • M5ATOMでマイクロサーボを駆動 PWM NeoPixel
23. 作例6：PLEN5Stackの制御 https://github.com/meganetaaan/moddable-plen5stack/ • PLEN5Stack拡張ボードとI2C通信 • 音声はGoogleCloudTTSで生成 →piuの音声再生機能で再生 • TypeScriptで制御された 世界初の2足歩行ロボット（自称） I2C 音声
24. 早く作って 公開できる たくさん フィードバックが もらえる 知識が付く JavaScriptなら
25. つまり
26. Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと（再掲）
27. 宣伝：ModdableコミュニティのDiscordあります Moddable Developers Japan https://discord.com/invite/trX3udZ