Grandream
LINE Messaging API の Webhook 機能と LINE公式アカウントのチャット機能の併用
こんにちは、山下です。
2022年11月30日より、LINE Messaging API の Webhook 機能と LINE公式アカウントのチャット機能が併用できるようになりました!早速試してみたいと思います。
Webhook受信プログラムの実装
LINE Webhook + チャットを併用した際のLINE Webhookの受信を試すために、簡単なプログラムを用意します。
# ディレクトリ作成
mkdir webhook-example
# ディレクトリに移動
cd $_
# package.jsonを生成
npm init -y
# 必要なライブラリを追加
npm install express body-parser localtunnel
# 起動スクリプトを作成
touch index.jsindex.js の中身を以下に書き換える。
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = 3000;
app.use(
bodyParser.urlencoded({
extended: true,
})
);
app.use(bodyParser.json());
app.post("/webhook", (req, res) => {
console.log(JSON.stringify(req.body, null, 2));
res.send(JSON.stringify({ status: "OK" }));
});
app.listen(port, () => console.log(`start: port ${port}!`));# Webhookサーバーを起動
node index.jsLINE Webhook APIに設定するURLは正しいSSL証明書が設定されている必要があるため、今回はlocaltunnelを使います。別ターミナルで以下のコマンドを実行すると、 https://xxxxx-xxxxxx-xxxxxx-x-xxx-xx-xxx.loca.lt のようなURLが表示されるのでメモしておきます。
# localtunnelを実行
npx lt --port 3000
# > your url is: https://xxxxx-xxxxxx-xxxxxx-x-xxx-xx-xxx.loca.ltLINE公式アカウントの設定
LINE公式アカウントを開き、右上の「設定」、左メニューの「応答設定」の順に開くと、チャットとWebhookの設定が表示されます。チャット・Webhook共に有効化します。

LINE Developersの設定
LINE Developers の Messaging API チャネルの Messaging API設定 から以下を設定します。
- Webhook URL: メモしておいたlocaltunnelのURL
- Webhookの利用: 有効

試してみる
トークルームに入って「テスト」と入力すると、WebhookサーバーとLINE公式アカウントチャットの両方にリクエストが送信されていることを確認しました!
LINEアプリからのテキスト送信

LINE公式アカウントのテキスト受信

Webhookサーバーのログ
$ node index.js
start: port 3000!
{
"destination": "U00000000000000000000000000000000",
"events": [
{
"type": "message",
"message": {
"type": "text",
"id": "00000000000000",
"text": "テスト"
},
"webhookEventId": "00000000000000000000000000",
"deliveryContext": {
"isRedelivery": false
},
"timestamp": 1669890773538,
"source": {
"type": "user",
"userId": "U00000000000000000000000000000000"
},
"replyToken": "00000000000000000000000000000000",
"mode": "active"
}
]
}さいごに
「LINE Messaging APIのWebhook機能とLINE公式アカウントのチャット機能は併用ができない」と何度お客様にご説明したことか...待望の機能がリリースされて嬉しい限りです。
Grandream
株式会社グランドリーム
AI・システム開発のプロフェッショナルチームです。AIエージェント・業務自動化・Webシステム開発などを手がけています。