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

enebular(Node-RED)でLINE Bot開発 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜 / Visual Programming IoTLT vol5

enebular(Node-RED)でLINE Bot開発 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜 / Visual Programming IoTLT vol5

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

you(@youtoy)

October 28, 2020
Tweet

Transcript

  1. enebular(Node-RED)でLINE Bot開発 2020年10月28日 (水) ビジュアルプログラミングIoTLT vol5 @オンライン   豊田 陽介 (

    @youtoy ) 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜
  2. 豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ガジェット好き その他

    主催テーマ: ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど ビジュアルプログラミングIoTLT vol5 @オンライン
  3. 今月はイベントが盛りだくさんだった! スマートスピーカーを遊びたおす会 運営 Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交 流会 コラボ 主催(コラボ)・

    講師 オンラインLTハックLT 共同主催・ 登壇 Maker Faire Tokyo 2020 共同主催コミュ ニティブース・ 作品出展
  4. ビジュアルプログラミングが大活躍! Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ オンラインLTハックLT Maker Faire Tokyo

    2020 toio用のビジュアル プログラミング enebular、 Node-RED UIFlow、 enebular、 Node-RED
  5. 界隈の気になる話題! 新micro:bit iOS用のNode-RED • Node-PAD on the App Store  

    https://apps.apple.com/us/app/node-pad/id1534470128 •micro:bit のバージョンアップについて  https://switch-education.com/2020/10/13/ ビジュアルプログラミングIoTLT vol5 @オンライン
  6. 界隈の気になる話題! UIFlowのファームウェア M5Stack Core2 用の正式版リリース ビジュアルプログラミングIoTLT vol5 @オンライン

  7. LINEとつないだ アプリ・サービス?

  8. デモ動画1: アプリ外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc ビジュアルプログラミングIoTLT vol5 @オンライン

  9. デモ動画2:コメント表示+合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& ビジュアルプログラミングIoTLT vol5 @オンライン

  10. いったん、これまでのデモの補足 仕組みについてなど ビジュアルプログラミングIoTLT vol5 @オンライン Qiitaの記事もあるよ

  11. 全体構成(外部からのOBS操作) 画面タップで シーン変更命令 (UIFlow実装) シーン変更命令を 受信しOBSへ (Node.js実装) MQTT WebSocket M5Stack

    PC OBS ビジュアルプログラミングIoTLT vol5 @オンライン
  12. ビジュアルプログラミングIoTLT vol5 @オンライン 全体構成(ニコニコ動画風コメント表示+音) Webサイト上の ボタン押下で メッセージ送信 MQTT PC グリーンバックの

    ページ上にテキス ト・絵文字を流す OBS ブラウザ スマホ等 PC上の画面や カメラ映像を 合成 効果音を再生
  13. (既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど 独自実装なので、好きな機能を足せる! Qiitaの記事で複数掲載 オンラインLTハックLT @オンライン

  14. LINEアプリ連携! (LINE Bot開発との組み合わせ) ビジュアルプログラミングIoTLT vol5 @オンライン 既存サービスにない機能

  15. デモ動画3:LINEアプリからOBSを操作 https://www.youtube.com/watch?v=K2A2sBlboHU ビジュアルプログラミングIoTLT vol5 @オンライン

  16. デモ動画4:画面を流す文章をLINEで入力 https://www.youtube.com/watch?v=zXj-Cy7aM94 ビジュアルプログラミングIoTLT vol5 @オンライン

  17. 全体構成(LINEアプリ連携のバージョン1) LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP

    リクエスト (POST) 受信したテキスト に合わせて処理を 場合分け ビジュアルプログラミングIoTLT vol5 @オンライン
  18. 利用したNode-REDのノード ビジュアルプログラミングIoTLT vol5 @オンライン 以下のAPIを利用可能 ・LINE Messaging API  ・Reply Message

     ・Push Message ・LINE Notify Maintainers ・n0bisuke
  19. 主な追加実装部分(バージョン1) ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け 受信したテキストの格納先

  20. 主な追加実装部分(バージョン1) ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け OBSの遠隔 操作用の流れ ニコニコ動画風の

    コメント表示機能 と連携する流れ
  21. さらに追加実装

  22. 主な追加実装部分(バージョン2) ビジュアルプログラミングIoTLT vol5 @オンライン 返信をオウム返しではなく 何を実行するのか示す内容に

  23. 主な追加実装部分(バージョン2) ビジュアルプログラミングIoTLT vol5 @オンライン バージョン1からの主な差分 (メッセージの加工とリプライ)

  24. 終わる前に

  25. ビジュアルプログラミングなハンズオンイベント ビジュアルプログラミングIoTLT vol5 @オンライン 明後日 10/30(金)開催!(※ 事前準備が必要です) 【Voiceflow】 ビジュアルプログラミング でAlexaスキル開発!

  26. 終わり!