$30 off During Our Annual Pro Sale. View Details »

M5Stack Core2とUIFlowの「リモコン+」でお手軽IoT(仕組みをシンプルに試してみた) / IoTLT vol.102

M5Stack Core2とUIFlowの「リモコン+」でお手軽IoT(仕組みをシンプルに試してみた) / IoTLT vol.102

you(@youtoy)
PRO

August 22, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 2023年8月22日 (火)
    IoTLT vol.102 @初台ラボ
    豊田陽介( )
    @youtoy
    M5Stack Core2とUIFlowの「リモコン+」で
    お手軽IoT(仕組みをシンプルに試してみた)

    View Slide

  2. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・ビジュアルプログラミング/JavaScript
     とガジェットの組み合わせをよくやって
     いたりするかも
    好きなこと、他

    View Slide

  3. 既に利用されている方も
    多いと思われますが

    View Slide

  4. 今回扱う「リモコン+(Remote+)」とは?
    ■ M5Stack のデバイスとの間で、ネット越しの
      やりとりができるWebページを用意する機能
     ・M5Stack のサーバーを介したやりとり
     ・Webページとデバイスが紐づく(APIキーで紐づけ)
     ・Webページの URL は固有のものが発行される
    【公式の説明】Create a web page composed of controls through the Remote+
    function, which can be used to remotely control the M5Stack device. This
    page is associated with the API KEY of the device and will be stored in the
    M5 service for a long time, and a fixed access link is provided. Users can
    access and share device information or remotely control the device anytime
    and anywhere.

    View Slide

  5. こんなやりとりができる仕組み
    M5Stackの
    サーバー
    PC やスマホ
    (ブラウザ)
    M5Stack
    のデバイス
    データの
    送受信
    データの
    送受信

    View Slide

  6. つまり
    簡単にIoTができる!

    View Slide

  7. UIFlowのどこから使う?
    UIFlow のメニュー内の「リモコン+」より

    View Slide

  8. インターネット経由でのやりとりを試してみる
    M5Stackの
    サーバー
    PC やスマホ
    (ブラウザ)
    M5Stack
    のデバイス
    センサー
    のデータ
    値の表示
    (単体)

    View Slide

  9. ものすごくシンプルな内容で試してみた
    Webページ側は
    数値の表示のみ
    デバイス側は
    センサーの値
    の格納と表示

    View Slide

  10. 動作の様子
    M5Stack Core2 のセンサーの値をスマホ上でも表示

    View Slide

  11. 「リモコン+」の便利機能は他にも
    ■ Webページ上に様々な UI を用意して M5Stack の
      デバイスをリモートで操作できる
     (UIの例:ボタン、スライダー、ジョイスティック等)
    ■ M5Stack の IoT用データストレージ(EzData)を
      組み合わせたデータのグラフ表示
    今後の発表や Qiita の記事などで、引き続きこの話を
    扱っていければと!

    View Slide

  12. ※発表後にスライド追加:記事を書きました!

    View Slide

  13. IoTLT関連の
    イベント告知

    View Slide

  14. 登壇/参加の申し込み、お待ちしてます!
    【9/20】ビジュアルプログラミングIoTLT vol.15

    View Slide

  15. 終わり!

    View Slide