Postman Flowsで作るAPI連携LINE Bot

2024/11/25 Postman API Night Nagoya 2024 Fall
https://postman.connpass.com/event/332171/

1. Postman Flowsで作るAPI連携LINE Bot Koki Miura(@k_miura_io)
2. 自己紹介 • 三浦 耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋＆神戸 運営 • Cloudflare Meetup 名古屋 運営 @k_miura_io koki.miura05
3. アジェンダ • 自己紹介 • イントロダクション • Postman Flowsについて • LINE botの紹介 • デモ
4. API Night Nagoya初開催！
5. 2024年9月 Serverless Days Tokyo
6. Postman API Night を名古屋に誘致
7. 2日目のワークショップにて
8. ワークショップ のシナリオ
9. Postman Flowsを始めて触った
10. Postman Flowsとは？ • Postmanで作成したAPIコレクションのリクエストを組み合わせて ノーコードでワークフローが作成できるツール • 作成したワークフローをWebhookで起動することができる
11. ん、Webhook？
12. LINE botって？ • LINE上でメッセージのやり取りを行うbot • 自前でWebhookサーバーを立てることでLINE のプラットフォームからWebhookが飛んでくる • サーバーは受け取ったイベントに対してLINE のMessaging APIを使って返信を行う • Webhookなのでサーバーのレスポンスに決ま りがない
13. これができる！
14. というわけで作ってみた • BotのHelloWorld的存在のオウム返しボット • ユーザーが送ったメッセージをそっくりそのまま返す • テキストメッセージ以外(画像、スタンプなど)はオウ ムがえしに対応しないので、そのメッセージも返すよ うにしている
15. DEMO
16. 全体のフロー
17. 条件分岐 • メッセージの条件分岐にはFQL（Flows Query Language）を使用 • 条件文を記述することで下部のデータの 方向を決める • FQLは独自の言語なので、迷ったら Snippetsから選択して書き換えるのもあり (この条件もSnippetsを参照)
18. Webhookのボ ディをAPIのリク エストパラメー タにいれる • リクエストパラメータにWebhookから受け取る値を入 れたいときは、リクエストの中に変数を設定しておく • ここではreplyTokenとmessageを変数として設定して いる
19. フローから来たJSONから値を取り出す • APIのリクエストで設定した変数に入力され たWebhookから来たJSONを流し込むと変数 が格納される • 各変数に格納したい値をJSONのキーを直 接指定するとその値がリクエストに使われる • CHANNEL_ACCESS_TOKENはコレクション の変数として設定しているのでここには線を つなげていない
20. 更に改良する • Postmanを使っているので他のAPIと連携したLINE Botにアレンジをしていく(タイトル回収) • GoogleのVision APIと連携してユーザーが送信し た画像に映り込んだロゴの会社を検出するボット にアレンジしていく
21. 全体のフロー
22. 追加で使用しているAPI • 自作API • Vision API
23. 自作API • LINEのAPIで画像取得をするとバ イナリで取得されるため、Flowsで 扱うにはbase64でエンコードしない といけない • Flows内でTypeScriptを使ってエン コードをやろうとしたが、ワークフ ローの規模がでかいのか落ちた (アップデートに期待) • 仕方なくCloudflare Workersで画像 取得APIを叩いて取得したレスポン スをbase64で返す自前APIを用意
24. Vision API • よく知られるプロダクトのロゴを画像から検出 するGoogleのAPI • 入力画像をbase64形式で指定できるのが直 感的で、Flows内でリクエストもやりやすい • 右のように検出範囲を画像で出力できるが、 今回は検出したプロダクト名をテキストに返す ように修正
25. DEMO2
26. 変数を格納 • タスクの出力を他のタスクで使いまわした いときは変数に格納すると確実 • 「Create Variable」ブロックをStartブロック につないでおくことで他のタスクで Webhookのボディを使い回せる
27. 変数を使う • 「Get Variable」ブロックを配置し、使用したいタスクに 向けて線を引くと格納した変数を使い回すことができる • ただフローを流すだけじゃない方法で使いたい値を呼び 出せるので覚えておくと便利！
28. まとめ • Postman Flowｓを使うことでWebhookを使ったイベントドリブンのワーク フローを組むことができる • LINE Messaging APIのようなWebhookのイベントから受け取る値を使う 前提のAPIの動作確認をする時に使える • 慣れないと変数の扱いとかで詰まるが、そこさえわかってしまえばアイ デア次第でいろんなワークフローを組めるようになるはず
29. 今回紹介したデモの記事 https://bit.ly/3YZCrLj
30. END