Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
enebular(Node-RED)でLINE Bot開発 〜 MQTT・WebSocket...
Search
you(@youtoy)
PRO
October 28, 2020
Technology
0
7.9k
enebular(Node-RED)でLINE Bot開発 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜 / Visual Programming IoTLT vol5
you(@youtoy)
PRO
October 28, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
140
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
190
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
400
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Gamification - CAS2011
davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
The Language of Interfaces
destraynor
158
25k
BBQ
matthewcrist
89
9.7k
Transcript
enebular(Node-RED)でLINE Bot開発 2020年10月28日 (水) ビジュアルプログラミングIoTLT vol5 @オンライン 豊田 陽介 (
@youtoy ) 〜 MQTT・WebSocketでサービス・アプリ間をつなぐ 〜
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ガジェット好き その他
主催テーマ: ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど ビジュアルプログラミングIoTLT vol5 @オンライン
今月はイベントが盛りだくさんだった! スマートスピーカーを遊びたおす会 運営 Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交 流会 コラボ 主催(コラボ)・
講師 オンラインLTハックLT 共同主催・ 登壇 Maker Faire Tokyo 2020 共同主催コミュ ニティブース・ 作品出展
ビジュアルプログラミングが大活躍! Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ オンラインLTハックLT Maker Faire Tokyo
2020 toio用のビジュアル プログラミング enebular、 Node-RED UIFlow、 enebular、 Node-RED
界隈の気になる話題! 新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 @オンライン
界隈の気になる話題! UIFlowのファームウェア M5Stack Core2 用の正式版リリース ビジュアルプログラミングIoTLT vol5 @オンライン
LINEとつないだ アプリ・サービス?
デモ動画1: アプリ外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc ビジュアルプログラミングIoTLT vol5 @オンライン
デモ動画2:コメント表示+合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& ビジュアルプログラミングIoTLT vol5 @オンライン
いったん、これまでのデモの補足 仕組みについてなど ビジュアルプログラミングIoTLT vol5 @オンライン Qiitaの記事もあるよ
全体構成(外部からのOBS操作) 画面タップで シーン変更命令 (UIFlow実装) シーン変更命令を 受信しOBSへ (Node.js実装) MQTT WebSocket M5Stack
PC OBS ビジュアルプログラミングIoTLT vol5 @オンライン
ビジュアルプログラミングIoTLT vol5 @オンライン 全体構成(ニコニコ動画風コメント表示+音) Webサイト上の ボタン押下で メッセージ送信 MQTT PC グリーンバックの
ページ上にテキス ト・絵文字を流す OBS ブラウザ スマホ等 PC上の画面や カメラ映像を 合成 効果音を再生
(既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど 独自実装なので、好きな機能を足せる! Qiitaの記事で複数掲載 オンラインLTハックLT @オンライン
LINEアプリ連携! (LINE Bot開発との組み合わせ) ビジュアルプログラミングIoTLT vol5 @オンライン 既存サービスにない機能
デモ動画3:LINEアプリからOBSを操作 https://www.youtube.com/watch?v=K2A2sBlboHU ビジュアルプログラミングIoTLT vol5 @オンライン
デモ動画4:画面を流す文章をLINEで入力 https://www.youtube.com/watch?v=zXj-Cy7aM94 ビジュアルプログラミングIoTLT vol5 @オンライン
全体構成(LINEアプリ連携のバージョン1) LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP
リクエスト (POST) 受信したテキスト に合わせて処理を 場合分け ビジュアルプログラミングIoTLT vol5 @オンライン
利用したNode-REDのノード ビジュアルプログラミングIoTLT vol5 @オンライン 以下のAPIを利用可能 ・LINE Messaging API ・Reply Message
・Push Message ・LINE Notify Maintainers ・n0bisuke
主な追加実装部分(バージョン1) ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け 受信したテキストの格納先
主な追加実装部分(バージョン1) ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリ上で 入力された内容に よって場合分け OBSの遠隔 操作用の流れ ニコニコ動画風の
コメント表示機能 と連携する流れ
さらに追加実装
主な追加実装部分(バージョン2) ビジュアルプログラミングIoTLT vol5 @オンライン 返信をオウム返しではなく 何を実行するのか示す内容に
主な追加実装部分(バージョン2) ビジュアルプログラミングIoTLT vol5 @オンライン バージョン1からの主な差分 (メッセージの加工とリプライ)
終わる前に
ビジュアルプログラミングなハンズオンイベント ビジュアルプログラミングIoTLT vol5 @オンライン 明後日 10/30(金)開催!(※ 事前準備が必要です) 【Voiceflow】 ビジュアルプログラミング でAlexaスキル開発!
終わり!