Day 18：Flex Message 設計個人名片

前言

從基礎的文字互動開始，我們逐步探索了六大核心訊息類型的發送機制、Template Message 的結構化設計，以及 ImageMap Message 的互動式體驗。今天，我們將進入 LINE Bot 最具彈性的訊息格式 Flex Message。

• 本日程式碼的範例連結
• 本日設計 Flex Simulator JSON 檔案 (可直接在 Flex Simulator 替換顯示)

Flex Message 是什麼？

Flex Message 卡片使用 CSS Flexible Box 的方式進行版面控制。

結構如下：

1. Container：決定是單張卡片或多張輪播卡片，控制卡片的佈局方式。
2. Block：將卡片拆分成 Header、Hero、Body 及 Footer 四個頂層區塊，不需要全部都使用到。
3. Components：涵蓋 Box(群組排版)、Button(按鈕)、Image(圖像)、Video(影片)及 Separator(分隔線)等小組件，可以讓每個區塊的擺放組合方式更加多元。

【 Flex 限制 】： 同一個 Flex Message 在不同使用者的裝置上可能會顯示得不太一樣，顯示效果會受到裝置作業系統、LINE 版本、螢幕解析度、語言設定和字型等因素影響。

【 Flex Message Block 表示圖 】

【 Flex Message Block 實際展示圖 】

可以看到每個 Block 內部都能運用多種 Components 組合呈現

開始設計 Flex Message

感覺有些困難？有點不知道怎麼開始？這邊手把手帶你製作一次！

建議使用官方提供的 Flex Message Simulator 工具進行製作，不僅可以即時預覽卡片設計效果，還能直接發送到你的 LINE 帳號，查看在行動裝置上的實際呈現。最重要的是 Flex Message 本身產生的 JSON 結構較為複雜，透過此工具確認設計完成後，即可一鍵複製 JSON 程式碼，直接套用到自己的 LINE Bot 上，非常方便。

【 Flex Message Simulator 右上角的四個核心功能】

• New：建立 Bubble 或 Carousel 佈局的初始環境(前面提到的 Container)。
• ShowCase：提供 Flex Message 常見版型範例。
• Send：透過官方帳號 Flex Message Sim 發送訊息，可直接在行動裝置上查看實際效果。
• View as JSON：顯示 Flex Message 所需的 JSON 資料，可直接複製到我們建立的 LINE Bot 後端進行處理並發送。

【 Flex Message Simulator ShowCase 常見版型】

可以根據情境選擇想要的模板

Flex Message - Container

透過右上角的 New 快速建立一個 Bubble 卡片。可以看到畫面上的白色區塊位於 Body 的 Box 中。從這裡可以理解整體架構：首先選擇 Container，接著定義要使用的 Block(這邊是全部使用)，而在 Block 內部才能放置 Components。系統預設會放入一個 Vertical Box(垂直排列)。

可以透過修改 layout 參數將其改為 Horizontal(水平排列)。接著試著在 Body 內的 Vertical Box 中放入兩個 Text 組件，完成兩格式的簡單排版設計。

這邊可以看到幾個重要的特性：

• flex：預設屬性就如同 CSS 的 flex: 1 0 0,可以改動數字來影響 flex-grow 分配剩餘空間。可以看到文字旁邊有空格，寬度看起來相同,試著將其中一個改成 2,另一個改成 3，查看不同分配比例呈現的效果。如果僅想顯示內容寬度,可以輸入 0。
• margin：外距，可以使用 Percentage 、 Pixels 或 Keywords 。常見 keywords 像是 xs、sm、md、lg、xl，更多選項可至官網 查看。
• Padding：內距。可使用 Percentage 、 Pixels 或 Keywords 。
• align：主軸對齊的方式。
• backGroundColor：背景顏色。
• color：文字顏色。
• Weight：字重，可選擇是否使用粗體。

【 不同 Flex 比重之間的變化】

大概知道這些之後，我們就可以開始動手做今天的目標！！

Flex Bubble 個人電子名片卡片

我們可以根據每個 Block 思考要放置哪些內容，這個電子名片僅使用到 Header、Hero 及 Body。

Flex Header

Header 區塊下,最外層只能是一個 Box 元件。因此設計時可以先建立一個 Box 作為起點,再根據需求將內容嵌入其中。這裡我放入了自己的座右銘「熱愛解決問題的工程師」。

【 參數設定 】

• header：
  • backgroundColor：#003366。
• box：
  • paddingAll：xl。預設是xxl，調整 xl 讓 box 外距變小一些
  • text.value：熱愛解決問題的工程師
  • text.color：#FFFFFF
  • text.weight：bold

Flex Hero

Hero 區塊下，最外層可以是 Box、Image 或 Video 組件。這裡我們使用 Image 來呈現。

• image.url：放一張代表你自己的圖片，這裡先以可愛貓貓圖片代替。
• inage.size：100%。預設是 md 大小，這邊我們希望填滿使用 100% 的方式。

Flex Body

這邊我們將拆解成更小的步驟，讓所有人都可以試著打造自己的電子名片。

Step 1 ：創建 vertical box，完成垂直盒子中的名子及職稱

【 參數設定 】

• 第一個 text：
  • value：顯示的內容，輸入名子。
  • size：lg。預設是 md，這邊讓名稱可以大一些。
  • weight：bold。讓名稱呈現粗體呈現。
• 第二個 text：
  • value：顯示的內容，輸入職稱。
  • size：sm。預設是 md，這邊讓職稱小一些。
  • color：#aaaaaa

Step 2 ：創建第二個 box，將同性質的描述放在一起管控

【 參數設定 】

• box：
  • spacing：預設是 none。這邊調整成 md，就可以把 box 內的組件間距拉開囉。
  • paddingStart & paddingBottom：設定成 sm，讓 box 跟上下組件之間能有一些距離。
• box.text.size：設定成 sm，讓字體稍微小一些。
• box.text.value：紀錄對應工作經驗。

看起來有模有樣了，接著我們當然也要開始設定一些 Action，讓使用者點擊卡片可以連結到自己相關聯的網站是很重要的，我們來試試看吧！

Step 3 ： 創建左圖右文的按鈕，綁定 action 連結個人相關聯資訊

這邊僅需先完成一個 Box 排版，就可以複製使用囉

【 參數設定 】

• box
  • layout：horizontal。這邊我們想要做的是左邊是 icon，右邊是標題的按鈕。
  • spacing：lg。調整圖片跟文字之間的距離。
  • padding.top & padding.bottom：sm。讓按鈕看起來比較不會太擠。
  • padding.Start：md。讓圖片距離按鈕邊界有點距離。
  • alignItems：center。控制交叉軸的對齊方式。這邊設置讓組件垂直方向居中對齊。
  • Background
    • type：linearGradient。這代表這是一個漸層的顏色，會根據角度從 startColor 過渡到 endColor。
    • angle：115deg。
    • startColor：#f2f2f2
    • endColor：#d9d9d9
• image
  • url：填寫 icon https url。
  • size：30px，保持一個相對好識別的大小。
  • flex：0。預設會是平分，這邊調整成把剩餘空間都放到文字區塊的右邊。

回到 Box 的部分，滑到最下面可以看到 action，也就是這個 Box 被點擊要觸發什麼事件。這邊我們類型選擇使用 uri，輸入要連結的對應網址，就可以完成 Box 按鈕的點擊事件。

這時候會發現兩個 Box 按鈕黏在一起。還記得相同性質的東西，還記得相同性質的元素可以用一個 Box 包起來統一管理。再建立一個 Box,將剛剛創建的兩個 Box 複製進去,設定 spacing 為 xl 即可解決間距問題。

Step 4：創建相關 icon 清單

最後一步，我希望將履歷以 icon 的方式呈現並設置為可點擊。

首先，創建一個分隔線(Separator)組件，接著創建水平的 Box，放入同性質的履歷相關 icon 連結。

【 參數設定 】

• separator
  • margin：md。讓分隔線跟上面組件的間距拉開一些。
• box
  • layout：horizontal。為了讓組件可以水平排列。
  • spacing：lg。讓 icon 之間可以有間距。
  • justifyContent：控制主軸的對齊方式。這邊設置讓組件水平方向居中對齊。
  • paddingTop：md。讓 box 跟 separator 之間不要貼太近。
• image
  • flex：0。這邊我們只讓圖片寬度顯示我們設定的 size 寬度，間距由 box 調整。
  • size：40px。

最後要將各個 Image 設置 action，讓其他人可以透過圖片 icon 連結到履歷及個人資料。設置完成後，若想查看 LINE 呈現狀況，可點選右上角的 Send，即可透過 Flex Message Sim 官方帳號查看效果。

NestJS 配置 LINE Bot Flex Message 處理流程

型別的部分基本上就是使用原先的型別，type 交由處理的函式負責，並且將發送訊息共用屬性的配置，修改成我們自定義的。

【 型別定義 】
line-message/types/flex-message.ts

import { MessageCommon } from './message-common';
import { FlexMessage } from '@line/bot-sdk/lib/messaging-api/model/models';

export type FlexMessageReq = MessageCommon & Omit<FlexMessage, 'type'>;

【 創建 FlexMessage 處理函式 】
這部分可以看到 contents 屬性，就是我們需要從 Flex Message Simulator 中取得的 Flex Message JSON 資料。

line-message/line-message.service.ts

createFlexMessage(flexMessageReq: FlexMessageReq): FlexMessage {
    const { altText, contents, sender, quickReplyItems } = flexMessageReq;

    const flexMessage: FlexMessage = {
      type: MessageType.Flex,
      altText,
      contents, // 這部分替換成 Flex Message Simulator 產生的 JSON 資料
      ...this.buildCommonMessageProps(sender, quickReplyItems),
    };

    return flexMessage;
}

【 右上角 View as JSON 點下去後，點選右下角 Copy 】

本日結語

今天主要透過電子名片來說明 Flex Message Simulator 的使用方式,在設計 Flex Message 時會方便許多。Flex Message 不僅能呈現出如 Template Message 的效果,同時又具備高度的客製化彈性,可以有多種不同的設計方式。