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
74
Pythonでルンバをハックしてみた
miura55
0
150
あなたの知らないクラフトビールの世界
miura55
0
330
Storage Browser for Amazon S3を触ってみた + α
miura55
0
200
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
210
あのボタンでつながるSORACOM
miura55
0
130
Lambdaと共に歩んだAWS
miura55
3
830
Bedrock Knowledge baseを使って今年の上半期のニュースを聞いてみた(リベンジ編)
miura55
0
260
Other Decks in Technology
See All in Technology
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
Practical Agentic AI in Software Engineering
uzyn
0
110
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
400
人工衛星のファームウェアをRustで書く理由
koba789
15
7.7k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
160
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for Performance
lara
610
69k
Thoughts on Productivity
jonyablonski
70
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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