$30 off During Our Annual Pro Sale. View Details »

LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話

LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話

20221202_enebular meetup 年末恒例:自由研究発表会「LINE BOT のオウム返しと M5Stack からの受信を両対応したクラウド実行環境の仕組みを作ってみた話」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

1ft-seabass
PRO

December 02, 2022
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

  1. 20221202_enebular meetup 年末恒例:自由研究発表会
    LINE BOT のオウム返しと M5Stack からの受信を両対応し
    たクラウド実行環境の仕組みを作ってみた話
    ワンフットシーバス 田中正吾

    View Slide

  2. 私の話はスライドを後ほど共有します。
    話す内容に注力いただいて大丈夫です!

    View Slide

  3. 田中正吾(たなかせいご)
    屋号:ワンフットシーバス
    2004年よりフリーランス。以後、FLASH制作を
    中心にインタラクティブコンテンツを主に行い現
    在に至る。
    最近ではWEBフロントエンドをベースにしなが
    らも、情報とインターフェースが合わさるアプ
    ローチという視点でIoTやMixed Realityといった
    技術も取り入れながら活動しています。

    View Slide

  4. LINE BOT と M5Stack からの受信を
    両対応したクラウド実行環境の仕組みを作ってみた

    View Slide

  5. こんな仕組み
    enebular クラウド実行環境でつくった LINE BOT でシンプルオウム返しや
    M5Stack からボタン操作や起動をやりとりします
    M5Stack
    LINE BOT
    enebular
    クラウド実行環境
    スマホ
    オウム返し
    ボタン操作

    View Slide

  6. 早速デモしてみます!

    View Slide

  7. まず LINE BOT でオウム返し

    View Slide

  8. M5Stack でボタンを押すと
    Push Message で割り込みメッセージ
    起動時に Launched で、たとえば A ボタンを押すと Push A のメッセージが飛ぶ

    View Slide

  9. 実際の仕組み

    View Slide

  10. LINE Developers で LINE BOT の仕組みが
    すでに設定できている状態

    View Slide

  11. Discover Flow に
    すぐ動かせる仕組みをおきました
    https://enebular.com/discover/flow/528c15e2-abeb-4013-8068-65d5ae712fa5

    View Slide

  12. こちらをプロジェクトにインポートして

    View Slide

  13. プロジェクトに lcdp-toolkit ノードもインポート

    View Slide

  14. フローを編集します

    View Slide

  15. LINE BOT 設定 change ノードに設定
    LINE Developers で、今回の LINE BOT のチャネルシークレット・
    チャネルアクセストークン・ユーザーIDを反映

    View Slide

  16. 部分を
    チャネルシークレットに置き換え
    チャネル基本設定 > チャネルシークレット からコピーアンドペースト

    View Slide

  17. 部分を
    チャネルアクセストークンに置き換え
    Messaging API設定 > チャネルアクセストークン からコピーアンドペースト

    View Slide

  18. 部分を
    ユーザーIDに置き換え
    チャネル基本設 > ユーザーID からコピーアンドペースト

    View Slide

  19. 保存してフローは設定完了

    View Slide

  20. クラウド実行環境を一つ作って

    View Slide

  21. 今回の仕組みをデプロイ

    View Slide

  22. デプロイできたら設定に移動

    View Slide

  23. HTTP トリガーの URL
    重複しないようにランダム値をつけつつ設定

    View Slide

  24. HTTP トリガーをメモ
    M5Stack で使います

    View Slide

  25. LINE Developers の今回の LINE BOT で
    さきほどの HTTP トリガー URL を反映

    View Slide

  26. LINE BOT でオウム返しを一度検証
    長く起動してないと最初の起動が時間がかかり最初のメッセージの返答は 10 秒くらい待ちます

    View Slide

  27. M5Stack のソースコードは
    こちらのリポジトリに公開してます
    https://github.com/1ft-seabass/enebular-m5stack-simple-post

    View Slide

  28. プログラムをコピー
    enebular-m5stack-simple-post.ino

    View Slide

  29. プログラム内に Wi-Fi 設定を反映

    View Slide

  30. 今回送る enebular クラウド実行環境の URLを反映
    今回送る enebular クラウド実行環境の URL に /from/m5stack をつけたものを反映します

    View Slide

  31. M5Stack に書き込みます

    View Slide

  32. 起動すると早速 Launched! メッセージ

    View Slide

  33. ボタンを押すとメッセージされます

    View Slide

  34. 時間があればフローの流れの紹介

    View Slide

  35. アクセスする分岐が大事なところ

    View Slide

  36. req.url は /トリガーURL/ 以下追加パスで
    来るので / で split してトリガー名を動的取得
    トリガー名が変わっても値がちゃんと取得できる

    View Slide

  37. トリガー名が分かるので、これを元に
    追加パスに応じた分岐をしてます
    これで、M5Stack の特定アクセス以外はオウム返しができます

    View Slide

  38. エクストラ
    時間に余裕があれば
    ➔ なぜつくったか。LINE BOT のような通知がないと IoT つ
    ながったの分かりにくい問題。ログあるけど手順が多い。
    ➔ M5Stack からの値はどのように受けているか
    ➔ タイムアウトを15秒に長めにしてコールドスタート時に
    エラーにならないようにした話
    ➔ 重複しない トリガー名のランダム名の TIPS。Google に
    乱数ツールがある。
    ➔ シンプルな LINE BOT も公開予定です!

    View Slide

  39. まとめ
    ➔ パスによる分岐などだいぶ elebular クラウド開発環境と
    仲良くなれたのでよかった
    ➔ ナレッジをある程度まとめれたよかった
    ➔ このナレッジも出来ればブログにまとめる予定です!
    ➔ IoT 連携についてもクラウド開発環境で連携例を作れて今
    後も伝えやすそう
    ➔ LINE BOT と IoT の仕組みが融合して楽しい!

    View Slide