LINE WORKS のリッチメニューを使う

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

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

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

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

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

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

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

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

私の美的センスは皆無ですので、是非！LINE@ の公式にある各企業のサンプルを見てください！(*‘∀‘)
[LINE公式アカウント｜リッチメニューの活用方法と事例](https://www.linebiz.com/jp/column/technique/20180731-01/?utm_source=yahoo&utm_medium=cpc&utm_term=&utm_content=das&utm_campaign=DAS#)

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

作成した画像をアップロードして、`resourceId` を取得します。
コンテンツアップロード API の使い方はコチラで解説しています。
[LINE WORKS のコンテンツアップロード API を使う](https://qiita.com/kunihiros/items/9816fa1860613b3b1a3a)

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

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

[リッチメニューの登録 API ](https://developers.worksmobile.com/jp/document/100504001?lang=ja)を使用します。

```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](https://developers.worksmobile.com/jp/document/100504002?lang=ja) を使用します。
先ほど取得した `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](https://developers.worksmobile.com/jp/document/100504007?lang=ja) を使用して、表示を有効にします。

```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
```
これで登録完了です！

<img width="200" alt="Screenshot_20190805-104244_LINE WORKS.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363367/ef0a962d-2646-f612-dc0b-1a6013156a12.jpeg">

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

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

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

ではまた！(^^)/

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

[LINE WORKS API 公式ドキュメント](https://developers.worksmobile.com/jp/document?lang=ja) 
[LINE公式アカウント｜リッチメニューの活用方法と事例](https://www.linebiz.com/jp/column/technique/20180731-01/?utm_source=yahoo&utm_medium=cpc&utm_term=&utm_content=das&utm_campaign=DAS#)