Postman Flowsで作るAPI連携LINE Bot

Postman Flowsで作るAPI連携LINE Bot Koki Miura(@k_miura_io)

自己紹介 • 三浦耕生(こうき) • Acallのバックエンドエンジニア • JAWS UG名古屋＆神戸運営
• Cloudflare Meetup 名古屋運営 @k_miura_io koki.miura05

アジェンダ • 自己紹介 • イントロダクション • Postman Flowsについて • LINE
botの紹介 • デモ

API Night Nagoya初開催！

2024年9月 Serverless Days Tokyo

Postman API Night を名古屋に誘致

2日目のワークショップにて

ワークショップのシナリオ

Postman Flowsを始めて触った

Postman Flowsとは？ • Postmanで作成したAPIコレクションのリクエストを組み合わせてノーコードでワークフローが作成できるツール • 作成したワークフローをWebhookで起動することができる

ん、Webhook？

LINE botって？ • LINE上でメッセージのやり取りを行うbot • 自前でWebhookサーバーを立てることでLINE のプラットフォームからWebhookが飛んでくる • サーバーは受け取ったイベントに対してLINE のMessaging
APIを使って返信を行う • Webhookなのでサーバーのレスポンスに決まりがない

これができる！

というわけで作ってみた • BotのHelloWorld的存在のオウム返しボット • ユーザーが送ったメッセージをそっくりそのまま返す • テキストメッセージ以外(画像、スタンプなど)はオウムがえしに対応しないので、そのメッセージも返すようにしている

全体のフロー

条件分岐 • メッセージの条件分岐にはFQL（Flows Query Language）を使用 • 条件文を記述することで下部のデータの方向を決める • FQLは独自の言語なので、迷ったら
Snippetsから選択して書き換えるのもあり (この条件もSnippetsを参照)

WebhookのボディをAPIのリクエストパラメータにいれる • リクエストパラメータにWebhookから受け取る値を入れたいときは、リクエストの中に変数を設定しておく • ここではreplyTokenとmessageを変数として設定している

フローから来たJSONから値を取り出す • APIのリクエストで設定した変数に入力されたWebhookから来たJSONを流し込むと変数が格納される • 各変数に格納したい値をJSONのキーを直接指定するとその値がリクエストに使われる • CHANNEL_ACCESS_TOKENはコレクション
の変数として設定しているのでここには線をつなげていない

更に改良する • Postmanを使っているので他のAPIと連携したLINE Botにアレンジをしていく(タイトル回収) • GoogleのVision APIと連携してユーザーが送信した画像に映り込んだロゴの会社を検出するボットにアレンジしていく

全体のフロー

追加で使用しているAPI • 自作API • Vision API

自作API • LINEのAPIで画像取得をするとバイナリで取得されるため、Flowsで扱うにはbase64でエンコードしないといけない • Flows内でTypeScriptを使ってエンコードをやろうとしたが、ワークフローの規模がでかいのか落ちた
(アップデートに期待) • 仕方なくCloudflare Workersで画像取得APIを叩いて取得したレスポンスをbase64で返す自前APIを用意

Vision API • よく知られるプロダクトのロゴを画像から検出するGoogleのAPI • 入力画像をbase64形式で指定できるのが直感的で、Flows内でリクエストもやりやすい • 右のように検出範囲を画像で出力できるが、
今回は検出したプロダクト名をテキストに返すように修正

変数を格納 • タスクの出力を他のタスクで使いまわしたいときは変数に格納すると確実 • 「Create Variable」ブロックをStartブロックにつないでおくことで他のタスクで Webhookのボディを使い回せる

変数を使う • 「Get Variable」ブロックを配置し、使用したいタスクに向けて線を引くと格納した変数を使い回すことができる • ただフローを流すだけじゃない方法で使いたい値を呼び出せるので覚えておくと便利！

まとめ • Postman Flowｓを使うことでWebhookを使ったイベントドリブンのワークフローを組むことができる • LINE Messaging APIのようなWebhookのイベントから受け取る値を使う前提のAPIの動作確認をする時に使える
• 慣れないと変数の扱いとかで詰まるが、そこさえわかってしまえばアイデア次第でいろんなワークフローを組めるようになるはず

今回紹介したデモの記事 https://bit.ly/3YZCrLj

Postman Flowsで作るAPI連携LINE Bot

Postman Flowsで作るAPI連携LINE Bot

KMiura

More Decks by KMiura

Other Decks in Technology

Featured

Transcript