Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

個人で手軽に ブラウザやビジュアルプログラミングでIoT 2022年12月14日 (水) TechFeed Experts Night#10 〜 イマドキのIoTを支える技術 @オンライン 豊田陽介（ ） @youtoy

Slide 3

Slide 3 text

自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 （共著） 7月発売 （単著）

Slide 4

Slide 4 text

大垣のメーカーフェアの会場の来場者の方から 複数の方に「Twitter で光学迷彩・透明マントやってる人ですよね」と言われた ブラウザ上での機械学習と描画処理を 使ったもの（MediaPipe Hands による 手の認識と、p5.js を使った描画）

Slide 5

Slide 5 text

自己紹介：書籍で書いた内容関連 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 （共著） 7月発売 （単著） ブラウザ上でできる機械学習 や描画との組み合わせの話 ビジュアルプログラミング ＋ IoT の話の作例

Slide 6

Slide 6 text

スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です

Slide 7

Slide 7 text

今日の話の方向性

Slide 8

Slide 8 text

こういった構成を個人で手軽に試す 何らかの入力 インター ネット モノ モノ インター ネット 何らかの出力

Slide 9

Slide 9 text

「ちょっと試してみる」くらい のレベル感の内容を

Slide 10

Slide 10 text

個人で試しやすい IoT向けデバイス

Slide 11

Slide 11 text

先ほどの話でココに出てた

Slide 12

Slide 12 text

M5Stack社のデバイス（のごく一部） どんどん発売される、Wi-Fi にもつながる多種多様なデバイス群 産業用 切手サイズ USB メモリ型 防水型 電子ペー パー搭載 AIカメラ AWS 連携 スティッ ク型

Slide 13

Slide 13 text

M5Stack社のモジュール（のごく一部） センサーからアクチュエーターまで様々 計量 CO2、温湿度 非接触温度 カード型キーボード RFID フルカラーLED ジョイスティック 空気圧 心拍 モーター

Slide 14

Slide 14 text

直近でも新製品が どんどん出てきている

Slide 15

Slide 15 text

うちに大量にあります

Slide 16

Slide 16 text

うちにあるもののごく一部の写真 全部集めて写真を撮ろうとして、早々に諦めた状況のもの

Slide 17

Slide 17 text

オススメな理由

Slide 18

Slide 18 text

M5Stack製品のオススメポイントの例 ● 本体は基本的に外装がついている ● デバイス・モジュールの種類が豊富 ● デバイス単体でもあれこれ活用できる ● 公式のモジュールの接続が手軽 ● Wi-Fi・Bluetoothが使えてIoT・近接通信も！ ● 開発環境もいろいろ ● M5Stack用のビジュアルプログラミング環境 ● 開発環境はブラウザで簡単アクセス ● 公式パーツを簡単に扱える ● HTTPリクエストや MQTT等のネットワーク系 　 処理や Bluetooth も扱える

Slide 19

Slide 19 text

日本のユーザコミュニティが あったり、技術記事なども多い

Slide 20

Slide 20 text

ビジュアルプログラミング のみでIoT （ちょっとした仕組みを複数実装）

Slide 21

Slide 21 text

LINE のリッチ メニューの操作 試作概要1： 通信方向「LINE⇒デバイス」 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 （全て実行） ① M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ②

Slide 22

Slide 22 text

試作概要2： 通信方向「デバイス⇒LINE」 M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ② LINE のリッチ メニューの操作 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 （全て実行） ①

Slide 23

Slide 23 text

デモ動画

Slide 24

Slide 24 text

技術の部分をざっくりと

Slide 25

Slide 25 text

機器やサービスの構成

Slide 26

Slide 26 text

Botサーバー ＋α BotサーバーからMQTTブローカー経由でIoT M5Paper LINE Notify HTTP（POST） HTTP（POST） MQTT MQTT HTTP （POST） M5StickC Plus M5Stack Core2 リッチメニュー の操作

Slide 27

Slide 27 text

（REST API、MQTT） M5Stack Core2 デバイスからHTTPリクエストでスマホ通知 M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）

Slide 28

Slide 28 text

クラウド実行環境 （HTTPトリガー） Botサーバー ＋α （REST API、MQTT） M5Stack Core2 全体像はこのような構成で M5StickC Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP（POST） HTTP（POST） MQTT MQTT HTTP（POST）

Slide 29

Slide 29 text

プログラムの実装

Slide 30

Slide 30 text

M5Stack系デバイスの実装：UIFlow ブロック型のビジュアルプログラミング

Slide 31

Slide 31 text

サーバーもビジュアルプログラミング 【スマホへの通知】 デバイス ⇒ LINE Notify LINE（Bot） ⇒ デバイス 【MQTTへのつなぎ】 Beebotteとの連携 実装はenebular

Slide 32

Slide 32 text

実装は全てブラウザベース （環境構築の手間は大幅削減）

Slide 33

Slide 33 text

最新ではないけれど 個人で手軽にIoTをやるのに 便利なMQTTブローカー

Slide 34

Slide 34 text

Beebotte 無料プランあり データを可視化 できるダッシュ ボード機能あり

Slide 35

Slide 35 text

shiftr.io 無料で利用できる デスクトップ版が ある（GUI・CLI） 無料プランあり ※ 1日6時間の稼働 　 で停止する

Slide 36

Slide 36 text

Beebotte・shiftr.ioに共通する話 ・クラウドで動く MQTTブローカー ・REST API あり（MQTT と HTTP 　リクエストを混在させられる） ・無料プランあり

Slide 37

Slide 37 text

自前で用意する場合の選択肢

Slide 38

Slide 38 text

自分はMQTT.jsをよく使っています ・MQTTブローカー 　の実装だけでなく 　クライアントの 　実装でも 　（Node.js、ブラウザ）

Slide 39

Slide 39 text

【余談】 M5Stack社のデバイスで 宅内通信 （今回の本筋と違う実装あり）

Slide 40

Slide 40 text

試作したもので実現しようとした内容 ・二酸化炭素濃度を計測 　⇒ 基準値以上/以下の値になったら 　　 お知らせ ・二酸化炭素濃度、温湿度のデータを 　可視化

Slide 41

Slide 41 text

IoTコンテスト用の試作の一部で活用 MQTT MQTT POST（HTTP リクエスト） 二酸化炭素 濃度の値 Azure Functions Azure IoT Hub LINE Notify LINE アプリ 二酸化炭素濃度の値を 見て、特定条件で通知 Azure Stream Analytics Power BI 宅内通知の仕組みを サクッと後で付け足し （音や光でお知らせ） センサーで取得 した値を可視化

Slide 42

Slide 42 text

【余談2】 日本での発売を待っている IoTに使えるデバイス

Slide 43

Slide 43 text

先ほどの話でココに出てた

Slide 44

Slide 44 text

Raspberry Pi Pico W 無線LAN機能搭載の安価なデバイス

Slide 45

Slide 45 text

ここは話す時間がなさそう...

Slide 46

Slide 46 text

ブラウザでデバイスを扱うAPIが楽しい！ で外部デバイスとの通信 ブラウザの API でモノとインターネットをつなぐ 　・Web Serial 　・Web Bluetooth 　・Gamepad API 　・WebHID 　・Web MIDI API シリアル通信 　 BLE 　 コントローラーなど MIDIデバイス （試作や展示用作品に使ってたりするものも）

Slide 47

Slide 47 text

終わり！