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

LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6

you（@youtoy）
May 19, 2022
Technology
0
150

LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6

you（@youtoy）

May 19, 2022
Tweet

More Decks by you（@youtoy）

See All by you（@youtoy）
M5Stack Core2とUIFlowの「リモコン+」でお手軽IoT（仕組みをシンプルに試してみた） / IoTLT vol.102
you
0
3.2k
Raspberry Pi Pico W を JavaScript で扱って IoT をやりたかった話 / IoTLT vol.101
you
0
160
APIレスポンスの情報を取り出して整形するためにtemplateノードを使った話 / Node-RED Park Vol.12
you
0
46
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow＋α〜 / IoTLT vol.100
you
0
360
Raspberry Pi Pico W とビジュアルプログラミングで IoT（BIPES での開発） / ビジュアルプログラミングIoTLT vol.14
you
0
160
Google I/O 2023で話されたWeb MLの話を紹介したい！ / IoTLT vol.99
you
0
180
OpenAI社のWhisper APIを使ってみた！ / ChatGPT研究会 第7弾 (ALGYAN)
you
0
570
ChatGPTを使って行われた試行錯誤の事例などに関する話 / TechFeed Experts Night#16
you
0
67
ChatGPT（GPT-4版）でIoTやってみた / IoTLT vol.97
you
0
450

Other Decks in Technology

See All in Technology
変化する組織の中で運用するフロントエンドエコシステム / Frontend Ecosystem in Organizational Changes
i524
1
220
Mutating Meetup with GraphQL
adavis
1
140
【初心者向け】まだ間に合う！ Hugging Face入門 -TransformersでAI推論&学習
tkhresk
3
590
できる！アクセシビリティ向上/droidkaigi2023-day2
nikkei_engineer_recruiting
0
870
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
11
4.9k
MagicPodで実現するE2Eテスト自動化
nozomiito
0
140
モチベーションサイクルという観点でQAをしよう
mixi_engineers
PRO
1
130
TypeScriptプロジェクトにスキーマ駆動開発を持ち込み、より型安全な世界へ
sansantech
PRO
1
410
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
11
28k
Introduction to mcl-wasm
herumi
1
290
DroidKaigi 2023
keiji
0
320
PhpStorm最新情報
AIとnew UI、便利プラグイン #phpcon_okinawa
yusuke
0
150

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Scaling GitHub
holman
455
140k
Git: the NoSQL Database
bkeepers
PRO
420
61k
Why Our Code Smells
bkeepers
PRO
329
56k
4 Signs Your Business is Dying
shpigford
172
21k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
36
22k
Clear Off the Table
cherdarchuk
81
300k
Pencils Down: Stop Designing & Start Developing
hursman
115
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
351
28k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
The Invisible Side of Design
smashingmag
292
49k

Transcript

  1. LINEアプリでIoTやってみた
    2022年5月19日 (木)
    エンジニアの自由研究発表会vol.6 @オンライン
    豊田陽介（ ）
    @youtoy

    View Slide

  2. 自己紹介
    ビジュアルプログラミングや
    IoT、ロボットトイ関連など
    豊田陽介（ ）
    普段は、某通信会社勤務
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ（IT系以外も）
    ・ Microsoft MVP（2021/10 から）
    プライベートでの活動
    ・ガジェット好き
    ・6月にメーカーフェア＠仙台に出展予定
    その他

    View Slide

  3. 作ったものの動作概要（LINE⇒デバイス）
    ① LINEアプリ
    で操作
    ②-1
    音が鳴る
    ②-2
    光る・表示
    が変わる

    View Slide

  4. 作ったものの動作概要（デバイス⇒LINE）
    ② 通知
    ①デバイス
    を操作

    View Slide

  5. あらためて動画で

    View Slide

  6. 研究報告1：
    LINEアプリで IoT をやってみて

    View Slide

  7. 便利だった点
    2つ

    View Slide

  8. リッチメニュー
    をタップ
    （簡単操作）
    1）ワンタップでできるデバイス操作
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで
    音の再生
    （全て実行）
    ① ② ③
    ①
    ②
    ③
    3通りの動作

    View Slide

  9. メニューの作成もGUIで簡単に
    リッチメニューの
    テンプレート選択
    メニュー内のボタン
    のデザイン作成

    View Slide

  10. 2）通知の仕組みを簡単に実装
    デバイスからの
    HTTPリクエスト
    LINE Notify でメッセージ通知

    View Slide

  11. LINE + IoT
    活用できそう！

    View Slide

  12. 研究報告2：
    LINEアプリで IoT をやるために

    View Slide

  13. サービス間をつなぐ

    View Slide

  14. 盛り込んだ内容：
    LINE Bot、リッチメニュー、LINE Notify、
    enebularのクラウド実行環境、Node-RED、
    M5Stack・UIFlow、Beebotte・MQTT

    View Slide

  15. LINE⇒デバイス
    をつないだ方法

    View Slide

  16. Botサーバー
    ＋α
    LINE⇒デバイスを実現した構成と通信
    M5Paper
    LINE Notify
    HTTP（POST）
    HTTP（POST）
    MQTT
    MQTT
    HTTP（POST）
    M5StickC
    Plus
    M5Stack
    Core2
    HTTP（POST）
    リッチメニュー
    の操作

    View Slide

  17. リッチメニュー
    の操作
    Botサーバー
    ＋α
    BeebotteでHTTP（POST）をMQTTに
    M5Paper
    LINE Notify
    HTTP（POST）
    HTTP（POST）
    MQTT
    MQTT
    HTTP
    （POST）
    M5StickC
    Plus
    M5Stack
    Core2
    HTTP（POST）

    View Slide

  18. 研究報告3：
    ビジュアルプログラミングの活躍

    View Slide

  19. サーバー実装

    View Slide

  20. enebularの実行環境（メインサーバー）
    LINE Botサーバー＋外部連携

    View Slide

  21. enebularでの実装（Node-REDのフロー）
    デバイス ⇒ LINE Notify
    LINE（Bot） ⇒ デバイス
    Beebotteとの連携

    View Slide

  22. デバイス制御

    View Slide

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

    View Slide

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

    View Slide

  25. M5StickC Plusでの実装内容2
    MQTT のサブスクライブ
    ↓
    LEDテープ制御など
    本体ボタン押下を
    ↓
    LINE通知処理等

    View Slide

  26. 今回の研究を
    支えたもの

    View Slide

  27. ガジェットの
    大人買い！？

    View Slide

  28. イベントのお知らせ

    View Slide

  29. ビジュアルプログラミングとIoTの話
    6/15（水）20時から！

    View Slide

  30. 終わり！

    View Slide