使用C#開發Linebot(28) – Rich Menu的建立和使用

Rich Menu是LINE Bot開發當中一個非常重要的機制，甚至可以說是LINE Bot的特色，它是一個讓我們有機會可以開始把LINE Bot當作資訊系統來操作的重要功能，接下來幾篇文章，我們要來談談這個部分。

什麼是Rich Menu?

一般來說，Rich Menu是一塊像是下圖這樣的選單，可以有不同的區塊分隔設計，每一個區塊可以設計成按鈕或選單的形式，類似像下圖下方框線標示出的區塊這樣：

不一定只能像是上面這樣，將圖示按鈕切割成上面這樣的六塊，也可以是底下這樣三塊的配置：

具體配置方式其實有很多種，我們後面會陸續跟大家介紹。

在這些按鈕上，我們可以賦予不同的功能，像是點選後開啟特定URL，或是幫用戶說一句話，甚至是觸發postback event、開啟DateTime Picker，幫助用戶輸入GPS地址…等。

另外，透過API，我們可以動態的決定特定(或是所有)用戶呈現出的Rich Menu，不僅如此，我們可以非常自由的定義Ruch Menu的外觀，以及按鈕上面的功能與形式。

我們甚至可以實作出類似選單切換的效果，讓一個用戶享有不只一組Rich Menu，如此一來，我們幾乎可以把LINE Bot當作小型的應用系統來玩，特別是搭配了LIFF(LINE Front-end Framework) App之後。

Rich Menu的功能與手動設定方式

好，我們看過了選單的外觀之後，接著來看看，一般來說，要如何設計這個選單呢？

目前有幾種不同的選擇，可以透過LINE@後台『建立圖文選單』的方式來設計，也可以透過API來動態設計。

從LINE@後台設計的方式其實很簡單，可以從LINE@後台 https://admin-official.line.me 這個網址登入，然後找到你的Bot，點選後，可以看到該Bot的左方選單中有一個建立圖文影音內容的選項，你可以在其中找到『圖文選單』：

點選後即可設計，它分為兩種設計方式，一種是以圖片的方式製作，另一種是以『文字和圖標(其實就是圖示)』的方式製作。

如果你選擇後者，畫面上會出現上面兩種版型，你可以選擇其中一種分隔方式。

選好之後，下方會出現相對應的『選單內容設定』：

你可以在上圖A的部分選擇你要設定的是哪一個區塊，B的部分則是讓你選擇按鈕的圖示，C的部分則是要呈現的功能，有三個選項可以選擇，如果你選擇網址，則用戶點選該按鈕時，就會開啟該網址。

建立好後的選單大致長底下這樣：

雖然相較之下單調了些，但在沒有美編設計圖示的狀況下，也不失為一個方便的選擇。

至於用圖片的方式製作，就必須先準備好了一張1200x810尺寸的.png圖檔，例如像是底下這樣：

同樣的，其實用圖片的方式設計，也可以有多種版型，上面這個六等份格子區塊的設計，其實只是LINE 圖文選單的其中一種配置方式，你可以在LINE的設計規範中看到：

我們只是選擇左上角的版型1而已。

好，不是把圖做好就行，我們還得配置每一個區塊(用戶點下去時)的指令。但這部分不難，如果你使用過具有Rich Menu的LINE Bot就肯定知道，當你點選了某一個按鈕之後，該按鈕可能只是幫用戶說一段話。例如，當你點選了上面『翻成日文』這個鈕，我們就幫用戶說了『/日文』這幾個字，然後伺服器端的WebHook看到『/日文』這幾個字，並作出特定的回應(具體的執行結果可以參考我們的『翻譯王LINE Bot』範例，用LINE Bot搜尋 @ejn1954w 可以找到)。

那…要在點選按鈕之後，幫用戶輸入『/日文』這幾個字該怎麼做呢?

其實只需要在後台的『選單內容設定』處，依照底下這樣的順序，配置成當用戶點選下方中央的按鈕後，就自動輸入『/日文』即可：

設定完成之後，就大功告成囉。

當用戶點選Ruch Menu上該按鈕，系統就會幫用戶輸入特定的文字。同樣的，在按鈕的功能上，你也可以採用『網址』的設定，設定好之後，當用戶點選該區塊，就會開啟該網址所指向的網頁。

接下來，我們要來看更重要的部分，下一篇我們接著來看看如何透過程式碼建立Rich Menu。

----------

最新實體課程：http://www.studyhost.tw/NewCourses/LineBot
線上課程：https://www.udemy.com/line-bot/
電子書：http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。