LINE MessagingAPI ×GASでクイックリプライを試してみる

LINEのクイックリプライとは

LINEのトーク画面の下部に出る選択肢のことです。
こちらをタップすることにより、テキストを送信したり、postbackを送ったり、、、といろいろできます。
ユーザーの方に、返信を簡単にしたもらうためにつかったりします。

LINEの公式ドキュメントはこちら

これを通常のオウム返しとクイックリプライ付きのオウム返しで比較してみようと思います。

通常のオウム返し

オウム返し.gs

function replyToUser(replyToken, text) {
  
  const replyText = {
    "replyToken": replyToken,
    "messages": [{
      "type": "text",
      "text": text,
    }]
  }

  const options = {
    "method": "post",
    "headers":
        {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
        },
        "payload": JSON.stringify(replyText)
    };

    // Line該当ユーザーに応答を返している
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

クイックリプライ付きのオウム返し

クイックリプライ付きオウム返し.gs

function replyToUserQuickreply(replyToken,text,ans1,ans2) {
  const replyText = {
    "replyToken": replyToken,
    "messages": [{
    "type": "text",
    "text": text,
    "quickReply": { 
      "items": [
         {
          "type": "action", 
          "action": {
             "type": "message",
             "label": ans1,//クイックリプライのボタンに表示させるテキスト
             "text": ans1 //クイックリプライで送るテキスト
            }
          },
         {
          "type": "action", // 3
          "action": {
            "type": "message",
            "label": ans2,//クイックリプライのボタンに表示させるテキスト
            "text": ans2 //クイックリプライで送るテキスト
          }
        },
      ]
    }
    }]
  }

  const options = {
    "method": "post",
    "headers":
     {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
      },
    "payload": JSON.stringify(replyText)
  };
  // Line該当ユーザーに応答を返している
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

比較していただくとわかりますがjsonの中にquickReplyがありそこにデータが記載されています。

今回は、ボタンは２つですが、最大13こまでボタンは設置できます。

チャレンジされたい！という方は、下記のコードをコピペしてみてください。

CHANNEL_ACCESS_TOKENにはLINE developersのMessagingAPIで取得したチャネルアクセストークンを記載してください。

以下がクイックリプライのオウム返しのGASのコードです。

クイックリプライができるGAS全体の内容.gs

//LINE developersにて取得したチャネルアクセストークンを""の中に記載
const CHANNEL_ACCESS_TOKEN = "*********************************/w1cDnyilFU="

//LINEから送られてきたデータはこのdoPostと書かれたところが実行されます
//requestはLINEから送られてきたデータです。
function doPost(request) {

 //POSTリクエストをJSONデータにパース
 const receiveJSON = JSON.parse(request.postData.contents);
 const event = receiveJSON.events[0];

//送られてきたメッセージを使うときは event.message.text
//送られてきたリプライトークンを使うときは event.replyToken

//下に記載のreplyToUserQuickreplyを使う
//ans1、ans2はクイックリプライに表示させる文字と送る文字どっちも兼ねている
//ここに直接文字を入れるときは""で囲う。今回は、送られてきたメッセージのあとに、〇〇？？と〇〇！！と後ろにつけるようにしています。
replyToUserQuickreply(event.replyToken,event.message.text,event.message.text+"？？",event.message.text + "!!")

}


//クイックリプライを送る
function replyToUserQuickreply(replyToken,text,ans1,ans2) {
  const replyText = {
    "replyToken": replyToken,
    "messages": [{
    "type": "text",
    "text": text,
    "quickReply": { 
      "items": [
         {
          "type": "action", 
          "action": {
             "type": "message",
             "label": ans1,//クイックリプライのボタンに表示させるテキスト
             "text": ans1 //クイックリプライで送るテキスト
            }
          },
         {
          "type": "action", // 3
          "action": {
            "type": "message",
            "label": ans2,//クイックリプライのボタンに表示させるテキスト
            "text": ans2 //クイックリプライで送るテキスト
          }
        },
      ]
    }
    }]
  }

  const options = {
    "method": "post",
    "headers":
     {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
      },
    "payload": JSON.stringify(replyText)
  };
  // Line該当ユーザーに応答を返している
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

上記を使ったLINEbotは下記となります。
ぜひおためしください！！

※ハンズオン向けに記載しましたが、オープンな資料としております。