Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

maepu
November 28, 2019

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

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

maepu

November 28, 2019
Tweet

More Decks by maepu

Other Decks in How-to & DIY

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