[Line] Flex Message - 模擬器

Line 訊息只能傳送單一類型內容，例如文字、圖片或影片，但 Flex Message 基於 CSS Flexible Box (CSS Flexbox) 能提供更豐富且具互動性的版面配置，官方有提供模擬器，可以製作 Flex Message 並發送測試，該筆記會透過模擬器來發送 Flex Message

Flex Message Simulator 介紹

使用 Line 帳號登錄模擬器後，該畫面是進入預設版面

模擬器 Layout 分為三大區域，由左至右分別為預覽畫面、訊息控件樹狀圖、控件屬性，右上角四個按鈕功能分別為

• New：建立新的空 Flex Message，只有 bubble 和 carousel 兩個選項
• Showcase：使用內建 Flex Message 範本
• Send：將設計好的 Flex Message 傳送至 Line 進行測試，需要先把 Flex Message Simulator 加入好友才能進行發送
• View as JSON：查看設計 Flex Message json，當 Flex Message 設計到一半時可以先透過該功能把 Flex Message json 複製出來，要繼續編輯時再複製回去並按右下角 Apply 按鈕就可以回復

Flex Message 控件一覽圖

這張官方圖簡單明瞭

製作並發送 Flex Message

使用 Receipt 範例來建立該 Flex Message，只用上 body 區塊與 vertical 垂直排列

Flex Message json 檔案

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Flex Message Simulator",
        "weight": "bold",
        "color": "#1DB446",
        "size": "xs"
      },
      {
        "type": "text",
        "text": "Hello Flex Message",
        "weight": "bold",
        "size": "xl",
        "color": "#1E293B"
      },
      {
        "type": "text",
        "text": "從模擬器發出的第一張 Flex Message，這張卡片只用了最基礎的 body 區塊與 vertical 垂直排列容器",
        "size": "sm",
        "color": "#64748B",
        "wrap": true,
        "lineSpacing": "4px"
      }
    ]
  }
}

Flex Message 限制

同一則 Flex 訊息可能會因接收裝置的環境不同，而呈現不同的顯示效果。裝置的作業系統、LINE 版本、螢幕解析度、語言設定及字型，都可能影響訊息的顯示效果

• 參考資料
• Send Flex Messages
• Day09 進階訊息傳送3 - Flex Message
• 發送 Flex Message