私もLINEでBotつくりたい！となったのですが、AIとかは敷居が高い気がしたので、ひとまず単機能のLINE BotをPower Automateを利用してノーコーディングで作ってみました。

LINE Botを作るために必要なLINE Messaging APIの設定に関しては松本典子さんの記事が大変参考になりました。

今回は、Power Automateでメッセージを受け取って、返信する部分と、リッチメニューで簡単なメニューを作るところに限った備忘録です。

完成したのは以下のようなカップラーメンの時間を計ってくれるBotです。

f:id:mofumofu_dance:20200512001941p:plain

Power Automate

Power Automate上での処理は以下の通りです。

HTTP要求受信のトリガー (Bot--> Automate)
とりあえずレスポンスをStatus 200でかえす
条件分岐で、受信したメッセージが「XX分にセット」かどうかを判定
受信したメッセージへの応答として、タイマーを開始することを送信 (Automate --> Bot)
XX分待つ
メッセージの送り主に、Pushメッセージとして、ラーメンができたことを通知

1.トリガー

Power Automateでは、上の記事にも書かれているように、HTTPの要求を受信したときのトリガーをつかいます。

リクエストBodyのJSON Schemaも記事と同様に、

{
    "properties": {
        "events": {
            "items": {
                "message": {
                    "properties": {
                        "address": {
                            "type": "string"
                        },
                        "fileName": {
                            "type": "string"
                        },
                        "fileSize": {
                            "type": "number"
                        },
                        "id": {
                            "type": "string"
                        },
                        "latitude": {
                            "type": "number"
                        },
                        "longitude": {
                            "type": "number"
                        },
                        "packageId": {
                            "type": "string"
                        },
                        "stickerId": {
                            "type": "string"
                        },
                        "text": {
                            "type": "string"
                        },
                        "title": {
                            "type": "string"
                        },
                        "type": {
                            "type": "string"
                        }
                    },
                    "type": "object"
                },
                "postback": {
                    "properties": {
                        "data": {
                            "type": "string"
                        }
                    },
                    "type": "object"
                },
                "properties": {
                    "replyToken": {
                        "type": "string"
                    },
                    "source": {
                        "properties": {
                            "groupId": {
                                "type": "string"
                            },
                            "type": {
                                "type": "string"
                            },
                            "userId": {
                                "type": "string"
                            }
                        },
                        "type": "object"
                    },
                    "timestamp": {
                        "type": "number"
                    },
                    "type": {
                        "type": "string"
                    }
                },
                "type": "object"
            },
            "type": "array"
        }
    },
    "type": "object"
}

これで与えます。あとは生成されるURLをWebhookのURLに設定したらとりあえずBotがメッセージを受け取ったときにイベントを伝えられるようになります。

f:id:mofumofu_dance:20200512002106p:plain — トリガーとレスポンス

4.最初の応答メッセージ

受信したメッセージが「XX分にセット」の形式だった場合にかぎって処理を進めます。

応答メッセージ送信の基本的な部分は公式のレファレンスがやはり読みやすいです。

Messaging APIリファレンス | LINE Developers

Power Automateで固有なのは、replyTokenの取得方法です。最初に受信したリクエストで、eventが配列であることに注意して、

 first(triggerBody()?['events'])?['replyToken']

これでreplyTokenを取得します。フローのブロックとしては下図のようになります。

f:id:mofumofu_dance:20200512002800p:plain — 応答メッセージ送信

6. Pushメッセージ

Pushメッセージの場合には、送り先を指定することになります。ここが、応答メッセージとの違いです。

公式のレファレンスは以下。

Messaging APIリファレンス | LINE Developers

送信先のToについては、Power Automateでは最初に受信した要求の送り主を以下の式で取ります。

first(triggerBody()?['events'])?['source']?['userId']

f:id:mofumofu_dance:20200512003146p:plain — Pushメッセージ送信

これでPower Automateの処理は完成です。

リッチメニュー

リッチメニューは、非常に荒く言えば、キーボードの代わりに使う、ショートカットボタンのようなものです。

リッチメニューを使う | LINE Developers

今回でいえば、「3分にセット」と打つのが面倒だったのと、フォーマットを縛りたかったので、リッチメニューを入れています。

リッチメニューの作成にはPostmanを利用しました。画像コンテンツなどを渡すのが非常に楽だったためです。詳細は以下のブログに記載されています。

note.com

今回は1200x810のサイズの画像で、下半分を3分割して、それぞれ、3分、4分、5分のタイマーが発動するように設定しました。

f:id:mofumofu_dance:20200512003939p:plain — リッチメニューの構成

念のため、リッチメニューを構成するJSON（リクエストのBody）は以下のようなものです。

{
    "size": {
      "width": 1200,
      "height": 810
    },
    "selected": false,
    "name": "Nice richmenu",
    "chatBarText": "Tap to open",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 405,
          "width": 400,
          "height": 405
        },
        "action": {
          "type": "message",
          "text": "3分にセット"
        }
      },
      {
        "bounds": {
          "x": 400,
          "y": 405,
          "width": 400,
          "height": 405
        },
        "action": {
          "type": "message",
          "text": "4分にセット"
        }
      },
      {
        "bounds": {
          "x": 800,
          "y": 405,
          "width": 400,
          "height": 405
        },
        "action": {
          "type": "message",
          "text": "5分にセット"
        }
      }
    ]
  }