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 を使用します。
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 を使います。
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 を使用して、表示を有効にします。
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
これで登録完了です！
画像をタッチすると areas[].action で指定した動作を行ってくれます。
QA サイトや申し込みページなどにクイックアクセス！
Postback Action もできるので、Bot にアレコレさせることもできますよー。
でも、やっぱり、あれですよね。
デザインする人って、凄いですよね！( ﾟДﾟ)
おわりに
ここまでお付き合いいただきありがとうございました。
新しい機能が出るとわっくわくしますよね！
ではまた！(^^)/