※こちらの案内は、フレックスメッセージの利用方法
フレックメッセージの利用手順 ＞ フレックスメッセージ作成の補足です。
合わせてご確認ください。
テンプレートの利用方法
①下記よりJSONコードをコピー
ショートカットキーを利用しコードをコピーします。
【Windows】Control ＋ C
【Mac】command ＋ C
②FLEX MESSAGE SIMULATORへ貼り付け
FLEX MESSAGE SIMULATORを開き「View as JSON」をクリック
開いた際に表示されているJSONコードを全選択し
【Windows】Control ＋ A
【Mac】command ＋ A
①にてコピーしたJSONコードを貼り付けます。
【Windows】Control ＋ V
【Mac】command ＋ V
JSONコードを貼り付け、「Apply」をクリック
赤くエラーになった部分へ、画像URLの挿入もしくは、リンク先URLを挿入します。
補足
画像URLの生成はロイカス管理画面>アップロードファイル
「アップロード」より画像もしくは動画をアップロードし
赤枠の「URLをコピー」にて行ってください。
動画の場合は、「URLをコピー」が出ませんので、
下記赤枠「ダウンロード」をクリックし、開いたページのURLもしくは、
右クリック→「リンクのアドレスをコピー」しURLを生成してください。
テンプレート
カードタイプ＋クリックボタン
{
"type": "carousel",
"contents": [
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip2.jpg",
"size": "full",
"aspectRatio": "1:1",
"aspectMode": "cover",
"gravity": "center"
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"position": "absolute",
"width": "100%",
"height": "40%",
"offsetBottom": "0px",
"offsetStart": "0px",
"offsetEnd": "0px",
"background": {
"type": "linearGradient",
"angle": "0deg",
"startColor": "#00000099",
"endColor": "#00000000"
}
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": []
},
{
"type": "text",
"text": "HELLO",
"size": "xl",
"color": "#ffffff",
"weight": "bold"
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "hello, world",
"flex": 0,
"size": "md",
"color": "#ffffffff"
}
]
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "filler"
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "filler"
},
{
"type": "text",
"text": "Click",
"flex": 0,
"color": "#ffffff",
"offsetTop": "-2px"
},
{
"type": "filler"
}
],
"margin": "sm"
},
{
"type": "filler"
}
],
"spacing": "sm",
"margin": "xxl",
"height": "40px",
"borderColor": "#ffffff",
"cornerRadius": "4px",
"borderWidth": "light"
}
],
"spacing": "xs"
}
],
"offsetBottom": "0px",
"offsetStart": "0px",
"offsetEnd": "0px",
"position": "absolute",
"paddingAll": "20px"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "hello",
"size": "xs",
"color": "#ffffff",
"align": "center",
"offsetTop": "3px"
}
],
"position": "absolute",
"width": "53px",
"height": "25px",
"backgroundColor": "#ff334b",
"cornerRadius": "20px",
"offsetTop": "18px",
"offsetStart": "18px"
}
],
"paddingAll": "0px"
}
},
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "image",
"gravity": "center",
"size": "full",
"aspectRatio": "1:1",
"aspectMode": "cover",
"url": "https://loycus-prd.s3-ap-northeast-1.amazonaws.com/upload_media/21/img/MjAyNC0wMi0xNiAxNDo1MjozMg==.jpg"
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"position": "absolute",
"offsetBottom": "0px",
"offsetStart": "0px",
"offsetEnd": "0px",
"width": "100%",
"height": "40%",
"background": {
"type": "linearGradient",
"angle": "0deg",
"startColor": "#00000099",
"endColor": "#00000000"
}
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": []
},
{
"type": "text",
"text": "hello, world",
"size": "xl",
"color": "#ffffff",
"weight": "bold"
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "text",
"text": "hello, world",
"color": "#ffffff"
}
]
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "filler"
},
{
"type": "box",
"layout": "baseline",
"contents": [
{
"type": "filler"
},
{
"type": "text",
"text": "Click",
"flex": 0,
"color": "#ffffff",
"offsetTop": "-2px"
},
{
"type": "filler"
}
],
"margin": "sm"
},
{
"type": "filler"
}
],
"spacing": "sm",
"margin": "xxl",
"height": "40px",
"borderWidth": "light",
"borderColor": "#ffffff",
"cornerRadius": "sm"
}
],
"spacing": "xs"
}
],
"position": "absolute",
"offsetBottom": "0px",
"offsetStart": "0px",
"offsetEnd": "0px",
"paddingAll": "20px"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "hello",
"size": "xs",
"color": "#ffffff",
"align": "center",
"offsetTop": "3px"
}
],
"position": "absolute",
"width": "53px",
"height": "25px",
"backgroundColor": "#ff334b",
"cornerRadius": "20px",
"offsetTop": "18px",
"offsetStart": "18px"
}
],
"paddingAll": "0px"
}
}
]
}カードタイプ
{
"type": "carousel",
"contents": [
{
"type": "bubble",
"hero": {
"type": "image",
"url": "画像URL",
"margin": "none",
"size": "full"
}
},
{
"type": "bubble",
"hero": {
"type": "image",
"url": "画像URL",
"size": "full"
}
},
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "uri",
"label": "テキスト",
"uri": "リンク先URL"
},
"margin": "none",
"position": "relative",
"gravity": "center",
"flex": 1
}
]
}
}
]
}ボタンの色変更
{
"type": "carousel",
"contents": [
{
"type": "bubble",
"hero": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_5_carousel.png"
},
"body": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "chair",
"wrap": true,
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"contents": []
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "primary",
"action": {
"type": "uri",
"label": "見てみる",
"uri": "https://www.instagram.com/celbest.neko/"
}
}
]
}
},
{
"type": "bubble",
"hero": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_6_carousel.png"
},
"body": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "light",
"wrap": true,
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"flex": 1,
"contents": []
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"flex": 2,
"style": "primary",
"color": "#aaaaaa",
"action": {
"type": "uri",
"label": "見てみる",
"uri": "https://x.com/YahooNewsTopics?s=20"
}
}
]
}
}
]
}リッチビデオメッセージ
{
"type": "bubble",
"size": "mega",
"hero": {
"type": "video",
"url": "動画URL",
"previewUrl": "動画URL",
"altContent": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://design-gallery.jp/line-richmenu/"
},
"action": {
"type": "uri",
"label": "詳細はこちら",
"uri": "詳細ページへのリンク"
},
"aspectRatio": "20:13"
}
}動画の詳細は下記をご確認ください。
https://developers.line.biz/ja/docs/messaging-api/create-flex-message-including-video/
Was this helpful?
0 / 0