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

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

チャットボット特集
iOSAndroidLINE Messaging APILINE BotLINE
FacebookHatena blogX
2018.04.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、中村です。
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"
                }
            }
        ]
    }
}

実際の表示

まとめ

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

この記事をシェアする

FacebookHatena blogX

関連記事

Xcode 26.0 + iOS 26.0 で、NavigationStackのラージタイトルが消えてしまう問題
和田 健司
2025.10.07
iOSシミュレータの位置情報をコマンドラインから制御する
和田 健司
2025.09.29
iOSDC Japan 2025 セッション視聴感想-Day2
haruka
2025.09.26
Xcode 16.4 + macOS 26.0環境のXcode Cloudでbundle installに失敗する
和田 健司
2025.09.25