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
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Mon...
Search
you(@youtoy)
PRO
April 20, 2022
Technology
0
3.7k
ビジュアルプログラミングのみで作る LINE + IoT の仕組み / LINE DC Monthly LT #1
you(@youtoy)
PRO
April 20, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
10
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
540
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
8.8k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
4.2k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
450
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
200
ガチな登山用デバイスからこんにちは
halka
1
210
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
420
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
210
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
630
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Scaling GitHub
holman
463
140k
How GitHub (no longer) Works
holman
315
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Embracing the Ebb and Flow
colly
87
4.8k
Designing Experiences People Love
moore
142
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Producing Creativity
orderedlist
PRO
347
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Mobile First: as difficult as doing things right
swwweet
224
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
ビジュアルプログラミングのみで作る LINE + IoT の仕組み 2022年4月20日 (水) LINE DC Monthly
LT #1 @オンライン 豊田陽介( ) @youtoy
自己紹介 ビジュアルプログラミング IoTLT共同主催、その他にも 豊田陽介( ) 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動(IT系以外も) ・技術書・技術記事の執筆も(IoT関連など)
プライベートでの活動 ・ Microsoft MVP(2021/10 から) ・ガジェット好き その他
作ったものの 動作概要・動画
LINE のリッチ メニューの操作 動作概要: 通信は「LINE⇒デバイス」 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行)
① M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ②
動作概要: 通信は「デバイス⇒LINE」 M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ② LINE
のリッチ メニューの操作 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行) ①
デモ動画
どんな技術を 使っている?
主なキーワード: LINE Bot、リッチメニュー、LINE Notify、 enebularのクラウド実行環境、Node-RED、 M5Stack・UIFlow、Beebotte・MQTT
Botサーバー +α 構成①: LINEからデバイスへ M5Paper LINE Notify HTTP(POST) HTTP(POST) MQTT
MQTT HTTP(POST) M5StickC Plus M5Stack Core2 リッチメニュー の操作
Botサーバー +α BeebotteでHTTP(POST)をMQTTに M5Paper LINE Notify HTTP(POST) HTTP(POST) MQTT MQTT
HTTP (POST) M5StickC Plus M5Stack Core2 リッチメニュー の操作
(REST API、MQTT) M5Stack Core2 構成②: デバイスからLINEへ M5StickC Plus M5Paper LINE
Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 作ったものの構成(全体) M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
詳細を話す時間が なさそうなので
今日の話に関するQiitaの記事 enebular や Beebotte関連の話
(まだ公開しきれてない 記事も...)
ざっくりな内容説明: 設定・実装
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 LINE・enebular・Beebotte M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
LINE関連の設定: GUIベース LINE Messaging API LINE Notify リッチメニュー
enebularの実行環境の設定: GUI 今回のサーバー(HTTPトリガー) LINE・デバイスからの POST先の設定など
enebularでの実装(Node-RED) フロー型のビジュアルプログラミング LINE・デバイスからの POSTを受けての処理
enebularでの実装内容 デバイス ⇒ LINE Notify LINE(Bot) ⇒ デバイス Beebotteとの連携
Beebotteの設定: GUIベース MQTT・REST API を扱うための準備 enebular ⇄ デバイス のつなぎ役
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 M5Stack系のデバイス M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
M5Stack系デバイスでの実装(UIFlow) ブロック型のビジュアルプログラミング
M5StickC Plusでの実装内容1 MQTT関連の セットアップ 画面の初期化 まわり等
M5StickC Plusでの実装内容2 MQTT のサブスクライブ ↓ LEDテープ制御など 本体ボタン押下を ↓ LINE通知処理等
テキストプログラミングを 使わない「LINE+IoT」 の完成
センサー活用なども 考えていければ!
記事の執筆などについて 豊田陽介( ) 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動(IT系以外も) ・技術書・技術記事の執筆も(IoT関連など) プライベートでの活動 ・
Microsoft MVP(2021/10 から) ・ガジェット好き その他
LINE関連でQiitaに書いた記事 Qiitaで「line user:youtoy」で検索すると JavaScript、ビジュアルプログラミング関連で、 試しにサービスをつないでみた話が多い (Azure Functions、Azure IoT Hub、MIT App
Inventor、UIFlow、など)
ビジュアルプログラミング+IoT関連 先月出版された 本で作例を
終わり!