【LINE Messaging APIの使い方解説（その１０）】Webhookの解説（応答システム）

こんにちは、くのへです！
LINEのMessaging APIを使おう！というテーマで記事を書いて行きます。
これまでの記事（その１～その６）でMessaging APIを使ってメッセージを送ったり、チャンネル情報を取得する方法を解説しました！
記事その７～９で公式アカウントの使い方について解説を行ってきました。

この記事はこのLINEシリーズの最終記事として、Webhookについて解説します。
Webhookを使う場合はプログラミングの知識が必要であり、特に「Postリクエストを受け取る」仕組みを自分で作る必要があるため、結構ハードルが高い技術です。
ここを使える方は、LINE Messaging APIをかなり使いこなしていると言っても過言ではないように思います。

この記事ではWebhookとは何かを解説し、WebhookでユーザIDを取得するGoogleAppsScriptのコードの例を解説します。

Webhookを使うとどういうことが出来るの？

Webhookを使うと、次の①②のことが出来るようになります

①友達登録してくれたユーザの「ユーザID」を抽出することが出来ます。
　これにより、その２の記事で解説した「プッシュメッセージ」を使って、その人だけにメッセージを送ることが出来るようになります。
　スプレッドシートやエクセルなどでユーザIDを管理しておけば、特定のメンバーにだけメッセージを送る仕組みが作れますね。
　例えば過去に購入履歴が多い人だけに送る！とか、そんな管理が出来るようになります。

②自動応答システムを作れるようになります。
　LINE公式アカウントにメッセージを送られた時に自動応答する仕組みはその７の記事で解説していますが、これだと画一的なメッセージ応答しかできません。
　一方、ユーザから受け取ったメッセージをプログラムで処理して返答するようにすれば、かなり柔軟な対応が出来るようになります。
　例えば受け取ったメッセージをchatGPTのような生成AIに送って処理させ、その返答をLINEに打ち返す仕組みを作れば、本当に人間と会話しているようなLINEボットが出来上がります。

　次の画像がLINEに「こんばんは」とメッセージを送り、それをWebhookでGoogleAppsScriptを動作させて生成AI（Gemini）に送り、その返答をLINEに打ち返すという仕組みで作ったお姉さんBOTです。
「こんばんは」以外のメッセージでもちゃんと返答してくれます。本当にまるで人間と会話している気分になれます。

ただし、前述の通り、これを作るにはプログラミング技術が必要になりますし、WebAPIの知識も必要になってきます。
また、WebAPIのリクエストを受け取る仕組みを作る必要があるため、かなりハードルが高い技術になります。
（ファーストゲートにはこの技術を学ぶ講座があります。また、LINEの公式チャンネル／生成AIと組み合わせたLINEボット制作等のご相談もお気軽にどうぞ。←宣伝）

まずはLINE公式アカウント管理画面にアクセス

この記事を読んでいる方は、既にLINE公式アカウントのチャンネルを作っていると思います。
LINE公式アカウント管理画面（LINE Official Account Manager）にアクセスしてください。
LINE公式アカウントの管理画面のURLはこちらです。

https://www.lycbiz.com/jp/login

LINE公式アカウントのログインボタンをクリックしましょう。（下図①）

このサイトをクリックすると、自分のビジネスアカウントIDなどのアクセスについて承認画面が開かれたのち、自分のチャンネルが一覧で表示されます。
この記事ではこの中の１つを選択して進めた状態で解説します。

Webhookの設定

チャンネルを開くと、下図の様な画面が表示されます。
ここも前回の記事と同じですね。

右上の「設定」をクリックしましょう。

左のメニュから「Messaging API」をクリックします（下図①）。
するとWebhook URLと記載されている欄があります（下図②）。ここにURLを記載すると、ユーザがメッセージを送信した時、このURLに向かってPOSTリクエストが発信されるという仕組みになっています。

ここを設定して保存した上で、もうひと手間かける必要があります。

左のメニュの「応答設定」をクリックしましょう。（下図①）
この中にWebhookのON/OFFボタンがありますので、これをONにします。（下図②。先ほどのWebhookURLを記述しておかないとONに出来ません）
これでメッセージを受け取ったら、所定のURLにPOSTリクエストが発信されます。

なお、Webhookで自動応答するプログラムを組んだ場合、LINEの応答メッセージ機能は不要になります。応答メッセージの送信機能をOFFにすることも検討しましょう（上図③）。

ユーザIDを取得するプログラム

ユーザが友達登録したり、ブロックしてから再びブロック解除すると挨拶メッセージが飛んできます。
下図のものがデフォルトで設定される挨拶メッセージです。

何かの公式アカウントを友達設定したことのある方は、挨拶メッセージが飛んでくるのを経験しているのではないかと思います。

この挨拶メッセージが飛んでくる行動をしたとき（友達登録またはブロックしてから再びブロック解除した時）に、Webhookを設定しておくと、所定のURLをエンドポイントとしてPOSTリクエストが発信されます。

どのような情報が発信されるかというと下図のようなJSON形式のデータが飛んできます。これはLINE公式ドキュメントにこの通り書いています。

ということで、eventsのsourceのuserIdを抽出すればuserIdを取得できるわけです。

Webhookで送られるPOSTリクエストを受け取る

POSTリクエストを受け取るにはサーバーを作る必要があったりするため、かなり大変です。
一方で、GoogleAppsScriptを使えば手軽に作ることが出来ます。

次のコードをGoogleAppsScriptに記載しましょう。

function doPost(e) {

  // シートの読み込み
  const wb = 'スプレッドシートのID';
  const ws = 'シート名';
  const sheet = SpreadsheetApp.openById(wb).getSheetByName(ws);

  let eventData = JSON.parse(e.postData.contents);

  sheet.getRange(1,1).setValue(eventData.events[0].source.userId);

}

このコードはポストリクエストを受けとり、一緒に送られてくるデータ一式を変数「e」として受け取るコードです。
受け取ったデータの中からペイロードに相当するものを取り出すには、「e.postData.contents」と書けばOKです。
ただし送られてくるデータは「文字列」として送られてくるため、これをJSON.parseを使ってJSONデータとして認識させています。

後は、前述の通り、↓このデータの形になっているので、events[0].source.userIdと書けばユーザIDを取得できるわけです。
（これをスプレッドシートのA1セルに記載させているのが上記コードです。）