📗

ノードとメッセージタイプ

ノードの編集方法とメッセージタイプの関係について説明します。

1. ルートノード

  • ルートノードはメッセージアクションとして扱われます。
  • メッセージアクション用テキストを編集できます。
  • 編集後「反映する」をクリックします。
image

2. メッセージノード

メッセージタイプを選択

メッセージタイプを選択します。6種類から選択できます。

image

確認型テンプレートメッセージ

  • はい/いいえで回答できる設問を設定するときに選択します。
image

ボタン型テンプレートメッセージ

  • 一つのカードの中で最大4つの選択肢を設定できます。
image

カルーセル型テンプレートメッセージ

  • 複数のカードを横並びで表示します。カードは最大10個まで登録できます。
image

文字メッセージ

  • テキストメッセージを表示させます。次のアクションがない場合に選択します。
  • https:// ではじまる文字はハイパーリンク表示されます。
  • 数字が並ぶ場合、電話番号として扱われる場合があります。
image

イメージマップメッセージ

  • トークルーム上に画像を表示させ、画像上をタップすることで次のアクションを呼び出します。
  • image

フレックスメッセージ

  • レイアウトをカスタマイズできるメッセージです。
    • CSS Flexible Box(CSS Flexbox) (opens new window)の基礎知識が必要です。
  • JSONデータの領域にJSON形式のデータを記載します。
    • 💡

      Flexメッセージはバブル型のみ対応しています

      image
      JSONデータサンプル
      {
          "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
          }
      }
    • フレックスメッセージの作成支援ツールとして FLEX MESSAGE SIMULATOR がありますので適宜ご活用ください。
    • 詳細な記法は公式ドキュメント を参照ください

プロパティを編集

各メッセージタイプで設定が必要な要素は以下の通りです。

メッセージID
  • メッセージノードに割り振られるIDです。自動採番されます。
名前
  • フィールド上に表示されるメッセージノードの名前です。管理用名称のためユーザーには表示されません。
画像
  • メッセージに画像をつけるかどうかを選択できます。
タイトル
  • メッセージ内で大きく表示される部分です。
テキスト
  • メッセージ内のタイトルの下に小さい文字で表示される部分です。
    • ボタン型テンプレートメッセージには高さに制限(3行まで)があります。
    • textの表示領域がこの制限を超えると、領域の下部が切り詰められます。

表1

名前確認型ボタン型カルーセル型文字イメージマップフレックス
メッセージID
名前
画像
●(画像有りの場合)
●(画像有りの場合)
●(イメージマップエディタで作成)
●(なくてもよい)
タイトル
●(なくてもよい)
テキスト
●(なくてもよい)
ポストバックアクション
●(なくてもよい)

3. アクションノード

各メッセージタイプで設定が必要な要素は以下の通りです。

アクション
  • タイプ
    • ポストバックアクション
      • 次のメッセージノードを呼び出します。
    • URIアクション
      • 指定したURLのページを表示します。
    • メッセージアクション
      • 指定したテキストを表示します。
      • 次にアクションがない場合、または別のメッセージアクションとつなげたい場合に使用します。
  • ラベル
    • 選択肢の表示名です。
  • テキスト
    • 選択肢をタップしたときに表示されるキーワードです。
    • ①が「ラベル」、②が「テキスト」です

      image
  • データ
    • 次に呼び出したいアクションノードのIDです。
    • 指定がなければ、下に作るアクションノードのIDが設定されます。
カルーセルの設定
  • URL
    • 遷移先のURLを入力します。
  • 列の数
    • カードを横方向に何枚並べるかです。最大10枚まで設定できます。
    • 1枚のカードに設定するアクションの数です。
  • サムネイル画像
    • 各カードに画像を設定するかどうかを選べます。
  • タイトルを使用する
    • 各カードにタイトルをつけるかどうかを選べます。
イメージマップエディタ
  • イメージマップを利用する場合は、イメージマップエディタで設定をします。
  • 画像をアップロードし、エリアとアクションを設定していきます。

表2

Name確認型ボタン型カルーセル型文字イメージマップフレックス
アクション
  タイプ
●(メッセージ,URIアクションのみ)
  ラベル
  テキスト
  データ
  URL
カルーセルの設定
  列の数
  アクション数
  サムネイル画像を使用する
  タイトルを使用する
イメージマップエディタ