建立图文选单

在行动版的 LINE 里，有时会出现“图文选单”的功能 ( 最下方可以点选的图文区块 )，这篇教学将会介绍如何在 LINE 官方账号打开基本图文选单功能，以及如何透过 Python 程序产生客制化的图文选单。

建议先阅读：建立 LINE Channel

快速导览：

• 什么是 LINE 图文选单？
• LINE 官方账号建立图文选单
• Python 建立图文选单
• Python 其他图文选单方法
• 图文选单对象格式
• 小结

什么是 LINE 图文选单？

LINE 图文选单位于行动版的聊天室画面下方，是一个可以弹出与收合的选单，用户不管是因为推播或其他互动打开您的官方账号时，都能看到这个选单，举凡“外导链接”、“优惠券”、“集点卡”及“关键字”都能设定。

以下图为例，下方台新知识王的区块，就是图文选单。

LINE 官方账号建立图文选单

进入 LINE 的官方账号，选择要建立图文选单的官方账号 ( 官方账号可能是手动建立，或建立 LINE BOT 时自动产生 )。

LINE 官方教学：LINE 图文选单

左侧选单选择“图文选单”，点击“建立图文选单”。

建立时需要填写“标题”、“时间”、“选单显示的文字”和“默认显示方式”。

填写完毕后，进入内容设定，点击“选择版型”。

从默认的版型中，挑选需要的样式，样式里每个格子都是一个“按钮”，也就是用户可以点击的区域。

样式设定后，就能替样式里每个按钮格子加入图片 ( 或使用单一张背景图 )。

最后在“动作”的位置，设定点击每个按钮时要进行的动作，可以设定发送文字、打开链接...等功能。

完成后按下建立，在设定的时间范围里从 LINE 打开与官方账号的聊天视窗，就会看见下方出现图文选单 ( 有时需要等待一两分钟才会出现 )，点击选单就会出现设定的动作。

Python 建立图文选单

除了透过 LINE 官方账号建立图文选单，也可以按照下列步骤，使用 Python 设计出更有创意的图文选单样式。

参考：Create rich menu

步骤 1、建立 Colab 专案，并与 Google Drive 连动

打开 Colab，建立一个专案，勾选“挂载云端硬盘”的图示，使 Colab 专案和 Google Drive 连动。

参考：连动 Google Drive

步骤 2、设计背景图片

首先准备一张背景图片，图片的格式要求如下：

• 宽度：800～2500 px( 实际大小取决于图文选单设定 )
• 高度：250～1686 px ( 实际大小取决于图文选单设定 )
• 长宽比：保持 1.45～1.5
• 格式：jpg 或 png

范例图片为一个商场的插画，里面包含七个按钮 ( 范例图片下载 )，记录每个按钮的 xy 座标以及长宽，准备好图片后，将图片上传到 Google Drive 云端空间里，上传的位置和 Colab 专案放在一起。

步骤 3、Colab 建立图文选单

打开 Colab，建立一个专案，输入下方指令安装 line-bot-sdk。

!pip install line-bot-sdk

按照 LINE 官方提供的方法，在 Colab 的专案里输入下方的程序码，执行后会使用 POST 的方法向指定网址发送 request，建立图文选单。

参考：取得 LINE Channel access token 和 Channel secret

import requests
import json
# 設定 headers，輸入你的 Access Token，記得前方要加上「Bearer 」( 有一個空白 )
headers = {'Authorization':'Bearer 你的 Access Token','Content-Type':'application/json'}

body = {
    'size': {'width': 2500, 'height': 1686},   # 設定尺寸
    'selected': 'true',                        # 預設是否顯示
    'name': 'Richmenu demo',                   # 選單名稱
    'chatBarText': 'Richmenu demo',            # 選單在 LINE 顯示的標題
    'areas':[                                  # 選單內容
        {
          'bounds': {'x': 341, 'y': 75, 'width': 560, 'height': 340}, # 選單位置與大小
          'action': {'type': 'message', 'text': '電器'}                # 點擊後傳送文字
        },
        {
          'bounds': {'x': 1434, 'y': 229, 'width': 930, 'height': 340},
          'action': {'type': 'message', 'text': '運動用品'}
        },
        {
          'bounds': {'x': 122, 'y': 641, 'width':560, 'height': 340},
          'action': {'type': 'message', 'text': '客服'}
        },
        {
          'bounds': {'x': 1012, 'y': 645, 'width': 560, 'height': 340},
          'action': {'type': 'message', 'text': '餐廳'}
        },
        {
          'bounds': {'x': 1813, 'y': 677, 'width': 560, 'height': 340},
          'action': {'type': 'message', 'text': '鞋子'}
        },
        {
          'bounds': {'x': 423, 'y': 1203, 'width': 560, 'height': 340},
          'action': {'type': 'message', 'text': '美食'}
        },
        {
          'bounds': {'x': 1581, 'y': 1133, 'width': 560, 'height': 340},
          'action': {'type': 'message', 'text': '衣服'}
        }
    ]
  }
# 向指定網址發送 request
req = requests.request('POST', 'https://api.line.me/v2/bot/richmenu',
                      headers=headers,data=json.dumps(body).encode('utf-8'))
# 印出得到的結果
print(req.text)

执行程序后就会建立图文选单，并得到图文选单的 ID。

步骤 4、设定选单背景

取得图文选单的 ID 后，在同一个 Colab 专案里，新增另外一组程序码编辑区块，输入 Channel Access Token 和刚刚产生的 Rich menu ID，完成并执行后，就会将图片上传到 LINE 并与刚刚的图文选单绑定。

from linebot import LineBotApi, WebhookHandler

line_bot_api = LineBotApi('你的 Access Token')

with open('/content/drive/MyDrive/Colab Notebooks/demo.jpg', 'rb') as f:
    line_bot_api.set_rich_menu_image('你的圖文選單 ID', 'image/jpeg', f)

步骤 5、显示图文选单

最后，在同一个 Colab 专案里，新增另外一组程序码编辑区块，输入 Channel Access Token 和刚刚产生的 Rich menu ID，完成并执行后，在移动设备上打开 LINE BOT 的聊天视窗，下方就会出现图文选单，点击图文选单，就会发送指定的文字消息。

import requests

headers = {'Authorization':'Bearer 你的 Access Token'}

req = requests.request('POST', 'https://api.line.me/v2/bot/user/all/richmenu/你的圖文選單 ID', headers=headers)

print(req.text)

Python 其他图文选单方法

除了建立图片选单，还有其他的方法可以操作图文选单 ( 参考：完整指令 )，下方的程序码执行后，可以取得目前所有已经建立的图文选单 ID。

from linebot import  LineBotApi, WebhookHandler
line_bot_api = LineBotApi('你的 Access Token')
rich_menu_list = line_bot_api.get_rich_menu_list()
for rich_menu in rich_menu_list:
    print(rich_menu.rich_menu_id)

下方的程序码可以根据图文选单的 ID，删除指定的图文选单。

from linebot import LineBotApi, WebhookHandler
line_bot_api = LineBotApi('你的 Access Token')
line_bot_api.delete_rich_menu('圖文選單 ID')

图文选单对象格式

上方的程序码只使用了“message”的格式进行发送，但 LINE 其实提供了许多图文选单的对象格式，例如 uri ( 超链接 )、location ( 地点 )...等，举例来说，如果将上方的范例中“运动用品”的内容改成下方的程序码，执行后，点击运动用品按钮时，就会打开网页。

参考：LINE Action objects

{
  'bounds': {'x': 1434, 'y': 229, 'width': 930, 'height': 340},
  'action': {'type': 'uri', 'label': '運動用品', 'uri':'https://www.oxxostudio.tw'} # 點擊後開啟網頁
},

小结

LINE 的图文选单为移动设备的操作者，提供了相当方便的使用体验，因为使用点击发送消息的速度，远比用手指打字来得迅速，活用图文选单，就能替 LINE BOT 增加更多好用的功能。

意见反馈