この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
Messaging API の新機能、「クイックリプライ」が公開されました
この機能は、特定のメッセージへのアクションを「クイックリプライボタン」として表示することができます。
使ってみる
今回はチュートリアルとして、じゃんけん Bot を作ってみます。トークフローはこのような形とします。
Bot の作成方法については、こちらをご覧ください。
作成に当たって、下記の機能も欲しいことに気がつきました。
- あいこだった時にもう一回じゃんけんする
- じゃんけん終了後にもう一回じゃんけんできる導線
この機能たちも実装してみます。
サンプルコード
var channelAccessToken = 'XXXXXXXXX';
var response = { statusCode: 200 };
const line = require('@line/bot-sdk');
const format = require('string-template');
const client = new line.Client({channelAccessToken: channelAccessToken});
exports.handler = async (event) => {
console.log(JSON.stringify(event));
let body = JSON.parse(event.body);
let message;
if (body.events[0].message.text == 'じゃんけん') {
message = {
"type": "text",
"text": "じゃんけんぽん!",
"quickReply": {
"items": [
{
"type": "action",
"action": {
"type": "message",
"label": "パー",
"text": "パー"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "グー",
"text": "グー"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "チョキ",
"text": "チョキ"
}
}
]
}
}
} else if (body.events[0].message.text == '終わり') {
message = {
"type": "text",
"text": "また遊んでね。"
}
} else {
let userhand = body.events[0].message.text;
let hands = ['グー','チョキ','パー'];
let num = Math.floor(Math.random() * hands.length);
let hand = hands[num];
let win;
switch (hand) {
case 'グー':
win = 'パー';
break;
case 'チョキ':
win = 'グー';
break;
case 'パー':
win = 'チョキ';
break;
}
let text;
let quickReply;
if (userhand === win) {
text = format("{hand}!あなたの勝ち!",{hand: hand});
quickReply = {
"items": [
{
"type": "action",
"action": {
"type": "message",
"label": "もう一回",
"text": "じゃんけん"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "終わり",
"text": "終わり"
}
}
]
}
} else if (userhand === hand) {
text = 'あいこでしょ!';
quickReply= {
"items": [
{
"type": "action",
"action": {
"type": "message",
"label": "パー",
"text": "パー"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "グー",
"text": "グー"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "チョキ",
"text": "チョキ"
}
}
]
};
} else {
text = format("{hand}!残念。あなたの負け!",{hand: hand});
quickReply = {
"items": [
{
"type": "action",
"action": {
"type": "message",
"label": "もう一回",
"text": "じゃんけん"
}
},
{
"type": "action",
"action": {
"type": "message",
"label": "終わり",
"text": "終わり"
}
}
]
}
}
message = {
"type": "text",
"text": text,
"quickReply": quickReply
}
}
await client.replyMessage(body.events[0].replyToken, message);
return response;
};
さて Lambda の準備が終わりました。 実際に使ってみましょう。
まとめ
いかがでしたでしょうか。
クイックリプライによりユーザーのアクションが簡単に行えるようになりました!
カテゴリ関連に使用できそうな気がします。