LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法

今回はShopifyの発送完了時にLINEで送信する「追跡番号付き発送完了通知」を例に挙げて、Flex Message Simulatorの基本的な使い方をご紹介します。

Flex Messageは通常の文章や画像だけでなく、アイデア次第では、LINE公式アカウントのメッセージ配信よりも柔軟にカスタマイズされた内容を通知することができます。

各ストアのサービスに合った通知内容で、これからのLINE配信に活かしていただければと思います。

※本記事ではShopifyをもとに解説していますが、Flex Message Simulatorの利用方法はShopifyに関わらず参考にしていただけます。

Flex Messageで自由にカスタマイズしたLINEのメッセージを配信しよう！

Flex Messageとは、ボタン・画像・動画・アイコン・テキストなどのレイアウトを自由にカスタマイズできるLINEのメッセージで、Messaging APIを利用して送信できます。Flex Messageで作成できるメッセージの例や構成要素など基本をおさえつつ、Flex Messageの作成方法を解説します。

作成する追跡番号付き「発送完了通知」（完成物の確認）
「発送完了通知」の構造を理解する（完成物の構造）
送りたい内容にアレンジしてみましょう
Flex Messageを送るには？
その他のテンプレートの紹介
まとめ

作成する追跡番号付き「発送完了通知」（完成物の確認）

今回はサンプルとしてこちらの「発送完了通知」メッセージを使って構造の理解を深めていただき、その後に様々なアレンジを加えていきましょう。

【発送完了通知をLINE配信する時のイメージ画像】

完成物で使用したコードは下記にテンプレートでご用意しています。※下記トグルの＋をクリックすると展開されコードが表示されます。

発送完了通知のサンプルコード

【発送完了通知のサンプルコード】

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "商品発送のお知らせ",
        "weight": "bold",
        "color": "#0f0f0f",
        "size": "sm",
        "margin": "sm"
      },
      {
        "type": "text",
        "text": "ご注文いただいた商品を \n 発送しました",
        "weight": "bold",
        "size": "xl",
        "margin": "md",
        "wrap": true
      },
      {
        "type": "text",
        "text": "{{shop.name}}",
        "size": "xs",
        "color": "#aaaaaa",
        "wrap": true
      }
    ]
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "{{order.billingAddress.lastName}}様、ご注文いただいた商品を発送いたしました。到着までしばらくお待ちくださいませ。",
            "size": "sm",
            "color": "#555555",
            "wrap": true
          },
          {
            "type": "text",
            "text": "※ 出荷直後は配送追跡ができない場合があります。伝票番号未登録と表示される場合は、お手数ですがしばらく経ってから再度お試しください。",
            "size": "sm",
            "color": "#555555",
            "wrap": true,
            "margin": "md"
          },
          {
            "type": "separator",
            "margin": "xxl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "ご注文番号",
                "size": "md",
                "color": "#555555"
              },
              {
                "type": "text",
                "text": "{{order.name}}",
                "size": "md",
                "color": "#111111",
                "align": "end"
              }
            ],
            "margin": "xl"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "size": "md",
                "color": "#555555",
                "text": "追跡番号",
                "flex": 0
              },
              {
                "type": "text",
                "text": "{% for trackingInfo_item in fulfillment.trackingInfo %}{{trackingInfo_item.number}}{% endfor %}",
                "size": "md",
                "color": "#111111",
                "align": "end"
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "uri",
          "label": "配送状況を確認する",
          "uri": "https://mystore.myshopify.com/"
        },
        "style": "primary",
        "color": "#000000",
        "margin": "md"
      }
    ]
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}

※今回のFlexメッセージには {{ }} のように変数が含まれています。

利用しているツールによっては、”変数の記述形式が違う”ことや”変数は入れられない”ことがありますので、そのような場合は汎用的な内容にしてください。

尚、弊社の「CRM PLUS on LINE」ではShopifyからデータを取得して代入する機能があるため、本記事の内容に沿って変数を利用したFlexメッセージもご利用いただけます。

皆さんもぜひLINEのFlex Message Simulatorにログインして、一緒に手を動かしながら作成してみてくださいね。

※LINE Developersコンソールの開発者アカウントでLINE Developersコンソールにログインする必要がありますので、開発者アカウントを持っていない場合はまず「アカウントを作成」から新規作成をしてください。またヘルプガイドとして、LINE Developersの公式ドキュメントも併せてご参照ください。

Flex Message Simulatorはプレビューエリア・ツリービューエリア・プロパティエリアの3つのエリアで構成されています。

プレビューエリア：ツリービューエリアとプロパティエリアで入力したデータを元にしたFlex Messageが表示される部分
ツリービューエリア： Flex Messageのデータ構造を編集したり表示したりする部分
プロパティエリア：Flex Messageの構築に必要なデータを編集する部分

Flex Message Simulatorの構成 — （画像引用：https://developers.line.biz/ja/docs/messaging-api/using-flex-message-simulator/）

「発送完了通知」の構造を理解する（完成物の構造）

さきほど確認いただいた「発送完了通知」メッセージの構造を分解してみると、大きく分けて下記のようなブロックから成り立っています。

◆分解したブロック

header（ヘッダー）ータイトルやストア名など表題として
hero（ヒーロー）ー画像の挿入など
body（ボディ）ーメインの文章など
footer（フッター）ーリンク付きのボタンなど

※上記の画像内には「hero」が含まれていませんが、後述する「アレンジしよう」の章で画像の追加をしてみようと思います。

たとえば、オレンジ枠のheader（ヘッダー）の場合は下記のような構造になっています。

Flex Message Simulator（header） — header（ヘッダー）

header部分は、headerの中に1つbox（ボックス・箱）があり、そのなかに「A text（テキスト・文章）」という3つの子要素から成り立っています。

たとえばheader内の①の文章を編集したい場合は、まず中央のツリービューエリア（黒い画面）の①に相当する箇所をクリックします。青色にマークされたのを確認した後、プロパティエリア（右側）で文章の編集を行います（同様に②と③の文章変更する場合も同じ手順です）。

文章変更以外にも、文字の上下余白幅、サイズ、（文字と文字の）間隔、色、太さなどもプロパティエリアで調整可能です。

headerと同様に、「body（ボディ）」や「footer（フッター）」も同じような構造ですので、気になる箇所をクリックして、プロパティエリアで確認してみてください。

送りたい内容にアレンジしてみましょう

◆下準備：
LINEのFlex Message Simulatorにログインして、以下のサンプルコードをコピーして貼り付けます。※下記トグルの＋をクリックすると展開されコードが表示されます。

発送完了通知のサンプルコード

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "商品発送のお知らせ",
        "weight": "bold",
        "color": "#0f0f0f",
        "size": "sm",
        "margin": "sm"
      },
      {
        "type": "text",
        "text": "ご注文いただいた商品を \n 発送しました",
        "weight": "bold",
        "size": "xl",
        "margin": "md",
        "wrap": true
      },
      {
        "type": "text",
        "text": "{{shop.name}}",
        "size": "xs",
        "color": "#aaaaaa",
        "wrap": true
      }
    ]
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "{{order.billingAddress.lastName}}様、ご注文いただいた商品を発送いたしました。到着までしばらくお待ちくださいませ。",
            "size": "sm",
            "color": "#555555",
            "wrap": true
          },
          {
            "type": "text",
            "text": "※ 出荷直後は配送追跡ができない場合があります。伝票番号未登録と表示される場合は、お手数ですがしばらく経ってから再度お試しください。",
            "size": "sm",
            "color": "#555555",
            "wrap": true,
            "margin": "md"
          },
          {
            "type": "separator",
            "margin": "xxl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "text": "ご注文番号",
                "size": "md",
                "color": "#555555"
              },
              {
                "type": "text",
                "text": "{{order.name}}",
                "size": "md",
                "color": "#111111",
                "align": "end"
              }
            ],
            "margin": "xl"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "text",
                "size": "md",
                "color": "#555555",
                "text": "追跡番号",
                "flex": 0
              },
              {
                "type": "text",
                "text": "{% for trackingInfo_item in fulfillment.trackingInfo %}{{trackingInfo_item.number}}{% endfor %}",
                "size": "md",
                "color": "#111111",
                "align": "end"
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "uri",
          "label": "配送状況を確認する",
          "uri": "https://mystore.myshopify.com/"
        },
        "style": "primary",
        "color": "#000000",
        "margin": "md"
      }
    ]
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}

【ログインした直後のサンプル表示】