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.5k
ビジュアルプログラミングのみで作る 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)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
85
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
98
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
620
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
AIエージェント入門
minorun365
PRO
32
19k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
240
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
280
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
960
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.3k
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Building Adaptive Systems
keathley
40
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Making Projects Easy
brettharned
116
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
How STYLIGHT went responsive
nonsquared
99
5.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Agile that works and the tools we love
rasmusluckow
328
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
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関連 先月出版された 本で作例を
終わり!