Flexメッセージを送りたい
- Site_admin_1
- MK
- MT
Google Analyticsで開封率を取得したい場合や、高度な商品説明などのカスタマイズメッセージ、
カルーセルなど、Flexメッセージを使うと多様なメッセージが作成できます。
Flexメッセージは、OMLINE-O上では確認することができないため、LINE社が提供する、
Flexメッセージシュミレータを利用して作成します。
1. LINE社が提供するFlexメッセージシミュレータのサイトを開きます。
https://developers.line.biz/flex-simulator/
※OMLINE-Oのメッセージ作成画面のFlexメッセージ入力欄からも開くことができます。
※Flexメッセージシミュレータのサイトを開いた際、
LINEへのログインが求められる場合があります。
普段、LINE公式アカウントの管理画面のログインに利用されているLINEアカウント、またはビジネスアカウントでログインしてください。
※ログインした際、「LINE Developers」というサイトが表示された場合は、
画面左側の「ツール」⇒「Flex Message Simulator」を開いてください。
2. Flex Message Simulatorの画面が開いたら、右上の「View as JSON」のボタンを押してください。
3. テキストエリアが表示されるので、テキストエリア内の文字列(JSON)を、一旦全て削除してください。
4. ご利用するFlexメッセージテンプレートの文面をテキストエリアに貼り付け、
「①タイトル文をここに入れてください」などの変更部分を修正します。
▼サンプルテンプレート一覧 各種ご案内などにご利用いただける「タイトル + 本文」のシンプルなFlexメッセージです
シンプル文 テンプレート本文 {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"weight": "bold",
"color": "#ff4500",
"size": "md",
"text": "①タイトル文をここに入れてください",
"wrap": true
},
{
"type": "separator",
"margin": "xxl"
},
{
"type": "box",
"layout": "vertical",
"margin": "xxl",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "②本文をここに入れてください",
"size": "sm",
"color": "#555555",
"flex": 0,
"wrap": true,
"weight": "bold"
}
]
}
]
}
]
},
"styles": {
"footer": {
"separator": true
}
}
}
複数のFlexメッセージを横に並べて表示できる形式のメッセージです。
カルーセルテンプレート本文 {
"type": "carousel",
"contents": [
①並べたいテンプレートのテキストをここに入れます。入れたらカンマを付けてください,
②並べたいテンプレートのテキストをここに入れます。入れたらカンマを付けてください,
③並べたいテンプレートのテキストをここに入れます。最後はカンマは不要です。
]
}
商品紹介などにご利用いただける「画像 + 複数メッセージ欄 + ボタン」のFlexメッセージです
商品紹介 テンプレート本文 {
"type": "bubble",
"hero": {
"type": "image",
"url": "①ここに画像のURLを記載してください ※URLはhttpsである必要があります",
"size": "full",
"aspectRatio": "20:20",
"aspectMode": "cover"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "②ここに商品名などのメインのテキストを記載してください",
"weight": "bold",
"size": "xl",
"wrap": true
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"color": "#008080",
"size": "lg",
"flex": 1,
"wrap": true,
"text": "③ここに価格などのサブのテキストを記載してください"
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"wrap": true,
"text": "④ここに商品の詳細などのテキストを記載してください",
"color": "#696969",
"size": "sm",
"flex": 1
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "⑤ここに商品ページへ遷移するボタンのラベルを記載してください",
"uri": "⑥ここに商品ページのURLを記載してください"
}
},
{
"type": "spacer",
"size": "sm"
}
],
"flex": 0
}
}
|
5. 修正が完了したら、右下の「Apply」ボタンを押してください。
6. 左側にメッセージのプレビューが表示されるので、出来栄えを確認してください。
※ Flexメッセージの構文に誤りがある場合などは、 ・構文に誤りがある(カンマの漏れなど) ➡ invalid json
|
7. Flexメッセージが完成したら、「View as JSON」画面の右下の「Copy」を押してください。
8. コピーしたテキストを、OMLINE-OのFlexメッセージのJSON欄に張り付けてください。
9. altテキストは、メッセージ着信通知欄に表示されるメッセージです。こちらも必須入力項目ですので、入力してください。
以上で設定は完了です。