本文同步刊載於 Clarence 部落格：[LINE bot 好好玩 30 天玩轉 LINE API] 第 13 天：圖文選單 Rich Menus - 使用 API Request

前言

我們昨天討論了 Rich Menus 的用法，有人就來詢問？現在講的 Rich Menus 都是靜態的，有看過有 Rich Menus 可以做翻頁的動作，這件事情是怎麼做到的呢？其實很簡單就是靠 API 來做！
今天就來揭曉這個神奇的功能吧 ~

建立新的 Rich Menus

以下範例是由官方範例做了一點小修改建立的，我們把原本 b 按鈕的 message 修改了一下，等等用它處理翻頁的功能
圖片部分一樣使用官方範例的

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": false,
  "name": "Controller",
  "chatBarText": "Controller",
  "areas": [
    {
      "bounds": {
        "x": 551,
        "y": 325,
        "width": 321,
        "height": 321
      },
      "action": {
        "type": "message",
        "text": "up"
      }
    },
    {
      "bounds": {
        "x": 876,
        "y": 651,
        "width": 321,
        "height": 321
      },
      "action": {
        "type": "message",
        "text": "right"
      }
    },
    {
      "bounds": {
        "x": 551,
        "y": 972,
        "width": 321,
        "height": 321
      },
      "action": {
        "type": "message",
        "text": "down"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 651,
        "width": 321,
        "height": 321
      },
      "action": {
        "type": "message",
        "text": "left"
      }
    },
    {
      "bounds": {
        "x": 1433,
        "y": 657,
        "width": 367,
        "height": 367
      },
      "action": {
        "type": "message",
        "text": "btn b"
      }
    },
    {
      "bounds": {
        "x": 1907,
        "y": 657,
        "width": 367,
        "height": 367
      },
      "action": {
        "type": "postback",
        "data": "action=btn&message=a"
      }
    }
  ]
}

Event postback

處理翻頁功能，我們這次用 postback 來做範例，為什麼會選擇 postback 呢？
那是因為 postback 使用者不會看到訊息，如果使用 message 也是可以處理，不過覺得用 postback 會顯得更好，以下範例為 postback 處理翻頁功能的方法

case 'postback':
  let data = querystring.parse(event.postback.data);
  if (data.action === 'buy' && data.itemid === '123') {
    request.post({
      url: `https://api.line.me/v2/bot/user/${event.source.userId}/richmenu/${process.env['RICHMENUID_CONTROLLER']}`,
      auth: {
        bearer: process.env['CHANNEL_ACCESS_TOKEN']
      }
    }, function (err, httpResponse, body) {
      console.log(body);
    });
  }
  if (data.action === 'btn' && data.message === 'a') {
    request.post({
      url: 'https://api.line.me/v2/bot/richmenu/bulk/link',
      auth: {
        bearer: process.env['CHANNEL_ACCESS_TOKEN']
      },
      body: {
        richMenuId: process.env['RICHMENUID_DEFAULT'],
        userIds: [event.source.userId]
      },
      json: true
    }, function (err, httpResponse, body) {
      console.log(body);
    });
  }

這邊要注意幾件事情，我們需要保留剛剛建立的 Rich Menus Id 與昨天的 Rich Menus Id，之後使用他們來做翻頁功能。
在這個範例把昨天的 Rich Menus Id 定義成 RICHMENUID_DEFAULT

richMenuId: process.env['RICHMENUID_DEFAULT']

把今天的遊戲控制面板定義成 RICHMENUID_CONTROLLER

url: `https://api.line.me/v2/bot/user/${event.source.userId}/richmenu/${process.env['RICHMENUID_CONTROLLER']}`

如上介紹了兩種方法，兩種方法都可以控制 Rich Menus 第一個方法是單一使用者指定的方法，其實比較推薦目前這個情境使用此 API 來操作，第二個範例是多使用者指定的方法，比較不推薦大家在這個情境使用，因為他是多使用者的情境，不過這邊是屬於示範拉 ~

移除 Rich Menus

昨天介紹了 list Rich Menus 的方法，那可想而知有建立、取得那一定有刪除，刪除的方法如下

curl -v -X DELETE https://api.line.me/v2/bot/richmenu/{richMenuId} \
-H 'Authorization: Bearer {channel access token}'

取消預設 Rich Menus

如果今天不想要給使用者使用 Rich Menus 就可以使用這個 API

curl -v -X DELETE https://api.line.me/v2/bot/user/all/richmenu \
-H 'Authorization: Bearer {channel access token}'

結語

其實 Rich Menus 的玩法很多，就看大家想要怎麼玩啦 XD ~
希望大家玩得愉快！

工商時間

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難！新手用JavaScript入門做自己的玩具～
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
塔塔默 - 用Python開發的網頁不能放到Github上？Lektor說可以！！
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。