LINE API テンプレートメッセージを送信する

LINE APIでテンプレートメッセージを送信してみます。
テンプレートには
・ボタン
・確認
・カルーセル
・画像カルーセル
の4種類があるので、1つずつ試してみます。


テンプレートの基本



テンプレートメッセージの共通部分の定義は以下の通りです。

プロパティタイプ必須詳細
typeString必須template
altTextString必須代替テキスト(最大文字数:400)
templateObject必須ボタン or 確認 or カルーセル or 画像カルーセル


altTextに指定した文字がLINEの通知に表示されます。
基本形は以下の通り。


  1. {
  2.     "type": "template",
  3.     "altText": "代替テキスト",
  4.     "template": {
  5.         // この部分がテンプレートの種類により異なる
  6.     }
  7. }



「template」に指定する内容を確認します。



ボタンテンプレート



画像、タイトル、テキストと、ボタンが含まれたテンプレートです。
template内に指定する内容は以下の通り。

プロパティタイプ必須詳細
typeString必須buttons
thumbnailImageUrlString任意画像URL(最大文字数:1000)
https接続必須で、画像形式はjpegかpng
最大横幅サイズ:1024px
最大ファイルサイズ:1MB
imageAspectRatioString任意画像のアスペクト比。rectangleかsquareを指定。
rectangle(default): 1.51:1
square: 1:1
imageSizeString任意画像の表示形式。coverかcontainを指定
cover(default):画像領域全体に画像を表。画像領域に収まらない部分は切り詰め。
contain:画像領域に画像全体を表示。画像サイズが不足する場合は余白が表示される。
imageBackgroundColorString任意画像の背景色。RGB値で設定。デフォルト値は#FFFFFF(白)。
titleString任意タイトル(最大文字数:40)
textString必須メッセージテキスト
画像もタイトルも指定しない場合の最大文字数:160
画像またはタイトルを指定する場合の最大文字数:60
defaultActionアクションオブジェクト任意画像、タイトル、テキストの領域全体に対して設定できる、タップされたときのアクション
defaultActionアクションオブジェクト配列必須タップされたときのアクション
最大件数:4


アクションオブジェクトの詳細はこちらを参照。
アクションオブジェクト

サンプルは以下のようになります。


  1. {
  2.     "type": "template",
  3.     "altText": "代価テキスト",
  4.     "template": {
  5.         "type": "buttons",
  6.         "thumbnailImageUrl": "https://symfo.web.fc2.com/sample_src/line/cover1.jpg",
  7.         "imageAspectRatio": "rectangle",
  8.         "imageSize": "cover",
  9.         "imageBackgroundColor": "#FF0000",
  10.         "title": "Love Live",
  11.         "text": "Please select",
  12.         "defaultAction": {
  13.             "type": "message",
  14.             "label": "defaultAction",
  15.             "text": "defaultActionです"
  16.         },
  17.         "actions": [
  18.             {
  19.                 "type": "message",
  20.                 "label": "action1",
  21.                 "text": "action1です"
  22.             },
  23.             {
  24.                 "type": "message",
  25.                 "label": "action2",
  26.                 "text": "action2です"
  27.             },
  28.             {
  29.                 "type": "message",
  30.                 "label": "action3",
  31.                 "text": "action3です"
  32.             },
  33.             {
  34.                 "type": "message",
  35.                 "label": "action4",
  36.                 "text": "action4です"
  37.             }
  38.         ]
  39.     }
  40. }



999_07.jpg




確認テンプレート



タイトルと、2つのアクションボタンを表示するテンプレートです。
template内に指定する内容は以下の通り。

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


アクションオブジェクトの詳細はこちらを参照。
アクションオブジェクト

サンプルは以下のようになります。


  1. {
  2.     "type": "template",
  3.     "altText": "代価テキスト",
  4.     "template": {
  5.         "type": "confirm",
  6.         "text": "テキスト領域です。\n改行も可能です。",
  7.         "actions": [
  8.             {
  9.                 "type": "message",
  10.                 "label": "Yes",
  11.                 "text": "yes"
  12.             },
  13.             {
  14.                 "type": "message",
  15.                 "label": "No",
  16.                 "text": "no"
  17.             }
  18.         ]
  19.     }
  20. }



999_08.jpg



カルーセルテンプレート



複数のカラムを表示するテンプレート。
カラムは横にスクロールして順番に表示できます。

プロパティタイプ必須詳細
typeString必須carousel
imageAspectRatioString任意画像のアスペクト比。rectangleかsquareを指定。
rectangle(default): 1.51:1
square: 1:1
すべてのカラムに適用される。
imageSizeString任意画像の表示形式。coverかcontainを指定。
cover(default):画像領域全体に画像を表示。画像領域に収まらない部分は切り詰め。
contain:画像領域に画像全体を表示。不足分は余白を表示。
すべてのカラムに適用される。
columnsカラムオブジェクト配列必須カラムの配列
最大カラム数:10


個々のカラムの指定は以下のとおりです。

プロパティタイプ必須詳細
thumbnailImageUrlString任意画像URL(最大文字数:1000)
https接続必須で、画像形式はjpegかpng
最大横幅サイズ:1024px
最大ファイルサイズ:1MB
imageBackgroundColorString任意画像の背景色。RGB値で設定。デフォルト値は#FFFFFF(白)。
titleString任意タイトル(最大文字数:40)
textString必須メッセージテキスト
画像もタイトルも指定しない場合の最大文字数:120
画像またはタイトルを指定する場合の最大文字数:60
defaultActionアクションオブジェクト任意画像、タイトル、テキストの領域全体に対して設定できる、タップされたときのアクション
actionsアクションオブジェクト配列必須タップされたときのアクション
最大件数:3


アクションオブジェクトの詳細はこちらを参照。
アクションオブジェクト

サンプルは以下のようになります。
各々のカラムに指定するactionsの数は一致させる必要があります。


  1. {
  2.     "type": "template",
  3.     "altText": "代価テキスト",
  4.     "template": {
  5.         "type": "carousel",
  6.         "imageAspectRatio": "rectangle",
  7.         "imageSize": "cover",
  8.         "columns": [
  9.             {
  10.                 "thumbnailImageUrl": "https://symfo.web.fc2.com/sample_src/line/cover1.jpg",
  11.                 "imageBackgroundColor": "#FFFFFF",
  12.                 "title": "タイトル1",
  13.                 "text": "テキスト領域\n改行も可能です。",
  14.                 "defaultAction": {
  15.                     "type": "message",
  16.                     "label": "defaultAction",
  17.                     "text": "defaultActionです"
  18.                 },
  19.                 "actions": [
  20.                     {
  21.                         "type": "message",
  22.                         "label": "action1",
  23.                         "text": "action1です"
  24.                     },
  25.                     {
  26.                         "type": "message",
  27.                         "label": "action2",
  28.                         "text": "action2です"
  29.                     },
  30.                     {
  31.                         "type": "message",
  32.                         "label": "action3",
  33.                         "text": "action3です"
  34.                     }
  35.                 ]
  36.             },
  37.             {
  38.                 "thumbnailImageUrl": "https://symfo.web.fc2.com/sample_src/line/cover2.jpg",
  39.                 "title": "タイトル2",
  40.                 "text": "テキスト領域\n改行も可能です。",
  41.                 "actions": [
  42.                     {
  43.                         "type": "message",
  44.                         "label": "action1",
  45.                         "text": "action1です"
  46.                     },
  47.                     {
  48.                         "type": "message",
  49.                         "label": "action2",
  50.                         "text": "action2です"
  51.                     },
  52.                     {
  53.                         "type": "message",
  54.                         "label": "action3",
  55.                         "text": "action3です"
  56.                     }
  57.                 ]
  58.             },
  59.             {
  60.                 "thumbnailImageUrl": "https://symfo.web.fc2.com/sample_src/line/cover3.jpg",
  61.                 "title": "タイトル3",
  62.                 "text": "テキスト領域\n改行も可能です。",
  63.                 "actions": [
  64.                     {
  65.                         "type": "message",
  66.                         "label": "action1",
  67.                         "text": "action1です"
  68.                     },
  69.                     {
  70.                         "type": "message",
  71.                         "label": "action2",
  72.                         "text": "action2です"
  73.                     },
  74.                     {
  75.                         "type": "message",
  76.                         "label": "action3",
  77.                         "text": "action3です"
  78.                     }
  79.                 ]
  80.             }
  81.         ]
  82.     }
  83. }



999_09.jpg

999_10.jpg




画像カルーセルテンプレート



複数の画像を表示するテンプレート。
画像は横にスクロールして順番に表示できます。

プロパティタイプ必須詳細
typeString必須image_carousel
columnsカラムオブジェクト配列必須カラムの配列
最大カラム数:10


カラムオブジェクトに指定する内容は以下のとおり。

プロパティタイプ必須詳細
imageUrlString必須画像URL(最大文字数:1000)
https接続必須で、画像形式はjpegかpng
縦横比:1:1
最大横幅サイズ:1024px
最大ファイルサイズ:1MB
actionアクションオブジェクト必須タップされたときのアクション


アクションオブジェクトの詳細はこちらを参照。
アクションオブジェクト

サンプルは以下のようになります。


  1. {
  2.     "type": "template",
  3.     "altText": "代価テキスト",
  4.     "template": {
  5.         "type": "image_carousel",
  6.         "columns": [
  7.             {
  8.                 "imageUrl": "https://symfo.web.fc2.com/sample_src/line/cover1.jpg",
  9.                 "action":{
  10.                     "type": "message",
  11.                     "label": "カルーセル1",
  12.                     "text": "carousel1です"
  13.                 }
  14.             },
  15.             {
  16.                 "imageUrl": "https://symfo.web.fc2.com/sample_src/line/cover2.jpg",
  17.                 "action": {
  18.                     "type": "message",
  19.                     "label": "カルーセル2",
  20.                     "text": "carousel2です"
  21.                 }
  22.             },
  23.             {
  24.                 "imageUrl": "https://symfo.web.fc2.com/sample_src/line/cover3.jpg",
  25.                 "action": {
  26.                     "type": "message",
  27.                     "text": "labelは省略可能です"
  28.                 }
  29.             }
  30.         ]
  31.     }
  32. }



999_11.jpg

999_12.jpg


LINE API Push通知で送信できるメッセージまとめ
関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ