iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
DevOps

30天的社群機器人之旅系列 第 13

Day 13 RichMenu

  • 分享至 

  • xImage
  •  

在 Line 中各個有趣的 Action 大概都有介紹過了,接著就要來介紹跟 Action 很不一樣的東西,那就是 RichMenu 。

RichMenu 簡單說就是下方的選單,讓我們有些預設的動作可以快速的操作,使我們的操作更加的方便,每個區塊都有設定的 Action ,只要觸發就會傳送對應的 Event ,大概就是把 FlexMessage 的 Button 固定在底下而已。

但是, RichMenu 的設定方式並非我們程式碼裡面改一改就好,它需要透過另外的設定方式,才能夠顯示在 Line 上面。

在開始之前,我們需要先準備一張圖片,作為 RichMenu 的背景圖片,(我自己是偷懶直接用小畫家花個 30 秒左右生出兩張圖片,在這邊提供給沒有素材使用的人 CMYK.jpgRGBK.jpg

接著我們終於要開始設定我們的 RichMenu 了,我自己是偷懶寫一個簡易設定小工具,並且包含預設的一個 RichMenu 。

set_richmenu.py

import argparse
import os

from linebot import LineBotApi
from linebot.models.actions import MessageAction, PostbackAction, URIAction, DatetimePickerAction, RichMenuSwitchAction
from linebot.models.rich_menu import RichMenu, RichMenuArea, RichMenuBounds, RichMenuSize


# rich_menu_alias = "my-richmenu"
rich_menu = RichMenu(
    size=RichMenuSize(width=2500, height=1686),  # 大小
    selected=True,  # 預設開啟或關閉
    name="my-richmenu",  # 名稱
    chat_bar_text="選單",  # 下方選單名稱
    areas=[
        # 左上
        RichMenuArea(
            RichMenuBounds(x=0, y=0, width=1250, height=843),
            MessageAction(label="左上按鈕", text="左上按鈕")
        ),
        # 右上
        RichMenuArea(
            RichMenuBounds(x=1251, y=0, width=1250, height=843),
            MessageAction(label="右上按鈕", text="右上按鈕")
        ),
        # 左下
        RichMenuArea(
            RichMenuBounds(x=0, y=844, width=1250, height=843),
            MessageAction(label="左下按鈕", text="左下按鈕")
        ),
        # 右下
        RichMenuArea(
            RichMenuBounds(x=1251, y=844, width=1250, height=843),
            MessageAction(label="右下按鈕", text="右下按鈕")
        )
    ]
)


if __name__ == "__main__":
    line_bot_api = LineBotApi(os.environ['CHANNEL_ACCESS_TOKEN'])

    parser = argparse.ArgumentParser()
    parser.add_argument("-c", "--create", action="store_true", help="Create a new RichMenu")
    parser.add_argument("-g", "--get", action="store_true", help="Get default RichMenu")
    parser.add_argument("-l", "--list", action="store_true", help="Get all RichMenu")
    parser.add_argument("-d", "--delete", action="store_true", help="Delete default RichMenu")
    args = parser.parse_args()
    
    if args.create:
        richmenu_id = line_bot_api.create_rich_menu(rich_menu)
        with open("CMYK.jpg", "rb") as fp:
            line_bot_api.set_rich_menu_image(
                richmenu_id, content_type="image/jpeg", content=fp)
        line_bot_api.set_default_rich_menu(richmenu_id)
    elif args.get:
        print(line_bot_api.get_rich_menu(line_bot_api.get_default_rich_menu()))
    elif args.list:
        for r in line_bot_api.get_rich_menu_list():
            print(r)
    elif args.delete:
        line_bot_api.delete_rich_menu(line_bot_api.get_default_rich_menu())

快速設定

python set_richmenu.py [-c] [-g] [-l] [-d]

各位只要根據上面這個偷懶小工具就可以快速生出自己的 RichMenu 了。

設定完成之後,重新進入聊天室就會看到有 RichMenu 在下方了,並且點擊對應區域都會觸發對應的動作。

參考資料

Rich menu - Using rich menus

Rich menu 的結構 - Rich menu structure

設定 Rich menu 的 API - Rich menu

那麼就先到這邊,各位可以替換成自己喜歡的圖片以及最常使用的操作,讓我們操作 LineBot 更加的順手。

大家掰~掰~


上一篇
Day 12 URI action & Camera action
下一篇
Day 14 Richmenu Switch
系列文
30天的社群機器人之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言