Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今回扱う「リモコン+(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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

IoTLT関連の イベント告知

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

終わり!