Bot Framework Composer でボット開発 : その 12 チャネル固有の機能の実装

[前回](https://qiita.com/kenakamu/items/a9bb3530c76ce3daaa0e) は Composer と QnA Maker を統合しました。今回は BotFramework でサポートするチャネルの固有機能の実装について紹介します。

Bot Framework は Skype、Microsoft Teams、Facebook Messenger、LINE など複数のチャネルをサポートします。[ボットの公開](https://qiita.com/kenakamu/items/c0bce7ff54711ff53cbe) の記事でも LINE と接続する方法を紹介しました。

複数のチャネルをサポートする場合、特定のチャネルにしかない機能は個別に実装する必要があります。Bot Framework では ChannelData プロパティに固有の情報を格納して、この問題を解決します。

詳細は [チャネル固有の機能の実装](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-channeldata?view=azure-bot-service-4.0) を参照してください。

# LINE チャネル固有の機能

ここでは、LINE チャネルの固有機能を見ていきます。現在サポートされる固有の機能は以下の通りです。

メッセージのタイプ

- スタンプ
- イメージマップ
- テンプレート (ボタン、確認、カルーセル)
- Flex

LINE アクション

- ポストバック
- Message
- URI
- 日時選択
- Camera
- カメラロール
- 場所

それぞれ、[Messaging API](https://developers.line.biz/ja/reference/messaging-api) の仕様にそって JSON オブジェクトを渡します。

# LINE 固有機能のデータ受信

チャネル固有のデータは turn.Activity.channelData に含まれます。

1\. EchoBot をテンプレートから作成。

2\. オウム返しの代わりに以下、メッセージを返す。

```text
- `${turn.activity.channelData}`
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/0f8cd2eb-535e-e10f-b849-4987f599110d.png)

3\. [ボットの公開](https://qiita.com/kenakamu/items/c0bce7ff54711ff53cbe) を参照して LINE に接続。

4\. LINE より任意のスタンプを送信。データに送ったステッカーの packageId と stickerId が含まれていることを確認。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/414223d2-bcef-fb82-a926-e5d03b7070a2.png)

5\. 位置情報を送信。ここでは新駅である高輪ゲートウェイのアドレスを送信。データにアドレス情報が含まれていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/299cb48a-0e5f-968a-d292-ded423b67e99.png)

このように LINE 固有のデータを受け取ることが可能です。

# LINE 固有メッセージの送信

次に Language Generation を使って LINE 固有のメッセージを送ってみます。

## ステッカーの送信

1\. メニューより Bot Responses へ移動し、編集。以下の関数を追加。

- Sticker 関数でパッケージ ID とステッカー ID を受け取り、JSON オブジェクト作成
- SendSticker 関数で ChannelData を持ったアクティビティを作成

```text
# SendSticker
[Activity
    Text='test',
    ChannelData=${Sticker(1,2)}
]

# Sticker (packageId, stickerId)
- ${json(concat('{"type": "sticker", "packageId":' ,packageId, ', "stickerId": "',stickerId,'"}'))}
```

2\. 応答メッセージを以下のように変更。

```text
- ${SendSticker()}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/65a7dea9-e3e6-d89f-250d-4dc4d6a6bfde.png)

3\. LINE より任意のメッセージを送信。ステッカーが返ってくることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/befa230d-ff7a-6483-d5a4-dd84514df545.png)

## ボタンテンプレートの送信

次にもう少し複雑な例として、ボタンテンプレートを送信してみます。

1\. [Messaging API のドキュメント](https://developers.line.biz/ja/reference/messaging-api/#buttons) よりボタンテンプレートの JSON を取得。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/46e98585-04b3-3fd0-dd13-bbe0c5355584.png)

2\. メニューより Bot Responses へ移動し、編集。以下の関数を追加。

- ButtonTemplate 関数では JSON オブジェクト作成するのみ
- ButtonTemplateSrc 関数で、複数行文字列を使って、ボタンテンプレートを作成

```text
# ButtonTemplate
- ${json(ButtonTemplateSrc())}

# ButtonTemplateSrc
- ```{
  "type": "template",
  "altText": "This is a buttons template",
  "template": {
      "type": "buttons",
      "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "imageBackgroundColor": "#FFFFFF",
      "title": "Menu",
      "text": "Please select",
      "defaultAction": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://example.com/page/123"
      },
      "actions": [
          {
            "type": "postback",
            "label": "Buy",
            "data": "action=buy&itemid=123"
          },
          {
            "type": "postback",
            "label": "Add to cart",
            "data": "action=add&itemid=123"
          },
          {
            "type": "uri",
            "label": "View detail",
            "uri": "http://example.com/page/123"
          }
      ]
  }
}```
```

3\. 応答メッセージを以下に変更。

```text
[Activity
    Text='test',
    ChannelData=${ButtonTemplate()}
]
```
4\. LINE から任意のメッセージを送信。ボタンテンプレートが返ってくることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/b0669368-5a0f-8cbb-8863-8ce11b10a7f9.png)

## Sender 等の新機能

最近 Messaging API に追加された機能にボットのアイコンと名前を動的に変える [Sender](https://developers.line.biz/ja/reference/messaging-api/#icon-nickname-switch) がありますが、こちらに対応することもできます。基本的には ChannelData にデータがあるとそちらを優先する仕組みとなっています。

1\. 応答メッセージを以下に変更

```text
[Activity
    Text='test',
    ChannelData=${json('{"type":"text","text":"こんにちは","sender": { "name": "Cat", "iconUrl": "<アイコンへのパス>" }}')}
]
```

2\. 結果を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/4c30a9f1-5753-d7ad-9bdb-03c561931037.png)

# まとめ

チャネル固有の機能を使うには、ChannelData に必要な情報を JSON 形式で登録する事になります。
実際は、メッセージを返す前に ChannelId の値からチャネルを特定するなどの作業が入ります。

複数チャネルに同時に展開できるメリットと、個別の機能も使える柔軟さが Bot Framework の魅力です。

次回は開発時のデータベース利用について見ていきます。

[次の記事へ](https://qiita.com/kenakamu/items/4862e2f8606d4fc3b8a0)
[目次へ戻る](https://qiita.com/kenakamu/items/6dc043cfc1f199032883#bot-framework-composer)