v2.6 のメジャーアップデートで、LINE WORKS にもリッチメニューが追加されました。

新しい API なので、さっそく試してみたのですが、LINE@ の仕様とほぼ変わらないので設定自体はそんなに難しくなかったです。
むしろ、デザイン的なセンスを要求されるので、美術の成績がエントツだった私には難しいですよね！('Д')

API を使用したリッチメニューの設定

トーク Bot にリッチメニューを追加するには次のような手順で行います。

リッチメニューの画像を作る
コンテンツアップロード API で画像をアップロード
リッチメニュー登録 API でリッチメニューの動作やボタン配置を登録
リッチメニューの画像設定 API でアップロードした画像とリッチメニューを紐づける
基本リッチメニュー設定 API で表示を有効にする

リッチメニューの画像を作る

あらかじめリッチメニュー用の画像を作成しておく必要があります。
画像サイズが固定なことに注意してください。

画像形式：JPEG および PNG 形式
画像サイズ：2500×1686 または 2500×843 ピクセル
最大ファイルサイズ：1MB

私の美的センスは皆無ですので、是非！LINE@ の公式にある各企業のサンプルを見てください！(*‘∀‘)
LINE公式アカウント｜リッチメニューの活用方法と事例

コンテンツアップロード API で画像をアップロード

作成した画像をアップロードして、resourceId を取得します。
コンテンツアップロード API の使い方はコチラで解説しています。
LINE WORKS のコンテンツアップロード API を使う

この記事書いたときはリッチメニューが追加されるの知らなかったんですが、何かタイミング良かったですね。
意外と苦戦した記憶があるので、予めまとめておけて良かったです。

リッチメニュー登録 API でリッチメニューの動作やボタン配置を登録

リッチメニューの登録 API を使用します。

regRichmenu.js

    const request = require('request');
    const API_ID = "xxxxx";
    const BOT_NO = "xxxxx";
    const CONSUMER_KEY = "xxxxx";
    const TOKEN = "Bearer xxxxx";

    const options = {
        uri: "https://apis.worksmobile.com/r/" + API_ID + "/message/v1/bot/" + BOT_NO + "/richmenu",
        headers: {
            "Content-type": 'application/json; charset=UTF-8',
            "consumerKey": CONSUMER_KEY,
            "Authorization": TOKEN
        },
        json: {
            "size": {
              "width": 2500,
              "height": 1686
            },
            "name": "Nice richmenu",
            "areas": [
              {
                "bounds": {
                  "x": 0,
                  "y": 0,
                  "width": 1250,
                  "height": 843
                },
                "action": {
                  "type": "message",
                  "label": "Document",
                  "text": "Document"
                }
              },
              {
                "bounds": {
                  "x": 1250,
                  "y": 0,
                  "width": 1250,
                  "height": 843
                },
                "action": {
                  "type": "message",
                  "label": "Schedule",
                  "text": "Schedule"
                }
              },
              {
                "bounds": {
                  "x": 0,
                  "y": 843,
                  "width": 1250,
                  "height": 843
                },
                "action": {
                  "type": "message",
                  "label": "Bank",
                  "text": "Bank"
                }
              },
              {
                "bounds": {
                  "x": 1250,
                  "y": 843,
                  "width": 1250,
                  "height": 843
                },
                "action": {
                  "type": "message",
                  "label": "Q&A",
                  "text": "Q&A"
                }
              }
            ]
          }
    };

    request.post(options, function (error, response, body) {
        console.log(body);
    });

公式サンプルに記載されている、４分割メニューです。
上記コードを実行するとリッチメニューの登録が完了し、richMenuId が取得できます。

> node .\regRichmenu.js
{ richMenuId: '0000' }

この richMenuId は全テナントで Unique な値になるそうです。
WEB 上には晒さないようにしましょう('ω')

リッチメニューの画像設定 API でアップロードした画像とリッチメニューを紐づける

リッチメニュー画像の設定 API を使用します。
先ほど取得した resourceId と richMenuId を使います。

regRichmenuImage.js

    const request = require('request');
    const API_ID = "xxxxx";
    const BOT_NO = "xxxxx";
    const CONSUMER_KEY = "xxxxx";
    const TOKEN = "Bearer xxxxx";
    const richMenuId = "0000";

    const options = {
        uri: "https://apis.worksmobile.com/r/" + API_ID + "/message/v1/bot/" + BOT_NO + "/richmenu/" + richMenuId + "/content",
        headers: {
            "Content-type": 'application/json; charset=UTF-8',
            "consumerKey": CONSUMER_KEY,
            "Authorization": TOKEN
        },
        json: {
            "resourceId": "WAAAQPwBexX2HnseNvvM9xxxxxxxxxxxxxxxxyz"
        }
    };

    request.post(options, function (error, response, body) {
        console.log(response.statusCode + " " + response.statusMessage);
    });

> node .\regRichmenuImage.js
200 OK

はい！無事に登録完了しました！簡単ですね。

ところで、リッチメニュー画像の設定 API なのですが、どうやら response の body 情報が空なのですよ。

// response 内容　前省略
        server: 'Apache',
        'strict-transport-security': 'max-age=63072000; includeSubdomains; preload',
        connection: 'close',
        'transfer-encoding': 'chunked',
        'content-type': 'application/json' } },
  read: [Function],
  body: '' }

なので、statusCode と Message は response から取得しています。
リッチメニュー登録 API では body に入ってたんですけどね！( ﾟДﾟ)
まぁ、こういうこともありますやんね。

基本リッチメニュー設定 API で表示を有効にする

さぁ！これで最後ですよ！
基本リッチメニューの設定 API を使用して、表示を有効にします。

regBaseRichmenu.js

    const request = require('request');
    const API_ID = "xxxxx";
    const BOT_NO = "xxxxx";
    const CONSUMER_KEY = "xxxxx";
    const TOKEN = "Bearer xxxxx";
    const richMenuId = "0000";

    const options = {
        uri: "https://apis.worksmobile.com/r/" + API_ID + "/message/v1/bot/" + BOT_NO + "/richmenu/" + richMenuId + "/account/all",
        headers: {
            "Content-type": 'application/json; charset=UTF-8',
            "consumerKey": CONSUMER_KEY,
            "Authorization": TOKEN
        }
    };

    request.post(options, function (error, response, body) {
        console.log(response.statusCode + " " + response.statusMessage);
    });

> node .\regBaseRichmenu.js
200 OK

これで登録完了です！

Screenshot_20190805-104244_LINE WORKS.jpg

画像をタッチすると areas[].action で指定した動作を行ってくれます。
QA サイトや申し込みページなどにクイックアクセス！
Postback Action もできるので、Bot にアレコレさせることもできますよー。

でも、やっぱり、あれですよね。
デザインする人って、凄いですよね！( ﾟДﾟ)

おわりに

ここまでお付き合いいただきありがとうございました。
新しい機能が出るとわっくわくしますよね！

ではまた！(^^)/

参考にさせていただきましたm(_ _)m

LINE WORKS API 公式ドキュメント
 LINE公式アカウント｜リッチメニューの活用方法と事例