各種Flexメッセージ活用法

テキスト、画像、動画、ボタンなどの要素を自由に組み合わせて、レイアウトを細かくカスタマイズできる各種Flexメッセージの設定、作成方法について紹介します。

できること

・DX-LINEでは、各種Flexメッセージが送信可能
・動的テンプレートでもFlexメッセージ形式で作成が可能
・UIからFlexメッセージ作成できるDX-LINEフレックスメッセージ機能はv2.6～利用可能

設定方法

リッチメッセージのテンプレートを新規作成する

・レコードタイプ:リッチメッセージを選択する

・メッセージタイプ:オリジナル
・オリジナルメッセージ:空のまま保存
※この時点ではテキストベースの「JSON形式」のデータは入力しないでください！後で入力します。

シミュレーションからFlexメッセージを作成する

サイト: https://developers.line.biz/flex-simulator/ にてFlexメッセージを作成し、「JSON形式」の内容をオリジナルメッセージにコピーする。

上の図を拡大して参照してください。
空欄で保存すると、自動でテンプレートが入力されますが、下記部分は消さないでください。
{“type”:”flex”,”altText”:”テキスト”,”contents”:JSON形式データ}　←消してしまった際は最後に忘れずに

「有効」を選択すると、利用可能になります。
「チャット画面利用可」を選択し、チャット画面から選択可能になるように設定します。

※必要に応じて、使用時に確認しやすいために、プレビュー用の画像イメージをセットする。

その他の種類のリッチメッセージ

そのままJSON形式のデータを「内容」に保存して利用する。
例えば　クイックリプライ
https://developers.line.biz/ja/docs/messaging-api/message-types/#quick-reply
https://developers.line.biz/ja/docs/messaging-api/using-quick-reply/

{
  "type": "text",
  "text": "Select your favorite food category or send me your location!",
  "quickReply": {
    "items": [
      {
        "type": "action",
        "imageUrl": "https://dx-line.com/newhp/images/logo.png",
        "action": {
          "type": "message",
          "label": "Sushi",
          "text": "Sushi"
        }
      },
      {
        "type": "action",
        "imageUrl": "https://dx-line.com/newhp/images/img04.png",
        "action": {
          "type": "message",
          "label": "Tempura",
          "text": "Tempura"
        }
      },
      {
        "type": "action",
        "action": {
          "type": "location",
          "label": "Send location"
        }
      }
    ]
  }
}

送信後のイメージ:

メッセージの検証

作成したリッチメッセージ正しく送信できたかは、「メッセージ検証」ボタンをクリックして検証できます。
エラーがある場合、エラーメッセージを確認して修正してください。