发送 Flex Message

LINE BOT 可以使用 Flex Message ( 弹性样板消息 ) 发送客制化的选单消息，Flex Message 使用网页 CSS3 的 Flex 语法，可以设计较丰富且多样性的按钮版型，这篇教学会介绍如何发送 Flex Message 以及设计客制化的选单。

建议先阅读：建立 LINE Channel

快速导览：

• 设计 Flex Message
• Python 发送 Flex Message
• 小结

设计 Flex Message

打开 LINE 官方提供的设计工具：Flex Message Simulator，并使用 LINE 的账号登录，登录后默认会打开一个展示的样板。

前往：Flex Message Simulator

设计工具主要分成三个区块：

• 左边的区块：预览画面 ( 传送到 LINE 的消息长相 )。
• 中间的区块：Flex Message 的树状清单结构。
• 右边的区块：点击中间区块清单里的元件，出现对应可以修改的属性或参数。

点击中间清单的元件后，就能从上方的“+”号，加入额外的元件。

右上方有四个功能按钮：

• New：建立新的 Flex Message 样板。
• Showcase：使用范本。
• Send：将设计好的样板传送到 LINE 测试。
• View as JSON：查看发送样板的 JSON 文件。

点击右上方的 Send 按钮后，会出现 Register destination 的按钮，继续点击后会出现 QRCode，扫描 QRCode 加入好友就能测试。

Python 发送 Flex Message

点击 Flex Message Simulator 右上方的 View as JSON 按钮，打开 Flex Message 的 JSON 文件。

Colab 安装 line-bot-sdk 后，输入下方的程序码，填入自己的 access token 和 user ID，并将 Flex Message 的 JSON 贴入，执行后就会看见 LINE 出现 Flex Message ( 程序码记得加载对应的函示库 )。

from linebot import LineBotApi, WebhookHandler
# 載入對應的函式庫
from linebot.models import FlexSendMessage, BubbleContainer, ImageComponent
line_bot_api = LineBotApi('你的 Access Token')
# 剛剛 Flex Message 的 JSON 檔案就貼在下方
line_bot_api.push_message('你的 User ID', FlexSendMessage(
    alt_text='hello',
    contents={
      "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 设计工具，不仅能直接修改范本，也能轻松的从无到有设计复杂的版面，让 LINE BOT 回应的消息更具特色。

意见反馈