enebularとUIFlowを連携して爆速IoTプロトタイピング！

2019/11/28 enebular deveroper Meetupに登壇した際のスライドです。

Transcript

1. enebular と UIFlow を
   連携して
   爆速IoTプロトタイピング
   enebular developer Meetup
   2019/11/28
   まえぷー
   

   View Slide

2. 自己紹介
   ・まえぷー
   ・職：組込みソフトエンジニア
   ・趣味でIoT電子工作
   ・Noodlもくもく会主催
   ＠kmaepu ＠kmaepu
   

   View Slide

3. IoTLTにて、
   「最近、難しいLT多くて初心者ネタ少ない」
   とのコメントがありました。
   このLTネタはIoT初心者向けなのでご了承ください。
   

   View Slide

4. UIFlowとは
   ・ M5Stackが提供しているビジュアルプログラミングツール
   ・ ビジュアルプログラミング言語BlocklyまたはPythonでコーディング
   ・ WebブラウザまたはローカルPCの環境で動作
   ・ M5Stack、M5Stick-Cに対応
   https://m5stack.github.io/UIFlow_doc/ja/
   

   View Slide

5. View Slide

6. MQTTとHttpが使えそう！！
   

   View Slide

7. 今回は技術レベルを下げたデモ！
   ・ Http → 気温表示
   ・ MQTT → IoTLチカ
   

   View Slide

8. デモ Http編
   My 天気の子 ver. M5Stack
   

   View Slide

9. Httpを利用するシチュエーション
   M5Stack
   http request
   HTTP
   エンドポイント
   気象データ
   取得
   でプログラム作成
   現在気温を返す
   

   View Slide

10. HTTPの基本構成 ～UIFlow
    

    View Slide

11. View Slide

12. デモ MQTT編
    LEDテープチカチカ
    

    View Slide

13. MQTTを利用するシチュエーション
    M5Stack
    でプログラム作成
    MQTT MQTT
    ON/OFFボタン
    を押す
    MQTTブローカ
    LEDテープ
    チカチカ
    

    View Slide

14. デモ
    

    View Slide

15. MQTTの基本構成 ～UIFlow
    初期設定
    データ受信
    

    View Slide

16. ボタン押す
    対応したデータが
    MQTTで送信される
    

    View Slide

17. ついでに...
    スマホから操作できるようにしてみました！
    「UI」と言えば、「Noodl」ですね。
    

    View Slide

18. まとめ
    ・ビジュアルプログラミングツールで動くものが爆速で作れる！
    ・enebularは面倒な環境構築の手間いらず！
    ・UIFLowはプログラミング初心者の方でも手を付けやすそう！
    【苦労した事】
    ・UIFLowで作成したプロジェクトの読み込みができない時がある
    ・UIFlowのWebエディタと実機とのコネクション途切れる時があった
    

    View Slide

19. 最後に
    本日の詳細な内容をQiitaが開催しているアドベントカレン
    ダーのenebular 12/7にアップします。
    UIFlowとeneblarで使用したソースコードは公開予定。Qiita
    にリンク張っておきます。
    

    View Slide