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

LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5

LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5

you(@youtoy)

November 25, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 2023年11月25日 (土)
    初心者・初登壇Welcome!LINEを使ったLT大会 #5 @オンライン
    豊田陽介( )
    @youtoy
    LINEでのコミュニケーションに
    マスコットキーホルダーを使ってみる

    View full-size slide

  2. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・機械学習・IoTの書籍を出版
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・ビジュアルプログラミング/JavaScript
     とガジェットの組み合わせをよくやって
     いたり、AI・機械学習系の内容も使って
     みていたり
    好きなこと、他

    View full-size slide

  3. まずは作品の紹介動画から(動作の様子を抜粋)
    LINEアプリとマスコット
    キーホルダーでやりとり
    (LINEアプリで IoT)

    View full-size slide

  4. システム構成
    スマホ
    (LINEアプリ)
    マスコット
    キーホルダー
    (+デバイス)

    View full-size slide

  5. LINEアプリでIoT
    という仕組み自体は...

    View full-size slide

  6. 通知・Botサーバーの部分の似た仕組みのもの
    LINE DC Monthly LT #1 - LINE de IoT「ものづくりを語ろう!」
    にて、少し違う実装のものは発表済み

    View full-size slide

  7. 詳細は公開済みの登壇スライドに

    View full-size slide

  8. LINE のリッチ
    メニューの操作
    以前作ったものの動作概要
    LEDテープの点灯、
    電子ペーパーの
    書きかえ
    デバイスで音の再生
    (全て実行)

    M5Stack系の
    デバイスで
    ボタン押下
    LINE Notify でメッセージ通知

    View full-size slide

  9. クラウド実行環境
    (HTTPトリガー)
    Botサーバー
    +α
    (REST API、MQTT)
    M5Stack
    Core2
    以前作ったものの構成(全体)
    M5StickC
    Plus
    M5Paper
    LINE Notify
    スマホのLINE
    アプリ
    リッチメニュー
    の操作
    HTTP(POST)
    HTTP(POST)
    MQTT
    MQTT
    HTTP(POST)
    【実装のポイント】
    ■ enebular(Node-RED)と
      UIFlowでの実装
    ■ MQTTとHTTPリクエストを
      混在させる構成で実現

    View full-size slide

  10. (発表では省略)前に作ったもののデモ動画

    View full-size slide

  11. 前にenebular実装だった部分は
    簡素化してNode.js実装にしつつ

    View full-size slide

  12. 今回のポイントの
    マスコットキーホルダーの部分は

    View full-size slide

  13. マスコットキーホルダーを介したやりとり

    View full-size slide

  14. 利用したデバイスが
    ちょっと特徴的かも

    View full-size slide

  15. マスコットキーホルダーに触れたかを判定
    薄いアクリルや布など
    が間にあっても触れた
    と判別できる

    View full-size slide

  16. いろいろなパターンの振動を生み出す
    今回の作品では全く活かせて
    いないけど、豊富な振動パターン
    を生み出すことが可能
    公式デモを試すとすごい!

    View full-size slide

  17. (本来は)微細な振動を使うとか
    ダイナミックな振動を使うとか
    お知らせパターンを作れそう

    View full-size slide

  18. VSCode の「built-in port forwarding」が便利
    ngrok でできることが VSCode標準機能でできる!

    View full-size slide

  19. 余談ですが...
    VSCode の「built-in port forwarding」の注目度は高かった
    記事がはてなブックマークの
    テクノロジーの人気トップに
    Qiitaの 9月の月間トレンド
    記事にランクイン

    View full-size slide

  20. また今後も
    「ガジェット + LINE」
    を何かやれればと

    View full-size slide

  21. 終わり!

    View full-size slide