Rich Menu 圖文選單是什麼?

寫 Chatbot 引導很重要，在 Line 裡面有 RichMenu 可以用，讓使用者可以快速的點擊常用功能，要如何建立 RichMenu 呢? 快速不用寫程式的方式是透過 Official Account 設定

image

你可選擇已經預設好的版型，並針對每個區塊設定要執行的動作

image

但如果是透過 Message Api 的話，可以設定的動作就更彈性了，一張圖總共可以設定 20 個 Actions，可以做得事就更多了。要透過 Message Api 新增一個 Rich Menu，有以下步驟

  • 新增一個選單
  • 上傳該選單的圖檔

我整理了Rich Menu相關的 postman collections 只要將環境變數 {{botAcceccToken}} 設為你 Channel 的 Access Token 可直接匯入使用： https://www.getpostman.com/collections/f090d101b7e08e411f12

方法1: 透過 Postman 來上傳 Rich Menu

在上面的 postman collections，你可以使用 Create Rich Menu 來新增，成功的話會回傳 RichMenuID

image

那這個 Post 的 JSON 怎麼產生呢？在 NET 5 你可以直接安裝我的 NetCoreLineBotSDK 透過物件的方式直接產生 Api 所需要的 JSON Request，丟到 postman 裡面

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true; // 是否為預設選單
sampleMenu.name = "sampleMenu"; // 選單名稱
sampleMenu.chatBarText = "More"; // 選單文字
sampleMenu.areas = new List<CreateArea>() // 點擊區域要執行的Action
{
    new CreateArea(boundx:0,boundy:0,width:1200,height:810, _action: new MessageAction("Hello Rich Menu!"))
};

var postJson = JsonConvert.SerializeObject(sampleMenu, new JsonSerializerSettings
{
    NullValueHandling = NullValueHandling.Ignore,
    ContractResolver = new DefaultContractResolver
    {
        NamingStrategy = new CamelCaseNamingStrategy()
    }
});

或者是這個步驟可以用 Bot Designer 工具，可以直接用匡列的方式設定好，並直接產生JSON

image

接著透過 postman collections Upload Rich Menu Images 你可以於 URI 指定剛剛的 Rich Menu ID，及上傳圖片來完成綁定

image

方法2: 透過 NetCoreLineBotSDK 上傳

在 SDK 裡面，你可以直接用下列語法完成RichMenu的上傳與圖片綁定

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true; // 是否為預設選單
sampleMenu.name = "sampleMenu"; // 選單名稱
sampleMenu.chatBarText = "More"; // 選單文字
sampleMenu.areas = new List<CreateArea>() // 點擊區域要執行的Action
{
    new CreateArea(boundx:0,boundy:0,width:1200,height:810, _action: new MessageAction("Hello Rich Menu!"))
};
await CreateRichMenuWithImageAsync(sampleMenu,"https://via.placeholder.com/1200x810/E71989.png/fff");

或者是直接丟Bot Designer產出的JSON

await CreateRichMenuByJsonWithImageAsync(json, "https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

Rich Menu 的切換

Line 在 6/21 的時候推出了 Swtich Rich Mnues 的功能，以前要達到這種需求，都要用 Link Rich Menu To User 這類的 Api 才能達成，在這次改版，新增一個Action 類型叫做 Rich menu switch action，但目前這個 Action 只能支援在Rich Menu觸發，所以透過 Message Types/Flex 裡面去指定這個 Action 是會出錯的，簡單來講就是，切換選單的動作只能在選單來觸發，那怎麼切換呢? 首先要先設定別名:

方法1: 透過 Postman 設定 RichMenu Alias

透過 Create rich menu alias 這個 Api 指定RichMenuId的別名

image

用 Get list of rich menu alias 驗證當前所有已設定的 alias

image

當然，別名設定錯了，還是可以用 Update rich menu alias 來更新

image

接著只要在建立 RichMenu 的時候，Action 指定為別名就會切換了，以下面為例，我建立了三個RichMenu點擊區域，別名分別是 a/b/c，點擊後就可以切換至相對應的選單，而點擊後也會觸發postback事件，可在這個欄位塞一些資料，做事件的處理，範例的的 JSON 如下

{"name":"sampleMenu-c","size":{"width":1200,"height":810},"chatBarText":"More","selected":true,"areas":[{"bounds":{"x":0,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-a","data":"richmenu-a-postback"}},{"bounds":{"x":400,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-b","data":"richmenu-b-postback"}},{"bounds":{"x":800,"y":0,"width":400,"height":810},"action":{"type":"richmenuswitch","richMenuAliasId":"richmenu-c","data":"richmenu-c-postback"}}]}

差別在於點擊的區域可以指定 RichMenuSwitch Action

{
   "type":"richmenuswitch",
   "richMenuAliasId":"richmenu-a",
   "data":"richmenu-a-postback"
}

2021.07.08 測試 Bot Designer 工具還不能選到 RichMenuSwitch Action，也許之後會支援

方法2: 透過 NetCoreLineBotSDK 設定 RichMenu Alias

因應本次改版，在我開源的 SDK 也擴充以下選擇性參數了，你可以在建立 RichMenu 的時候直接給他別名，即可完成 RichMenu 新增.圖片.別名的設定

var sampleMenu = new RichmenuDetail();
sampleMenu.size = new CreateSize(1200, 810);
sampleMenu.selected = true;
sampleMenu.name = "sampleMenu-c";
sampleMenu.chatBarText = "More";
sampleMenu.areas = new List<CreateArea>()
{
    new CreateArea(boundx:0,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-a", "richmenu-a-postback")),
    new CreateArea(boundx:400,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-b", "richmenu-b-postback")),
    new CreateArea(boundx:800,boundy:0,width:400,height:810, _action: new RichMenuSwitchAction("richmenu-c", "richmenu-c-postback")),
};
await CreateRichMenuWithImageAsync(sampleMenu,"https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

或者是直接丟RichMenu的Json

await CreateRichMenuByJsonWithImageAsync(json, "https://via.placeholder.com/1200x810/E71989.png/fff", alias: "richmenu-a");

Demo

整體的切換速度還蠻順暢的!

NetCoreLineBotSDK 是我開源的函式庫，目前正在努力茁壯中，如果有任何疑問都可以在 Github 討論

參考連結