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

2018.04.24

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

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

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

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

共通プロパティ

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

プロパティ タイプ 必須 説明
type string 必須 template
altText string 必須 代替テキスト(最大文字数:400)
template object 必須 ボタン、確認、カルーセル、画像カルーセルオブジェクト

ボタン

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

プロパティ タイプ 必須 説明
type string 必須 buttons
thumbnailImageUrl string 任意
  • 画像URL(最大文字数:1000)
  • HTTPS
  • JPEGまたはPNG
  • 最大横幅サイズ:1024px
  • 最大ファイルサイズ:1MB
imageAspectRatio string 任意 画像のアスペクト比。以下のいずれかの値を指定します。

  • rectangle: 1.51:1
  • square: 1:1

デフォルト値はrectangleです。

imageSize string 任意 画像の表示形式。以下のいずれかの値を指定します。

  • cover:画像領域全体に画像を表示します。画像領域に収まらない部分は切り詰められます。
  • contain:画像領域に画像全体を表示します。縦長の画像では左右に、横長の画像では上下に余白が表示されます。
  • デフォルト値はcoverです。

imageBackgroundColor string 任意 画像の背景色。RGB値で設定する。デフォルト値は#FFFFFF(白)。
title string 任意 タイトル最大文字数:40
text string 必須
  • メッセージテキスト画像もタイトルも指定しない場合の最大文字数:160
  • 画像またはタイトルを指定する場合の最大文字数:60
defaultAction アクションオブジェクト 任意 画像、タイトル、テキストの領域全体に対して設定できる、タップされたときのアクション
actions アクションオブジェクトの配列 必須 タップされたときのアクション最大件数:4

送信する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つ含まれたメッセージを送ることができます。

プロパティ タイプ 必須 説明
type string 必須 confirm
text string 必須 メッセージのテキスト(最大文字数:240)
actions アクションオブジェクトの配列 必須 タップされたときのアクション。2つのボタンに1つずつアクションを設定します。

送信するJSON

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

実際の表示

カルーセル

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

プロパティ タイプ 必須 説明
type string 必須 carousel
columns カラムオブジェクトの配列 必須 カラムの配列。最大カラム数:10
columns カラムオブジェクトの配列 必須 カラムの配列。最大カラム数:10
imageAspectRatio string 任意 画像のアスペクト比。以下のいずれかの値を指定します。

  • rectangle: 1.51:1
  • square: 1:1

デフォルト値はrectangleです。

imageSize string 任意 画像の表示形式。以下のいずれかの値を指定します。

  • cover:画像領域全体に画像を表示します。画像領域に収まらない部分は切り詰められます。
  • contain:画像領域に画像全体を表示します。縦長の画像では左右に、横長の画像では上下に余白が表示されます。
  • デフォルト値はcoverです。

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

プロパティ タイプ 必須 説明
thumbnailImageUrl string 任意
  • 画像URL(最大文字数:1000)
  • HTTPS
  • JPEGまたはPNG
  • 最大横幅サイズ:1024px
  • 最大ファイルサイズ:1MB
imageBackgroundColor string 任意 画像の背景色。RGB値で設定する。デフォルト値は#FFFFFF(白)。
title string 任意 タイトル最大文字数:40
text string 必須
  • 画像もタイトルも指定しない場合の最大文字数:120
  • 画像またはタイトルを指定する場合の最大文字数:60
defaultAction アクションオブジェクト 任意 画像、タイトル、テキストの領域全体に対して設定できる、タップされたときのアクション
actions アクションオブジェクトの配列 必須 タップされたときのアクション最大件数:3

送信する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"
                    }
                ]
            }
        ]
    }
}

実際の表示

画像カルーセル

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

プロパティ タイプ 必須 説明
type string 必須 image_carousel
columns カラムオブジェクトの配列 必須 カラムの配列、最大カラム数:10

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

プロパティ タイプ 必須 説明
imageUrl string 必須
  • 画像URL(最大文字数:1000)
  • HTTPS
  • JPEGまたはPNG
  • 縦横比:1:1
  • 最大横幅サイズ:1024px
  • 最大ファイルサイズ:1MB
actions アクションオブジェクト 必須 画像がタップされたときのアクション

送信する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"
                }
            }
        ]
    }
}

実際の表示

まとめ

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