ノードの編集方法とメッセージタイプの関係について説明します。
- 1. ルートノード
- 2. メッセージノード
- メッセージタイプを選択
- 確認型テンプレートメッセージ
- ボタン型テンプレートメッセージ
- カルーセル型テンプレートメッセージ
- 文字メッセージ
- イメージマップメッセージ
- フレックスメッセージ
- プロパティを編集
- 3. アクションノード
1. ルートノード
- ルートノードはメッセージアクションとして扱われます。
- メッセージアクション用テキストを編集できます。
- 編集後「反映する」をクリックします。
2. メッセージノード
メッセージタイプを選択
メッセージタイプを選択します。6種類から選択できます。
確認型テンプレートメッセージ
- はい / いいえで回答できる設問を設定するときに選択します。
ボタン型テンプレートメッセージ
- 一つのカードの中で最大4つの選択肢を設定できます。
カルーセル型テンプレートメッセージ
- 複数のカードを横並びで表示します。カードは最大10個まで登録できます。
文字メッセージ
- テキストメッセージを表示させます。次のアクションがない場合に選択します。
https://ではじまる文字はハイパーリンク表示されます。- 数字が並ぶ場合、電話番号として扱われる場合があります。
イメージマップメッセージ
- トークルーム上に画像を表示させ、画像上をタップすることで次のアクションを呼び出します。
フレックスメッセージ
- レイアウトをカスタマイズできるメッセージです。
- CSS Flexible Box（CSS Flexbox）の基礎知識が必要です。
- JSONデータの領域にJSON形式のデータを記載します。
- フレックスメッセージの作成支援ツールとして FLEX MESSAGE SIMULATOR がありますので適宜ご活用ください。
- 詳細な記法は 公式ドキュメント を参照ください。
Flexメッセージはバブル型のみ対応しています。
‣
{
"type": "bubble",
"hero": {
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"action": {
"type": "uri",
"uri": "http://linecorp.com/"
}
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Brown Cafe",
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"margin": "md",
"contents": [
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
},
{
"type": "text",
"text": "4.0",
"size": "sm",
"color": "#999999",
"margin": "md",
"flex": 0
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Place",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "Miraina Tower, 4-1-6 Shinjuku, Tokyo",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Time",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "10:00 - 23:00",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL1",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE1",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL2",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE2",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL3",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE3",
"uri": "https://linecorp.com"
}
}
],
"flex": 0
}
}プロパティを編集
各メッセージタイプで設定が必要な要素は以下の通りです。
‣
- メッセージノードに割り振られるIDです。自動採番されます。
‣
- フィールド上に表示されるメッセージノードの名前です。管理用名称のためユーザーには表示されません。
‣
- メッセージに画像をつけるかどうかを選択できます。
‣
- メッセージ内で大きく表示される部分です。
‣
- メッセージ内のタイトルの下に小さい文字で表示される部分です。
- ボタン型テンプレートメッセージには高さに制限(3行まで)があります。
- textの表示領域がこの制限を超えると、領域の下部が切り詰められます。
| 名前 | 確認型 | ボタン型 | カルーセル型 | 文字 | イメージマップ | フレックス |
|---|---|---|---|---|---|---|
メッセージID | ● | ● | ● | ● | ● | ● |
名前 | ● | ● | ● | ● | ● | ● |
画像 | ●(画像有りの場合) | ●(画像有りの場合) | ●(イメージマップエディタで作成) | ●(なくてもよい) | ||
タイトル | ● | ● | ●(なくてもよい) | |||
テキスト | ● | ● | ● | ● | ●(なくてもよい) | |
ポストバックアクション | ● | ● | ● | ●(なくてもよい) |
3. アクションノード
各メッセージタイプで設定が必要な要素は以下の通りです。
‣
- タイプ
- ポストバックアクション
- 次のメッセージノードを呼び出します。
- URIアクション
- 指定したURLのページを表示します。
- メッセージアクション
- 指定したテキストを表示します。
- 次にアクションがない場合、または別のメッセージアクションとつなげたい場合に使用します。
- ラベル
- 選択肢の表示名です。
- テキスト
- 選択肢をタップしたときに表示されるキーワードです。
- データ
- 次に呼び出したいアクションノードのIDです。
- 指定がなければ、下に作るアクションノードのIDが設定されます。
①が「ラベル」、②が「テキスト」です
‣
- URL
- 遷移先のURLを入力します。
- 列の数
- カードを横方向に何枚並べるかです。最大10枚まで設定できます。
- 1枚のカードに設定するアクションの数です。
- サムネイル画像
- 各カードに画像を設定するかどうかを選べます。
- タイトルを使用する
- 各カードにタイトルをつけるかどうかを選べます。
‣
- イメージマップを利用する場合は、イメージマップエディタで設定をします。
- 画像をアップロードし、エリアとアクションを設定していきます。