Day 29 : 換個 LINE 回應的其他口味 - Flex Message - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 29

自我挑戰組

用Line聊天機器人串起多媒體系統系列第 29 篇

Day 29 : 換個 LINE 回應的其他口味 - Flex Message

12th鐵人賽

威利斯

2020-09-29 00:03:54

7229 瀏覽

分享至

LINE 可以建立漂亮的 Flex 訊息，官網雖然以 JSON 檔案介紹，但 Python 也可以實現喔! 透過 Flex Message等在手機跟電腦桌面版本都可以看到圖卡介面，相當美觀，在官方文件揭露可以完成的樣式範例，本篇來實作完成吧!

實作 LINE Bot SDK 範例測試

回到LINE Bot SDK的GitHub， FlexSendMessahe 的介紹不多，就是直接2個範例:

結論就是這2個範例都可以通，都是linebot.models.FlexSendMessage 模組，採用 from linebot.models import FlexSendMessage 的引入方式使用 FlexSendMessage函數，呈現一樣的結果，有差異的地方說明如下:

第一個範例若您只照上方 from linebot.models import FlexSendMessage 的引入方式會報錯，那是因為截圖的4個橘色函數您尚未完整引入。您程式需要改寫為:

from linebot.models import FlexSendMessage
from linebot.models.flex_message import (
    BubbleContainer, ImageComponent
)
from linebot.models.actions import URIAction

flex_message = FlexSendMessage(
    alt_text='hello',
    contents=FlexSendMessage.BubbleContainer(
        direction='ltr',
        hero=FlexSendMessage.ImageComponent(
            url='https://example.com/cafe.jpg',
            size='full',
            aspect_ratio='20:13',
            aspect_mode='cover',
            action=actions.URIAction(uri='http://example.com', label='label')
        )
    )
)
#reply_message的組裝方式與先前範例相同，要token跟message
line_bot_api.reply_message(event.reply_token, flex_message)

第二個範例意思是說，ㄟ你就用字典 dict 來包給我就好，我全都要，引入的函數只需 linebot.models.FlexSendMessage 相對單純，搞通了就會選擇此種方案較省心:

from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text='hello',
    contents={ #就把JSON貼過來吧
        'type': 'bubble',
        'direction': 'ltr',
        'hero': {
            'type': 'image',
            'url': 'https://example.com/cafe.jpg',
            'size': 'full',
            'aspectRatio': '20:13',
            'aspectMode': 'cover',
            'action': { 'type': 'uri', 'uri': 'http://example.com', 'label': 'label' }
        }
    }
)
line_bot_api.reply_message(event.reply_token, flex_message)

最後官方範例說您可以用 LINE 提供的 Flex Message Simulator 來設計 JSON 的內容喔。

這階段我們先以先前 Day 28 的K線實作範例改為FlexMessage ，在 handle_message() 函數裡，將先前關鍵字為@k <台股代碼>的功能改寫，新增以 #k <台股代碼> 作功能新增測試，而貼入 content 變數的 dict 只改寫了範例的 url 及 alt_text 兩個值，其中 alt_text 是指您預覽時出現的提示字:

from linebot.models import FlexSendMessage

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    if event.message.text[:2].upper() == "#K":
        input_word = event.message.text.replace(" ","") #合併字串取消空白
        stock_name = input_word[2:6] #0050
        start_date = input_word[6:] #2020-01-01
        content = plot_stcok_k_chart(IMGUR_CLIENT_ID,stock_name,start_date)

        flex_message = FlexSendMessage(
            alt_text=stock_name, #alt_text
            contents={
                'type': 'bubble',
                'direction': 'ltr',
                'hero': {
                    'type': 'image',
                    'url': content,
                    'size': 'full',
                    'aspectRatio': '20:13',
                    'aspectMode': 'cover',
                    'action': { 'type': 'uri', 'uri': content, 'label': 'label' }
                }
            }
        )
        line_bot_api.reply_message(event.reply_token, flex_message)

觀察顯示結果
- FlexSendMessage 跟圖片訊息目前看來有外框原角的差異，兩者比較，圖片訊息點擊就是"圖片放大"，Flex Message 點擊就是前往超連結，但連線至 Imgur 圖床網頁版沒啥好處，開起來很慢，您可以自行導引連結至比較有用的服務網頁。

使用 Flex Message Simulator 設計成果

在我們已經認識官方範例及實作之後，進一步客製化我們的訊息成果，在登入您 LINE 帳號進入 Flex Message Simulator 網頁後，動手自己刻一個吧!
映入眼簾的是一個官方範例:
按右上方 "Showcase" 選一個符合需求的來改
左欄為即時預覽、中間為圖層視圖導覽、右側為參數設定，一個捏娃娃的節奏。
參數細節不再贅述，按下 "View on JSON" 可以把捏出的結果轉成 JSON 檔複製即可。

複製後將所有的 JSON 貼給 contents 變數。

flex_message = FlexSendMessage(
            alt_text=stock_name,
            contents={...} #貼進來
        )
        line_bot_api.reply_message(event.reply_token, flex_message)

修正 JSON 內容:
- 修正變數，諸如URL、stock_name、 start_date 等變數應修正至對應至文字、圖片或連結欄位。
- 修正至符合 Python 的字典 dict 規則， true / false 要改成大寫開頭 True / False 不然會報錯。
最後測試結果: