繼上一篇提到 Template Message 後，今天要繼續介紹進階訊息傳送方式 Flex Message
Flex Message 是我做 LINE BOT 到現在最喜歡的訊息格式
一方面是介面十分完美的達到客製化
另一方面是他簡單、直覺性的設計方式
那麼是不宜遲，我們馬上開始吧~

Flex Message 簡介

Flex Message 與 Template Message 最大的不同是，無論是在手機或是電腦都可以查看
使用了 CSS Flexible Box Layout Module ，達到更完美的客製化
建議搭配官方提供的工具 Flex Message Simulator
Python 可以參考 line-bot-sdk-python 中 Flex 的部分
也可以參考官方 API 文件
它可以讓你做出更棒更自由的訊息格式w
今天我們會使用官方提供的工具帶大家一步一步做出第一個 Flex Message

Flex Message Simulator

先前往 https://developers.line.biz/flex-simulator

在這邊，我們可以看到三個區塊
左邊的區塊會顯示出當前設計的預覽圖
中間的區塊是我們設計的部分
右邊的區塊則是針對每個參數進行調整的區域

在右上角的 Showcase 可以看到許多範例模板

最終當我們設計完成之後，就可以點及右上角的 view as JSON 產生 JSON 檔案
至於要怎麼將產生的內容以訊息傳送出去，晚點會在後面介紹

Flex Message 組成

Flex Message 的架構如下

可以發現 Flex Message 的結構是這樣的

• container
  • block
    • component

Container

Container 包含了

1. Bubble
2. Carousel

Carousel 其實就是很多個 Bubble 組成，且支援橫向操作

Bubble

Carousel

Block

Block 中包含了

1. Header: 顯示標題的區塊
2. Hero: 顯示圖片的區塊
3. Body: 顯示主要內容的區塊
4. Footer: 顯示按鈕或是其他訊息的區塊

Component

這邊因為使用了官方的 Flex Message Simulator ，我們只須在意外觀是否滿意，再透過該工具產出 JSON 即可，所以在此不特別贅述各項元件的參數以及 JSON 的型態

Component 是 Flex Message 最基本的結構，其中包含

1. Box:
   定義子 component 的 layout
   在 Box 裡面可以再放入其他 Component
   詳細可以參考官方文檔

2. Button
   按鈕元件，點擊後會觸發指定 action
   詳細可以參考官方文檔

3. Image
   顯示圖片的元件
   詳細可以參考官方文檔

4. Icon
   在文字前方的圖片元件
   詳細可以參考官方文檔

5. Text
   文字元件
   詳細可以參考官方文檔

6. Span
   調整文字格式的元件
   可以調整 粗細 大小 顏色 字型
   參數被包含在 Text 底下的 contents
   詳細可以參考官方文檔

7. Separator
   分隔行元件
   詳細可以參考官方文檔

8. Filler
   空格元件
   與 Separator 不同的是， Filler 是行內的空格，而 Separator 是直接佔去一行
   詳細可以參考官方文檔

9. Spacer
   只能被放置在 block 開頭或結尾的分隔行元件

   這個元件預計要在未來被移除，所以不建議使用了

   詳細可以參考官方文檔

實作部分

實作部份我們來嘗試建立一個個人名片，當用戶傳送 profile 給機器人時，我們就會回傳這個名片資訊
這個名片需要包含以下內容:

1. 關於自己的圖片
2. 名稱
3. 聯絡方式
4. 底下附上按鈕導向自己的網站(或是其他網站)

建立版型

接下來就開始實作吧~
1. 新增一個 Bubble Container
點擊右上角的 New ，選擇 bubble

2. 新增一張圖片
我們的圖片要放在 hero 的 Block 中
點擊 hero 後，點選上方的 + ，並選擇 image

接下來點擊剛剛新增的 image
將我們喜歡的圖片連結放到 url 的方格中

但是目前這樣的版型不太好看

調整參數

• size 改成 full
• aspectRatio 調整成適當的比例
• aspectMode 改成 cover

接下來就能看到美美的版型了owo

3. 新增個人資訊
個人資訊我們會放在 body 這個 block 之中

將 hello, world 改成自己的名稱

但是目前顯示出來的文字大小以及粗細不太夠，我們再做一點調整

調整參數

• size 改成 xl
• weight 改成 bold
  另外想要更好看一點，可以調整顏色
  顏色的調整可以先到 w3schools 找到喜歡的顏色，將 hex 放入 color 的格子中
  

現在就會變成這樣囉~

接著是其他資訊
點擊 vertical box 後，新增一個 box

再放入簡介

接下來我想要放郵件和個人網站連結

點擊在上面的 vertical box 後，新增兩個 box

將兩個 box 都改成 baseline

我在這兩個 baseline 的最前方都新增了一個 icon

如果說新增元素後發現位置不對，可以透過上方的 上/下 鈕來調整

我在 flaticon 找了兩個喜歡的 icon 放入
接下來將文字部分做修改
到目前為止呈現的想法如下

4. 新增網站連結按鈕
最後在 footer 的 block 中，我要放入一個 buttom 連結到我的網站

首先點擊 footer 後，新增一個 box

再來點擊 footer 裡面的 vertical box ，新增 button

將原本的文字方塊刪除

來到剛剛新增的按鈕，選擇 uri action ，並將 label 以及 uri 調整

到這邊就完成囉~(歡呼

傳送 Flex Message

這次的範例Code Github連結
首先，在 Flex Message Simulator 的右上角點擊 View as JSON

你會看到一長串的 JSON
還好這些不是自己手刻XD
將這串 JSON 複製

到我們的專案資料夾底下新增一個 card.json ，將剛剛複製的內容貼上

在 main.py 最前面導入 json 套件

import json

在 handle_message 中新增以下內容
我們將剛剛的 JSON 導入到 FlexMessage
在 python 中要傳送 Flex Message ，可以直接將 JSON 傳入到 FlexSendMessage
不過在 JSON 之前需要給一個 alt_text ，這是訊息顯示的預覽內容
詳細可以參考 line-bot-sdk-python

    if(message == 'profile'):
        FlexMessage = json.load(open('card.json','r',encoding='utf-8'))
        line_bot_api.reply_message(reply_token, FlexSendMessage('profile',FlexMessage))

可以先在本機使用 ngrok 測試
記得要到 https://manager.line.biz/ 將 webhook 連結修改

如果忘記要怎麼做本機測試，可以參考 Day03 的文章
如果忘記要怎麼部屬到 heroku 上，可以參考 Day04 的文章

大功告成~

後記

Flex Message 真的超棒w
原本呆板的訊息模式直接大升級! 超漂亮的拉!

雖然這邊只有介紹 Bubble Container ，不過 Carousel 也是一樣的
各位不訪自己嘗試玩玩看，會發現到很多有趣的東西喔!
有了 Flex Message Simulator 設計上真的輕鬆很多
而且我們只需要將 JSON 直接複製起來貼上就可以用了，實在是很方便w

之前我在某場黑克松當中也有使用 Flex Message
那是我第一次碰到它就直接愛上它了XD

希望大家也玩得開心囉~

參考資料

CSS Flexible Box Layout Module
line-bot-sdk-python
官方API文件
w3schools
flaticon
今日範例Code Github連結