Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

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.

@kenakamuinMicrosoft

LINE Bot を Bot Framework Composer でローコード開発する : その 4 応答で文字以外を返す

Last updated at Posted at 2020-04-09

前回 は自然言語処理の追加や高度なダイアログの使い方を見ていきました。今回は文字列以外の方法でユーザーに応答する方法を見ていきます。

Bot Connector と LINE Messaging API

Bot Framework Composer はボットチャンネル登録に含まれる Bot Connector の機能で、LINE をはじめ Facebook メッセンジャーや Microsoft Teams、Skype や Slack など複数のチャネルに接続できます。

当然チャネルごとにメッセージや画像表示などの仕様は異なりますが、Bot Connector がその違いを吸収すべく、Bot Framework Composer で作ったメッセージを自動的に変換してくれています。この記事では以下の方法で画像を返します。

  • 自動変換の機能で画像を返す
  • LINE Messaging API 独自の方式返す

画像の用意

LINE クライアントからアクセスできる外部 URL に画像があれば良いため、GitHub や Azure Blob ストレージなどに配置できます。既に Azure ストレージアカウントがあるため、今回はこちらを使います。

1. Azure ポータル をアクセスして「ストレージアカウント」を開く。
image.png

2. コンテナーを選択。
image.png

3.「＋コンテナー」をクリック。名前を付けて「パブリック アクセス レベル」で「BLOB」を選択。これで画像のみ匿名でアクセスできるようになる。
image.png

4. 作成したコンテナーを選択し、画像をアップロード。
image.png

5. アップロードした画像を選択して、アドレスを取得。
image.png

6. ブラウザなどで画像にアクセスできることを確認。

自動変換で画像を返す

Bot Framework Composer でよく使うリッチな応答に、ヒーローカードがあります。ヒーローカードとは以下のように、画像と説明、複数のボタンを備えたリッチなカードです。

LINE Messaging API でもこれと似た機能としてボタンテンプレートがあります。こちらも画像があり、タイトルや説明、そしてボタンがあります。

Bot Framework は画像だけを送るカードがないため、今回はヒーローカードを送り、自動的にボタンテンプレートに変換させます。

ダイアログとトリガーの追加

Language Generation には Structured response template という機能があり、単純な文字列ではなく画像カードやヒーローカードなどリッチなコンテンツを返す際に使える機能があります。今回はこちらの機能を使って画像を返します。

1.「New Dialog」より「GetCatImageDialog」を追加。
image.png

2. 追加したダイアログの BeginDialog を選択し「Send a response」を選択。
image.png

3.「Language Generation」に以下の応答を追加。

[Herocard   
    title = '猫'
    images = https://myfirstlinebottest.blob.core.windows.net/images/cat1.jpg
]

image.png

4. メインダイアログより以下のようにトリガーを追加。例文をいくつか追加。
image.png

5. 閾値を設定。
image.png

6. フローの中で、ダイアログの新規作成アクションを選択。
image.png

7. GetCatImageDialog を選択。
image.png

8. ボットを再起動。LUIS に新しいインテントを追加するため少し時間がかかる。

テスト

LINE デスクトップまたはモバイルクライアントから「猫」と送って画像が送られてくることを確認してください。

LINE Messaging API 独自の方式返す

次に LINE Messaging API 独自方式で返す方法を見ていきます。Bot Framework はチャンネル固有のデータをやり取りできるよう、ChannelData プロパティを提供します。

Messaging API の方式

まず Messaging API でどのように画像を送れるか確認します。

API リファレンス: 画像メッセージ によると、以下形式の JSON が必要です。画像の指定は https で JPEG のみをサポートしますが、今回は要件を満たしているためこのまま実装してきます。

{
    "type": "image",
    "originalContentUrl": "https://example.com/original.jpg",
    "previewImageUrl": "https://example.com/preview.jpg"
}

1. GetCatImageDialog の BeginDialog トリガーより応答メッセージを以下のように変更。

[Activity
    Text='猫の画像'
    ChannelData=${GetCatUrl()}
]

2. この時点では GetCatUrl という関数はないためエラーが出ている。
image.png

3. 関数を追加するために、メニューより「Bot Responses」を選択し、GetCatImageDialog を選択。「Edit Mode」をクリックして編集を有効にする。
image.png

4. GetCatUrl 関数を追加。

  • に続けて関数名を指定

  • json(): Common Expresson で提供される関数で文字列を JSON オブジェクトにする
# GetCatUrl
- ${json(GetImageMessage())}

5. GetCatUrl 関数が追加されたが、GetImageMessage 関数がないとエラーになる。
image.png

6. GetImageMessage 関数を追加。エラーが無くなることを確認。

  • LINE に対して文字列を改行して送る場合、\n\n で改行ができるとコメントをいただきました。
# GetImageMessage
- ```{
    "type": "image",
    "originalContentUrl": "https://myfirstlinebottest.blob.core.windows.net/images/cat1.jpg",
    "previewImageUrl": "https://myfirstlinebottest.blob.core.windows.net/images/cat1.jpg"
}```

image.png

テスト

LINE クライアントからテスト。先ほど少し違うフォーマットで表示れます。
image.png

関数を分けた理由

今回 3 つの関数で応答を作成しましたが、以下のコードでも同じ動作をしますが、json 関数に改行した文字を渡せないことや、機能を勉強するためにあえて 3 つに分けています。

[Activity
    Text='猫の画像'
    ChannelData=${json('{"type": "image","originalContentUrl":"https://myfirstlinebottest.blob.core.windows.net/images/cat1.jpg","previewImageUrl":"https://myfirstlinebottest.blob.core.windows.net/images/cat1.jpg"}')}
]

スタンプの返信

次に代表的な LINE 固有の機能としてスタンプを返します。ボットから返せるスタンプは決まっています。
ボットから送れるスタンプリスト
また以下のフォーマットでデータを返します。

{
  "type": "sticker",
  "packageId": "1",
  "stickerId": "1"
}

今回はスタンプが送られてきたらスタンプを返すようにしていきます。

スタンプを返すダイアログの作成

1.「New Dialog」より「StickerDialog」を追加。
image.png

2. BeginDialog トリガーより応答を返すアクションを追加。
image.png

3. Language Generation に以下を設定。今回は一度にすべてを定義。

[Activity
    Text='スタンプ'
    ChannelData=${json('{"type": "sticker","packageId":"11539","stickerId":"52114133"}')}
]

ユーザー入力情報の確認

ユーザーからメッセージが送られてきた場合、turn.activity 変数にデータが入ります。Messaging API リファレンスにはどのようなデータが入ってくるかの情報がありますが、実際に見た方が分かりやすいため、以下の手順でステッカーを送ってきた場合のデータを見てみます。

1. メインダイアログの「Unknown intent」の応答メッセージを変更。

- '${turn.activity}'

image.png

2. ボットを再起動してから、LINE クライアントから任意のスタンプを送信。

3. JSON を Visual Studio Code などでフォーマットして確認。ChannelData の message としてスタンプ情報が渡されていることを確認

トリガーの作成

現在 LUIS を使った自然言語解析をしているため、スタンプが送られてくるとユーザー入力がなく、上記のように「unknown intent」に振り分けられます。そこでダイアログのトリガーは「unknown intent」に追加します。

1. メインダイアログの「Unknown intent」の応答メッセージの前に if/else ブランチを追加。
image.png

2. 条件に turn.activity.channeldata.message.type=='sticker' を追加してメッセージがスタンプかを判定。
image.png

3. True ブランチに新規ダイアログの開始アクションを追加し、StickerDialog を開始。
image.png

4. False ブランチに応答送信アクションを追加し、- '${turn.activity.text}'　を指定。
image.png

5. 最後に一番下にある、もともとあったアクションを削除。

テスト

ボットを再起動して、LINE クライアントからスタンプを送信し、スタンプが返ってくるかテストします。

まとめ

今回は応答の方法として、文字列以外に画像やスタンプを返す方法を見ていきました。またユーザーからスタンプが送られてきた場合の判定方法も確認しました。

基本的には同じ手段で、位置情報やポストバックなど、LINE の他のメッセージを確認したり、様々な応答を返すことができます。色々試してみてください。

次回はユーザーから画像が送られてきた時の処理を見ていきます。

次の記事へ

1
2
3

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
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?