先日、ServerlessDays Tokyo 2024にスタッフで参加しました
Day1のカンファレンスは、ベンダーレスで様々なサーバーレスの話が聞けてかなり充実していました。
そして、Day2のワークショップでは様々なテーマのシナリオが用意されており、その中で様々なベンダーのサービスをイベントドリブンでつなぎこむハンズオンに参加しました。
現代のモダンアーキテクチャでもあるイベントドリブンを体験することができて、とても勉強になりました。
このハンズオンの中で使われていたツールの一つにPostman Flowsがありました。Postman自体は昔から使っていましたが、Flowsは興味がありましたがなかなか触れてなかったので、ハンズオンを機に触れたのが結構大きかったです。
このPostman Flowsは作成したフローをWebhookで起動することができるので、そこからLINEのMessaging APIを叩いてLINE Botを作れるのではないかと思いました。
というわけで、今回はPostman Flowsを使ってLINE Botを作成してみます。
事前準備
- LINE Developersのアカウント
- Postmanのアカウント
LINE Messaging APIの設定
まずは、今回使用するMessaging APIの設定を行います。
以下のURLを参考にMessaging APIのチャネルを作成します。
チャネルを作成したら、チャネルアクセストークンをメモしておきます。
PostmanにAPIのリクエストを追加
Postman FlowsでAPIを叩くためには、PostmanにAPIのリクエストをまとめたコレクションを作成し、そこにAPIのリクエストを追加しておく必要があります。
そこで、Messaging APIのリクエストのコレクションをPostmanに追加します。
左のペインにある「Collections」タブをクリックし、コレクション一覧の左上にある「+」ボタンをクリックして「Blank collection」をクリックし、新しいコレクションを作成します。
任意のコレクション名を設定します。ここでは「Flows LINE bot」という名前で作成します。
新規で作成したコレクションであれば以下の表示が出るかと思いますので、「Add a request」をクリックします。
リクエストの編集タブが表示されたら、以下の設定を行います。
- リクエスト名(コレクション名のスラッシュの横): 任意の名前を設定します。ここでは「Reply message」とします。
- メソッド名：POST
- URL：
https://api.line.me/v2/bot/message/reply
次に、リクエストヘッダーを設定します。「Headers」タブをクリックし、以下のヘッダーを追加します。
- Key:
Authorization - Value:
Bearer 【Messaging APIのチャネル作成時に用意したチャネルアクセストークン】
最後にリクエストボディを設定します。「Body」タブをクリックし、以下のJSONを設定します。
bodyの種類が none になっているかと思いますので、 raw に変更することでJSONを設定できるようになります。
{
"replyToken": "{{replyToken}}",
"messages": [
{
"type": "text",
"text": "{{message}}"
}
]
}
これでMessaging APIをリクエストするための準備ができました。最後に定義したリクエストボディの中にある {{replyToken}} と {{message}} はプレースホルダーになっており、Postman上では変数として扱われます。
今回の場合、Postman FlowsでWebhookを受け取った際にそのイベントの中身を上記で設定した変数に代入してリクエストを送信することができます。
Postman Flowsの作成
これでAPIのリクエストをPostmanに追加できたので、次にPostman FlowsでLINE Botのフローを作成します。
その前にデフォルトだとPostman Flowsペイン上では非表示なので、有効化する必要があります。
左のペイン一番下にある正方形とプラスマークをあわせたアイコンをクリックします。
Workspace Settingsが表示されるので、機能一覧の中から「Flows」のトグルスイッチを有効化します。
ペインに「Flows」が表示されたら、「Flows」タブをクリックします。
Flow一覧の左上にある「+」ボタンをクリックして「Create new Flow」をクリックして新しいFlowを作成します。
今回はシンプルにLINEからのメッセージを受け取ってそのまま返信するオウム返しのLINE Botを作成します。
以下のフローエディタ画面が開きます。Flowの名前は任意ですが、ここでは「Echo LINE Bot」とします。
初期状態では以下の通り複数の接続先が表示されていますが、この中から「Send a Request」を選択します。
Send Requestブロックが表示されたら画面上部のテキストボックスをクリックすると、ワークスペース内のコレクションが表示されるので、Messaging APIのリクエストを追加したコレクションを選択し、Reply Messageのリクエストを選択します。
リクエストを選択すると、ブロックが更新されてリクエストボディ内で設定したプレースホルダーの変数が表示されます。
今度は表示された変数にWebhookから受け取ったパラメータの値を代入していきます。
フローで流れてきたイベントからパラメータを抽出するときには各変数のパラメータにある「＋」アイコンをクリックすると、パラメータの一覧が表示されるのでその中から「Select」を選択するとフローで流れてくるパラメータを受け取ることができます。
パラメータの種類を選択すると、テキストボックスが表示されます。このテキストボックスにはWebhookのJSONのパスを指定します。
参考までにLINEから送信されるWebhookのオブジェクトは以下のようなJSONが流れてきます。
{
"destination": "xxxxxxxxxx",
"events": [
{
"replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
"type": "message",
"timestamp": 1462629479859,
"source": {
"type": "user",
"userId": "U4af4980629..."
},
"message": {
"id": "325708",
"type": "text",
"text": "Hello, world"
}
}
]
}
したがって、各パラメータには以下のパスを指定します。
- replyToken:
events.0.replyToken - message:
events.0.message.text
以下の状態になっていればOKです。
設定した変数にWebhookのイベントが流れ込むようにするために、「Start」ブロックから追加でそれぞれの変数に向かって線を引きます。
Webhook URLの取得
ここまででフローが作成されました。
あとは、このフローをWebhookで起動するためにWebhook URLを取得します。
左のペインに一番したにある「Applications」の項目にある「Webhook」にマウスカーソルを当てると出てくる「Create」をクリックします。
クリックするとWebhook URLが表示されるので、このURLをコピーしてLINE DevelopersのMessaging APIのWebhook URLに設定します。ちなみに作成したフローに変更があった場合は、変更した後に都度「Publish」をクリックすると変更内容を反映することができます。
LINE DevelopersのコンソールからMessaging APIのチャネルの設定を開き、Webhook URLにこのURLを設定します。
あとはLINE公式アカウントマネージャーからの応答メッセージを無効にしてWebhookを有効にすればLINE Botが完成です。
動作確認
いよいよ動作確認です。実際にメッセージを送信し、以下の通り送信したメッセージがそのまま返信されたら、LINE Botが正常に動作しています。
まとめ
今回はPostman Flowsを使ってLINE Botを作成してみました。
Messaging APIのReply MessageはWebhookで受け取るreplyTokenを使う必要がありAPIを動かすためにサーバーを立てる必要がありますが、Postman Flowsを使うことでイベントのデータからインタラクティブにパラメータを設定できます。しかもそのフローをサーバーを立てて動かすことができるので、Flowsだけで簡単にLINE Botを作成することができます。
他のAPIをコレクションに追加すれば、アレンジ次第でAPI連携するLINE Botも簡単に作成できるはずなのでぜひ試してみてください！
Discussion