LINE Messaging APIのテンプレートメッセージをまとめてみる
こんにちは、中村です。
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 | 任意 |
|
| imageAspectRatio | string | 任意 | 画像のアスペクト比。以下のいずれかの値を指定します。
デフォルト値はrectangleです。 |
| imageSize | string | 任意 | 画像の表示形式。以下のいずれかの値を指定します。
デフォルト値はcoverです。 |
| imageBackgroundColor | string | 任意 | 画像の背景色。RGB値で設定する。デフォルト値は#FFFFFF（白）。 |
| title | string | 任意 | タイトル最大文字数：40 |
| text | string | 必須 |
|
| 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です。 |
| imageSize | string | 任意 | 画像の表示形式。以下のいずれかの値を指定します。
デフォルト値はcoverです。 |
カルーセルのカラムオブジェクト
| プロパティ | タイプ | 必須 | 説明 |
|---|---|---|---|
| thumbnailImageUrl | string | 任意 |
|
| imageBackgroundColor | string | 任意 | 画像の背景色。RGB値で設定する。デフォルト値は#FFFFFF（白）。 |
| title | string | 任意 | タイトル最大文字数：40 |
| text | string | 必須 |
|
| 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 | 必須 |
|
| 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"
}
}
]
}
}
実際の表示
まとめ
いかがでしたでしょうか。
テキストだけでなく、テンプレートを使用することでよりユーザビリティが向上が期待できます。
次回は、アクションオブジェクトをまとめたいと思います。
![[SwiftUI] iOS 17以降の@Environmentまとめ](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-291ab56731465588aade0a1c471324b7/8ec78a461f25144ed01585a448b8974b/swift-ui-eyecatch.png)
