LINE Messaging APIのテンプレートメッセージをまとめてみる

こんにちは、中村です。
LINEのMessaging APIでは、テキスト以外にもテンプレートメッセージで返答させることができます。

テンプレートメッセージは、LINEで用意したレイアウトです。
ユーザーは手動入力の代わりに、1回タップで特定のアクションを実行できます。

今回は実際の表示とJSONを交えながらまとめたいと思います。
テンプレートメッセージの場合も、テキストと同様でJSONを作成しSDK等で送信します。

iOS版およびAndroid版のLINE 6.7.0以降で対応しています。

共通プロパティ

すべてのテンプレートメッセージオブジェクトで共通のプロパティがあります。

ボタン

複数のアクションボタンが含まれたメッセージを送ることができます。
画像・タイトル・テキストの領域全体に対しても、ユーザーがタップすると実行されるアクションを1つ指定できます。

送信するJSON

{
    "type": "template",
    "altText": "this is a buttons template",
    "template": {
        "type": "buttons",
        "actions": [
            {
                "type": "message",
                "label": "アクション 1",
                "text": "アクション 1"
            },
            {
                "type": "message",
                "label": "アクション 2",
                "text": "アクション 2"
            },
            {
                "type": "message",
                "label": "アクション 3",
                "text": "アクション 3"
            }
        ],
    "thumbnailImageUrl": "SPECIFY_YOUR_IMAGE_URL",
    "title": "タイトルです",
    "text": "テキストです"
  }
}

実際の表示

確認

確認テンプレートでは、ボタンが2つ含まれたメッセージを送ることができます。

送信するJSON

{
    "type": "template",
    "altText": "this is a confirm template",
    "template": {
        "type": "confirm",
        "actions": [
            {
                "type": "message",
                "label": "はい",
                "text": "はい"
            },
            {
                "type": "message",
                "label": "いいえ",
                "text": "いいえ"
            }
        ],
        "text": "テキストです"
    }
}

実際の表示

カルーセル

複数のカラムオブジェクトをユーザーがスクロールして閲覧することのできるメッセージタイプ。
ボタンだけでなく画像、タイトル、テキストの領域全体にも、ユーザーがタップすると実行されるアクションを1つ指定できます。

カルーセルのカラムオブジェクト

送信するJSON

{
    "type": "template",
    "altText": "this is a carousel template",
    "template": {
        "type": "carousel",
        "actions": [],
        "columns": [
            {
                "thumbnailImageUrl": "SPECIFY_YOUR_IMAGE_URL",
                "title": "タイトルです",
                "text": "テキストです",
                "actions": [
                    {
                        "type": "message",
                        "label": "アクション 1",
                        "text": "アクション 1"
                    },
                    {
                        "type": "message",
                        "label": "アクション 2",
                        "text": "アクション 2"
                    }
                ]
            },
            {
                "thumbnailImageUrl": "SPECIFY_YOUR_IMAGE_URL",
                "title": "タイトルです",
                "text": "テキストです",
                "actions": [
                    {
                        "type": "message",
                        "label": "アクション 1",
                        "text": "アクション 1"
                    },
                    {
                        "type": "message",
                        "label": "アクション 2",
                        "text": "アクション 2"
                    }
                ]
            }
        ]
    }
}

実際の表示

画像カルーセル

複数の画像をユーザーがスクロールして閲覧することのできるメッセージタイプ。
カルーセルと同じ機能を使うことができます。

画像カルーセルのカラムオブジェクト

送信するJSON

{
    "type": "template",
    "altText": "this is a image carousel template",
    "template": {
        "type": "image_carousel",
        "columns": [
            {
                "imageUrl": "https://example.com/test-cline/b01_img01.jpg",
                "action": {
                    "type": "uri",
                    "label": "View detail",
                    "uri": "https://classmethod.jp/"
                }
            },
            {
                "imageUrl": "https://example.com/test-cline/b01_img02.jpg",
                "action": {
                    "type": "postback",
                    "label": "Buy",
                    "data": "action=buy&itemid=111"
                }
            },
            {
                "imageUrl": "https://example.com/test-cline/b01_img04.jpg",
                "action": {
                    "type": "message",
                    "label": "Yes",
                    "text": "yes"
                }
            }
        ]
    }
}

実際の表示

まとめ

いかがでしたでしょうか。
テキストだけでなく、テンプレートを使用することでよりユーザビリティが向上が期待できます。
次回は、アクションオブジェクトをまとめたいと思います。