LINE Messaging API にクイックリプライ機能が追加されました

はじめに

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 の準備が終わりました。 実際に使ってみましょう。

まとめ

いかがでしたでしょうか。
クイックリプライによりユーザーのアクションが簡単に行えるようになりました！ カテゴリ関連に使用できそうな気がします。