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
270
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
あなたの知らないクラフトビールの世界
miura55
0
79
Storage Browser for Amazon S3を触ってみた + α
miura55
0
120
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
130
あのボタンでつながるSORACOM
miura55
0
77
Lambdaと共に歩んだAWS
miura55
3
630
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた(リベンジ編)
miura55
0
200
Is it wrong to use a web framework with Lambda?
miura55
0
160
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた
miura55
0
170
AWS×IoTについて語り合う会
miura55
0
110
Other Decks in Technology
See All in Technology
CDKのコードレビューを楽にするパッケージcdk-mentorを作ってみた/cdk-mentor
tomoki10
0
140
OPENLOGI Company Profile for engineer
hr01
1
18k
0→1事業こそPMは営業すべし / pmconf #落選お披露目 / PM should do sales in zero to one
roki_n_
PRO
1
250
商品レコメンドでのexplicit negative feedbackの活用
alpicola
1
220
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
6
3.3k
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
110
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
320
新しいスケーリング則と学習理論
taiji_suzuki
10
3.8k
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
4
650
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
290
Evolving Architecture
rainerhahnekamp
3
240
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
130
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
A better future with KSS
kneath
238
17k
Practical Orchestrator
shlominoach
186
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GitHub's CSS Performance
jonrohan
1030
460k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
How STYLIGHT went responsive
nonsquared
96
5.3k
Done Done
chrislema
182
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Invisible Side of Design
smashingmag
299
50k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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