Flex message將紀錄兩種寫法：由Flex Message Simulator編寫JSON的應用，以及自行編緝內容的寫法

Flex Message Simulator

Line官方提供快速編寫Flex message Simulator。
首先打開 Flex Message Simulator 。若尚未登入則需登入LINE Developers 帳戶

介紹Flex Message Simulator

Flex官方模擬器由3個部分組成：預覽區、樹形視圖區域、編輯屬性區域。

LINE官方提供的免費模板~

如何製作Flex：

開始進入正題，以製作個人名片為例練習Flex官方模擬器。

1. 選擇要創建的Flex訊息類型

在Flex Message的最外層結構，有兩種類型可選：
bubble：單個訊息框的類型。
carousel：是包含多個訊息框(bubble)的類型，可橫向滑動。

• 首先先創建Flex訊息，點擊網頁右上角的「NEW」，選擇「bubble」選項，建立一個包含訊息框的bubble類型。

2. 新增標題

Flex Message由header、hero和body，以及footer所組成，更詳細的架構說明將於Flex message（下篇）介紹。

• 首先先點擊「header」後點選左上方的+加號，新增box方框欄位；新增完後點選header設定背景顏色；接著點選header-box設定標題文字

• 由於標題設定在方框中，所以在點擊+號時應選擇於box層新增Text，可想像為階層關係，需「點選父層」以新增子層內容。
• 新增「Flex Message Corp」標題文字，設定文字樣式為白色、粗體。

3. 新增圖片

圖片及其 URL 必須滿足以下條件：
(1). 圖片格式：JPEG或PNG
(2). 最大圖像尺寸：1024×1024 像素
(3). 最大數據大小：10 MB
(4). 無法將圖片檔案上傳到Flex Message模擬器，需指定已上傳網路的圖片URL。

• 由於大頭照想要放在hero中，所以點選hero後點+號新增image，設定圖片連結與圖片大小

4. 新增文字

字體的詳細設定
(1). Text.size：增加字體大小
(2). Text.weight：增加字體粗細
(3). Text.align：設定文字對齊

• 於body-box中新增text，輸入姓名、粗體、置中對齊，以及輸入職位、置中對齊設定。

5. 新增平行線

• 在body-box中新增separator，並將邊距設為md樣式。

6. 新增按鈕

按鈕樣式：
(1). primary ：深色按鈕模式
(2). secondary ：淺色按鈕模式
(3). link：連結按鈕模式

• 在body-box處按+號新增box，並在新box中新增按鈕，新增自己的網站連結，設定連結動作後，在Button的style設定為link樣式。

• 再新增兩個按鈕，為註冊連結網址與LINE Out撥打電話服務，且與第一個按鈕一樣在Button的style設定為link樣式。
• LINE Out的uri連結參數設定格式：

https://line.me/R/call/{國家代碼}/{電話號碼}

• 圖例中為設定台灣國家代碼+886，電話為09001234567，國家代碼可於國家代碼維基百科查詢。

https://line.me/R/call/886/09001234567

在編輯按鈕 (Button-Action-url) 處也可以添加一個LINE前端框架(LIFF)URL。LIFF 是LINE提供的網絡應用平台，在後幾篇文章中會詳細介紹。

如何將Flex message simulator套用至LINE訊息中讓使用者觀看

• 首先先將官方模擬器的資料複製，點選右上角的複製JSON內容，編寫完基本指令後在「contents」之處將複製的JSON內容貼上。
• 需於func.py最上方匯入模組 import json

from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text = 取代文字,
    contents={ #就把JSON貼過來吧!!
        "type": "bubble",
        "header": {
            "type": "box",
            "layout": "vertical",
            "contents": [
                {
                    "type": "text",
                    "text": "Flex Message Corp",
                    "color": "#FFFFFF",
                    "weight": "bold"
                }
            ]
        },
        "hero"': {
            ...
        }
    }
)
line_bot_api.reply_message(event.reply_token, flex_message)

實作練習

這邊的網頁連結與撥打電話就先省略範例示圖，將於下篇與各位介紹如何以程式編寫的方式自行製作 Flex message的寫法~