Moddableで始めるJavaScript×IoT開発

Moddableで始める JavaScript × IoT開発あるフロントエンドエンジニアの場合ししかわ @meganetaaan https://meganetaaan.github.io/

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

Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと

Moddableとは • JavaScriptでIoTアプリケーションが作れるプラットフォーム • M5Stack/M5StickCにも対応している https://www.moddable.com/

背景： ArduinoでIoTを始めたフロントエンドエンジニアの悩みいっぱいセンサとかモータまわして低レイヤつよつよになるぞ～

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

悩み2：凝ったUIが作れなくて、もんもんとする • 普段Webブラウザ越しのこういう ↓ 画面を見慣れている https://experience.soletanche-bachy.com/en/T219-metro-singapore • 画面に映えが足りない… 積む… 夜の砂漠のように
荒涼としている

Moddableなら… C/C++がわからない… JavaScriptが使える！凝ったUIが作れない… 画像も音声もタッチ入力も自在！つまない！！

Moddableの特徴*2

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

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

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

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

実際

Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと（再掲）

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

作品自慢します！

作例1：たたけ！ボンゴキャット https://github.com/meganetaaan/moddable-examples/ • ボタンを押す→ニャーンと鳴く • MACアドレスを使って背景色算出 →端末によって色とりどりのキャット音声 C API
画像（PNG）

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

作例3：Twitterクライアント https://github.com/meganetaaan/moddable-examples/ • M5Stack単体でちゃんと動くTwitterクライアント • Twitterのタイムライン取得APIを正規の方法で叩いている JSON HTTP トランジション
文字（日本語）

作例4：ポモドーロタイマー https://github.com/meganetaaan/moddable-examples/ • パーティーパロットが回ることで仕事への意欲が不思議とアガるタイマー • 残り時間が少なくなると回転速度もアガる画像（gif） Timer

作例5：息子ロボ https://github.com/meganetaaan/moddable-examples/ • 息子のスケッチがツボにはまったので作った • M5ATOMでマイクロサーボを駆動 PWM NeoPixel

作例6：PLEN5Stackの制御 https://github.com/meganetaaan/moddable-plen5stack/ • PLEN5Stack拡張ボードとI2C通信 • 音声はGoogleCloudTTSで生成 →piuの音声再生機能で再生 • TypeScriptで制御された世界初の2足歩行ロボット（自称）
I2C 音声

早く作って公開できるたくさんフィードバックがもらえる知識が付く JavaScriptなら

つまり

Moddableはいいぞ！ #M5Stack_UGjp お伝えしたいこと（再掲）

宣伝：ModdableコミュニティのDiscordあります Moddable Developers Japan https://discord.com/invite/trX3udZ

Moddableで始めるJavaScript×IoT開発

Moddableで始めるJavaScript×IoT開発

Shinya Ishikawa

More Decks by Shinya Ishikawa

Other Decks in Technology

Featured

Transcript