MonacaUG OKAYAMA#5 M5StickCとMonacaで遊んでみた！

1. M5StickC とMonaca
で遊んでみた!
2019/09/27
MonacaUG OKAYAMA #5

2. 自己紹介
末房 伸也（Suefusa Shinya）
@ShinyaSuefusa
ピープルソフトウェア株式会社
西日本事業部 所属
最近の好きな言語：Python
学生時代好きだったゲーム： Final Fantasy V
ここ数年のMyブーム：IoTをハイブリッドアプリに持ち込む

3. はじめに
今回の発表は 2019年9月16日 に開催された、
第2回 IoT勉強会 in 岡山
で発表した内容を、
Monaca（スマホアプリ）にトランスパイル
したネタです。
なので、Monacaはちょっとしか出てきません。

4. せっかくなので、
一緒に楽しく
Monaca × IoT を
勉強していきましょう！

5. 2019年5月
IoTLT Osaka Vol.11にて
「技適ありM5StickCでLINE Things
やってみた (M5StickC)」
by がおまる さん

6. https://youtu.be/4KzJmxBHoHQ

7. こいつはすげぇ
○×
×

8. M5StickCの主なスペック
• 2019年４月発売（国内は5月から）
• 80x160 TFT 液晶
• 加速度センサ & ジャイロセンサ
• ボタン３つ
• WiFi & Bluetooth
• バッテリー内臓
• C言語 / Python などでプログラム可能
• 2,000円くらい（ただし、入手困難）

9. ポチっと
な

10. （無事ゲットするも）
一瞬で売り切れる！

11. そして
放置すること３か月

12. M5StickCで
簡単なゲーム作ってみました。

13. 必要なもの
•M5StickC×1個
•パソコン×１台

14. しくみ
ジャイロセンサーの
情報を送信
ブラウザの
WebBluetoothで
受信

15. つくりかた（デバイス編）
•ArduinoIDE
•ジャイロセンサの値取得
•傾き位置を９マスにあてはめ、
BLEで送信

16. BLEの初期化（ネットのコピペ）

17. センサーから傾きの方向を計算（適当）

18. BLEに値をセット＆通知

19. つくりかた（HTML画面編）
•WebStorm（VSCodeでも可）
• Vue.jsでUI作成
• WebBluetoothで受信した傾き(位置)
に応じてCSSアニメーション

20. BLEの初期化（ネットのコピペ）

21. HTML部分はわずか23行

22. 堂々の完成！
理
想
現
実

23. DEMO
の前に。

24. もう既にご想像の通り、
ブラウザ版をMonacaに
トランスパイルしてやった。

25. WebBluetoothは使えないので、
cordova-plugin-ble-central
を使用。

27. （ここ重要）
2時間で
ブラウザアプリ
から
スマホアプリ
へ

28. ということで
DEMO

29. 良き Monaca × IoT ライフを！

30. おしまい