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

LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6

LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6

you(@youtoy)

May 19, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. LINEアプリでIoTやってみた
    2022年5月19日 (木)
    エンジニアの自由研究発表会vol.6 @オンライン
    豊田陽介( )
    @youtoy

    View Slide

  2. 自己紹介
    ビジュアルプログラミングや
    IoT、ロボットトイ関連など
    豊田陽介( )
    普段は、某通信会社勤務
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ(IT系以外も)
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット好き
    ・6月にメーカーフェア@仙台に出展予定
    その他

    View Slide

  3. 作ったものの動作概要(LINE⇒デバイス)
    ① LINEアプリ
    で操作
    ②-1
    音が鳴る
    ②-2
    光る・表示
    が変わる

    View Slide

  4. 作ったものの動作概要(デバイス⇒LINE)
    ② 通知
    ①デバイス
    を操作

    View Slide

  5. あらためて動画で

    View Slide

  6. 研究報告1:
    LINEアプリで IoT をやってみて

    View Slide

  7. 便利だった点
    2つ

    View Slide

  8. リッチメニュー
    をタップ
    (簡単操作)
    1)ワンタップでできるデバイス操作
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで
    音の再生
    (全て実行)
    ① ② ③



    3通りの動作

    View Slide

  9. メニューの作成もGUIで簡単に
    リッチメニューの
    テンプレート選択
    メニュー内のボタン
    のデザイン作成

    View Slide

  10. 2)通知の仕組みを簡単に実装
    デバイスからの
    HTTPリクエスト
    LINE Notify でメッセージ通知

    View Slide

  11. LINE + IoT
    活用できそう!

    View Slide

  12. 研究報告2:
    LINEアプリで IoT をやるために

    View Slide

  13. サービス間をつなぐ

    View Slide

  14. 盛り込んだ内容:
    LINE Bot、リッチメニュー、LINE Notify、
    enebularのクラウド実行環境、Node-RED、
    M5Stack・UIFlow、Beebotte・MQTT

    View Slide

  15. LINE⇒デバイス
    をつないだ方法

    View Slide

  16. Botサーバー
    +α
    LINE⇒デバイスを実現した構成と通信
    M5Paper
    LINE Notify
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)
    M5StickC
    Plus
    M5Stack
    Core2
    HTTP(POST)
    リッチメニュー
    の操作

    View Slide

  17. リッチメニュー
    の操作
    Botサーバー
    +α
    BeebotteでHTTP(POST)をMQTTに
    M5Paper
    LINE Notify
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP
    (POST)
    M5StickC
    Plus
    M5Stack
    Core2
    HTTP(POST)

    View Slide

  18. 研究報告3:
    ビジュアルプログラミングの活躍

    View Slide

  19. サーバー実装

    View Slide

  20. enebularの実行環境(メインサーバー)
    LINE Botサーバー+外部連携

    View Slide

  21. enebularでの実装(Node-REDのフロー)
    デバイス ⇒ LINE Notify
    LINE(Bot) ⇒ デバイス
    Beebotteとの連携

    View Slide

  22. デバイス制御

    View Slide

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

    View Slide

  24. M5StickC Plusでの実装内容1
    MQTT関連の
    セットアップ
    画面の初期化
    まわり等

    View Slide

  25. M5StickC Plusでの実装内容2
    MQTT のサブスクライブ

    LEDテープ制御など
    本体ボタン押下を

    LINE通知処理等

    View Slide

  26. 今回の研究を
    支えたもの

    View Slide

  27. ガジェットの
    大人買い!?

    View Slide

  28. イベントのお知らせ

    View Slide

  29. ビジュアルプログラミングとIoTの話
    6/15(水)20時から!

    View Slide

  30. 終わり!

    View Slide