概要

KARTEではターゲット配信を使用することで、LINEメッセージを送信することができます。

今回のSolution BlogではLINEのFlex MessageをKARTEから送信する際の実装方法をご紹介させていただきます。

Flex Messageとは

Flex Messageに関してはLINE公式ドキュメントでは下記のように記載されています。

Flex Messageでは、CSS Flexible Box（CSS Flexbox）の仕様に基づいて、レイアウトを自由にカスタマイズしたメッセージを送信することが可能になります。
これにより通常のLINEメッセージに比べ、より豊かでインタラクティブなレイアウトが可能なメッセージの送信をすることができます。

この機能を利用することで、LINE上でより自由度の高いクリエイティブの実装やメッセージの送信が可能になります。

Flex Message Simulatorを使ってJSONを作成

Flex Messageを送信するためにはLINE社が提供しているFlex Message Simulatorを使用して、送信するMessageの内容を作成します。

Flex Message Simulatorは、Flex Messageを作成し、プレビューできるツールです。開発環境を用意したりコードを書いたりすることなく、Flex Messageを作成し、Flex Messageを送信してプレビューできます。

詳しい使用方法はこちらをご覧ください。

Flex MessageでMessageのデザインが完了したら、右上の「view as JSON」からJSONをコピーしてください。

スクリーンショット2023-07-1416.21.43.png

サンプル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": "CALL",
          "uri": "https://linecorp.com"
        }
      },
      {
        "type": "button",
        "style": "link",
        "height": "sm",
        "action": {
          "type": "uri",
          "label": "WEBSITE",
          "uri": "https://linecorp.com"
        }
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "margin": "sm"
      }
    ],
    "flex": 0
  }
}

ここまでが完了したら、Flex Message Simulatorで行う作業は終了になります。

以降はKARTEの管理画面上での設定作業を進めていきます。

ターゲット配信でLINE Messageの設定を行う

まずはKARTEの管理画面にログインしていただき、接客サービスを新規作成します。

スクリーンショット2023-07-1416.44.32.png

使用するテンプレートに関しては、LINEの接客テンプレートのうち「direct json template (quick reply)を選択します。

テンプレートから接客を作成して、「リクエストするJSON」の中にFlex Message Simulatorで作成したJSONをペーストします。
スクリーンショット2023-07-1417.56.25.png

ペーストする際にFlex Message Simulatorで生成されるJSONはあくまでMessageのcontentsの部分が生成されるのみなので、下記の記述で生成したJSONを囲む必要があることにご注意ください。

[
    {
        "type": "flex",
        "altText": "【#{brands | replace('&amp;', '&') }】など本日セールスタート！\n\nフォロー❤️しているブランドのセールがまもなく始まります！",
        "contents": {
            "type": "carousel",
            "contents": [
                {
									"Flex Message Simulatorで生成したJSONを書き込む"
								}
            ]
        }
    }
]

ここまで設定ができたら通常通りの接客の設定画面にて、要件に合わせた配信設定を行なっていただき実行を押すと配信がされます。
スクリーンショット2023-07-1418.11.37.png

最後に

ここまででLINEのFlex Messageをターゲット配信で送信する手順は以上になります。

Flex Messageを使用することで、エンドユーザーに対してより一層魅力的なMessageを送信することができるようになり、顧客体験のさらなる向上にも期待ができるかと思います。

皆様も是非Flex Messageを活用する際に参考にしてみてください！

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！
ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

KARTEでLINE Flex Messageを送ってみた