Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Postman Flowsで作るAPI連携LINE Bot
Search
KMiura
November 25, 2024
Technology
0
380
Postman Flowsで作るAPI連携LINE Bot
2024/11/25 Postman API Night Nagoya 2024 Fall
https://postman.connpass.com/event/332171/
KMiura
November 25, 2024
Tweet
Share
More Decks by KMiura
See All by KMiura
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
1.1k
Amazon Rekognitionを使ったインターホンハック
miura55
0
79
Pythonでルンバをハックしてみた
miura55
0
160
あなたの知らないクラフトビールの世界
miura55
0
350
Storage Browser for Amazon S3を触ってみた + α
miura55
0
220
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
210
あのボタンでつながるSORACOM
miura55
0
140
Lambdaと共に歩んだAWS
miura55
3
840
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた(リベンジ編)
miura55
0
260
Other Decks in Technology
See All in Technology
自動テストのコストと向き合ってみた
qa
1
220
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
310
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
100
Azure Well-Architected Framework入門
tomokusaba
1
350
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.2k
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.4k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
710
Where will it converge?
ibknadedeji
0
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
280
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Documentation Writing (for coders)
carmenintech
75
5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Building Adaptive Systems
keathley
43
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
For a Future-Friendly Web
brad_frost
180
9.9k
Building an army of robots
kneath
306
46k
Transcript
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的存在のオウム返しボット • ユーザーが送ったメッセージをそっくりそのまま返す • テキストメッセージ以外(画像、スタンプなど)はオウ ムがえしに対応しないので、そのメッセージも返すよ うにしている
DEMO
全体のフロー
条件分岐 • メッセージの条件分岐には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内でリクエストもやりやすい • 右のように検出範囲を画像で出力できるが、
今回は検出したプロダクト名をテキストに返す ように修正
DEMO2
変数を格納 • タスクの出力を他のタスクで使いまわした いときは変数に格納すると確実 • 「Create Variable」ブロックをStartブロック につないでおくことで他のタスクで Webhookのボディを使い回せる
変数を使う • 「Get Variable」ブロックを配置し、使用したいタスクに 向けて線を引くと格納した変数を使い回すことができる • ただフローを流すだけじゃない方法で使いたい値を呼び 出せるので覚えておくと便利!
まとめ • Postman Flowsを使うことでWebhookを使ったイベントドリブンのワーク フローを組むことができる • LINE Messaging APIのようなWebhookのイベントから受け取る値を使う 前提のAPIの動作確認をする時に使える
• 慣れないと変数の扱いとかで詰まるが、そこさえわかってしまえばアイ デア次第でいろんなワークフローを組めるようになるはず
今回紹介したデモの記事 https://bit.ly/3YZCrLj
END