Google apps scriptを使用してLINE messagingAPIのWebhookを使う

公式LINEを利用して飲食店の予約アプリケーションが作りたいと思い立ちました。
有名どころはLステップやエルメ、プロラインフリーといったものもありますが、もっとシンプルなものがあればなぁと思っていました。
事業者が予約機能を導入したいと思っても、飲食に限らずPC・スマホの操作がおぼつかない人もたくさんいらっしゃるので、限定的な機能にしつつ操作がしやすいといったことをベースにして設計していきたいと思います。

LINEを利用するので、LINE Developersの機能としてはmessagingAPIの利用が確定ですが、もしかしたらLINEログインも利用してもいいかも？

応答メッセージを送るソースコード

lineReservation.gs

const LINE_ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty("LINE_TOKEN");
const LINE_REPLY_ENDPOINT = "https://api.line.me/v2/bot/message/reply"

function doPost(e) {
    var json = JSON.parse(e.postData.contents);
    const replyToken = json.events[0].replyToken;

    const requestMessage = json.events[0].message.text;

    const headers = {
        "Authorization": `Bearer ${LINE_ACCESS_TOKEN}`,
        "Content-Type": "application/json",
    }

    const messages = [{
        "type": "text",
        "text": "受け取った内容：" + requestMessage
    }]

    const option = {
        "headers": headers,
        "method": "POST",
        "payload": JSON.stringify({
            "replyToken": replyToken,
            "messages": messages,
        })
    }

    UrlFetchApp.fetch(LINE_REPLY_ENDPOINT, option);
}

上記コードはデプロイして、ウェブアプリのURLをコピーします。
これをLINE Developersのコンソール画面からWebhookのところに貼り付けます。
2024年12月現在、webhookの検証するとランタイムエラーになるのですが、特に問題なくLINE上では応答メッセージが送られてきます。

1. LINEで文章を送信する
2. 公式LINE側にはメッセージイベントが通知されます
3. この時にwebhookで登録したURLへのリクエストが起こる
4. Webhookに登録したウェブアプリとしてのプログラムはdoPost関数（POSTリクエストする関数）を呼び出す

この関数呼び出しでは、メッセージイベントの受信に伴って、リプライトークンの発行も行われており、このトークンに応じて受け取るメッセージも区別することができ、fetchメソッドでAPIをたたくことで応答メッセージの送信をすることが可能になっています。

今回はwebhookによる応答メッセージの送信でしたが、webhookを使わず例えばブロードキャストメッセージやプッシュメッセージの送信といったことが可能です。
単純なメッセージ送信だけならブラウザにボタン用意して、クリックイベントとしてPOSTメソッドを定義、呼び出し

ちなみにGASのdoPost関数実行におけるe.postdata.contentsについては

ユーザーがアプリにアクセスするか、プログラムがアプリに HTTP GET リクエストを送信すると、Apps Script は関数 doGet(e) を実行します。プログラムがアプリに HTTP POST リクエストを送信すると、Apps Script は代わりに doPost(e) を実行します。どちらの場合も、e 引数は、任意のリクエスト パラメータに関する情報を含めることができるイベント パラメータを表します。イベント オブジェクトの構造は次の表のとおりです。
と公式のドキュメントに書かれておりe.postdata.contentsはPOST本文のコンテンツテキストを指定しています。

{
  "destination": "xxxxxxxxxx",
  "events": [
    {
      "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
      "type": "message",
      ～中略～
      "message": {
        "id": "444573844083572737",
        "type": "text",
        "quoteToken": "q3Plxr4AgKd...",
        "text": "@All @example Good Morning!! (love)",
        ～以下略～
      }
    }
  ]
}

上記のイベントのようなものがe.postdata.contentsでとれているので、そのeventsの中の0番目の配列のトークンであったり、メッセージの中のテキストが取得されるといった形になります。

とまぁGASでやってみたわけですが、ここからの展開として

• 事業者ごとに管理画面分けたい
• 管理画面分けるためにはログイン機能実装しないといけないからLINEログインも追加で使いたい
• 事業者ごとに店舗は複数あるかもだから店舗の新規追加や編集ができる機能をつけたい
• Googleカレンダーとの連携をしたい

となるとGASではやっぱり厳しくて、バックエンド機能をdjangoで作り、フロントエンド機能をNext.jsで作っていこうと思います。