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

ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1

ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1

you(@youtoy)

April 20, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. ビジュアルプログラミングのみで作る
    LINE + IoT の仕組み
    2022年4月20日 (水)
    LINE DC Monthly LT #1 @オンライン
    豊田陽介( )
    @youtoy

    View Slide

  2. 自己紹介
    ビジュアルプログラミング
    IoTLT共同主催、その他にも
    豊田陽介( )
    普段は、某通信会社勤務
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動(IT系以外も)
    ・技術書・技術記事の執筆も(IoT関連など)
    プライベートでの活動
    ・ Microsoft MVP(2021/10 から)
    ・ガジェット好き
    その他

    View Slide

  3. 作ったものの
    動作概要・動画

    View Slide

  4. LINE のリッチ
    メニューの操作
    動作概要: 通信は「LINE⇒デバイス」
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで音の再生
    (全て実行)

    M5Stack系の
    デバイスで
    ボタン押下
    LINE Notify でメッセージ通知

    View Slide

  5. 動作概要: 通信は「デバイス⇒LINE」
    M5Stack系の
    デバイスで
    ボタン押下
    LINE Notify でメッセージ通知

    LINE のリッチ
    メニューの操作
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで音の再生
    (全て実行)

    View Slide

  6. デモ動画

    View Slide

  7. どんな技術を
    使っている?

    View Slide

  8. 主なキーワード:
    LINE Bot、リッチメニュー、LINE Notify、
    enebularのクラウド実行環境、Node-RED、
    M5Stack・UIFlow、Beebotte・MQTT

    View Slide

  9. Botサーバー
    +α
    構成①: LINEからデバイスへ
    M5Paper
    LINE Notify
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)
    M5StickC
    Plus
    M5Stack
    Core2
    リッチメニュー
    の操作

    View Slide

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

    View Slide

  11. (REST API、MQTT)
    M5Stack
    Core2
    構成②: デバイスからLINEへ
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

  12. クラウド実行環境
    (HTTPトリガー)
    Botサーバー
    +α
    (REST API、MQTT)
    M5Stack
    Core2
    作ったものの構成(全体)
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

  13. 詳細を話す時間が
    なさそうなので

    View Slide

  14. 今日の話に関するQiitaの記事
    enebular や Beebotte関連の話

    View Slide

  15. (まだ公開しきれてない
    記事も...)

    View Slide

  16. ざっくりな内容説明:
    設定・実装

    View Slide

  17. クラウド実行環境
    (HTTPトリガー)
    Botサーバー
    +α
    (REST API、MQTT)
    M5Stack
    Core2
    LINE・enebular・Beebotte
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

  18. LINE関連の設定: GUIベース
    LINE Messaging API
    LINE Notify
    リッチメニュー

    View Slide

  19. enebularの実行環境の設定: GUI
    今回のサーバー(HTTPトリガー)
    LINE・デバイスからの
    POST先の設定など

    View Slide

  20. enebularでの実装(Node-RED)
    フロー型のビジュアルプログラミング
    LINE・デバイスからの
    POSTを受けての処理

    View Slide

  21. enebularでの実装内容
    デバイス ⇒ LINE Notify
    LINE(Bot) ⇒ デバイス
    Beebotteとの連携

    View Slide

  22. Beebotteの設定: GUIベース
    MQTT・REST API を扱うための準備
    enebular ⇄ デバイス
    のつなぎ役

    View Slide

  23. クラウド実行環境
    (HTTPトリガー)
    Botサーバー
    +α
    (REST API、MQTT)
    M5Stack
    Core2
    M5Stack系のデバイス
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)

    View Slide

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

    View Slide

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

    View Slide

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

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

    LINE通知処理等

    View Slide

  27. テキストプログラミングを
    使わない「LINE+IoT」
    の完成

    View Slide

  28. センサー活用なども
    考えていければ!

    View Slide

  29. 記事の執筆などについて
    豊田陽介( )
    普段は、某通信会社勤務
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動(IT系以外も)
    ・技術書・技術記事の執筆も(IoT関連など)
    プライベートでの活動
    ・ Microsoft MVP(2021/10 から)
    ・ガジェット好き
    その他

    View Slide

  30. LINE関連でQiitaに書いた記事
    Qiitaで「line user:youtoy」で検索すると
    JavaScript、ビジュアルプログラミング関連で、
    試しにサービスをつないでみた話が多い
    (Azure Functions、Azure IoT Hub、MIT App Inventor、UIFlow、など)

    View Slide

  31. ビジュアルプログラミング+IoT関連
    先月出版された
    本で作例を

    View Slide

  32. 終わり!

    View Slide