3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-05

前回 は Composer と QnA Maker を統合しました。今回は BotFramework でサポートするチャネルの固有機能の実装について紹介します。

Bot Framework は Skype、Microsoft Teams、Facebook Messenger、LINE など複数のチャネルをサポートします。ボットの公開 の記事でも LINE と接続する方法を紹介しました。

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

詳細は チャネル固有の機能の実装 を参照してください。

LINE チャネル固有の機能

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

メッセージのタイプ

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

LINE アクション

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

それぞれ、Messaging API の仕様にそって JSON オブジェクトを渡します。

LINE 固有機能のデータ受信

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

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

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

- `${turn.activity.channelData}`

image.png

3. ボットの公開 を参照して LINE に接続。

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

image.png

5. 位置情報を送信。ここでは新駅である高輪ゲートウェイのアドレスを送信。データにアドレス情報が含まれていることを確認。
image.png

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

LINE 固有メッセージの送信

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

ステッカーの送信

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

  • Sticker 関数でパッケージ ID とステッカー ID を受け取り、JSON オブジェクト作成
  • SendSticker 関数で ChannelData を持ったアクティビティを作成
# SendSticker
[Activity
    Text='test',
    ChannelData=${Sticker(1,2)}
]

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

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

- ${SendSticker()}

image.png

3. LINE より任意のメッセージを送信。ステッカーが返ってくることを確認。
image.png

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

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

1. Messaging API のドキュメント よりボタンテンプレートの JSON を取得。
image.png

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

  • ButtonTemplate 関数では JSON オブジェクト作成するのみ
  • ButtonTemplateSrc 関数で、複数行文字列を使って、ボタンテンプレートを作成
# 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. 応答メッセージを以下に変更。

[Activity
    Text='test',
    ChannelData=${ButtonTemplate()}
]

4. LINE から任意のメッセージを送信。ボタンテンプレートが返ってくることを確認。
image.png

Sender 等の新機能

最近 Messaging API に追加された機能にボットのアイコンと名前を動的に変える Sender がありますが、こちらに対応することもできます。基本的には ChannelData にデータがあるとそちらを優先する仕組みとなっています。

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

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

2. 結果を確認。
image.png

まとめ

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

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

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

次の記事へ
目次へ戻る

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?