LINE Messaging API の Webhook 機能と LINE公式アカウントのチャット機能の併用

2022-12-01
山下 徳光
#
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.js

index.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.js

LINE 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.lt

LINE公式アカウントの設定

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公式アカウントのチャット機能は併用ができない」と何度お客様にご説明したことか...待望の機能がリリースされて嬉しい限りです。

こんにちは、山下です。

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.js

index.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.js

LINE 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.lt

LINE公式アカウントの設定

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公式アカウントのチャット機能は併用ができない」と何度お客様にご説明したことか...待望の機能がリリースされて嬉しい限りです。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら