LINE Messaging APIを使って、LINE Botから定型文を返信する 📱

アカウントを作成したら、 https://dashboard.ngrok.com/get-started/your-authtoken からauthtokenを確認し、メモしておきましょう。
Ngrokはダウンロードして、グローバルにインストールしても良いのですが、僕はいつもnpmでローカルにインストールして使っています。

実装

❶ コードを書く

.env

CHANNEL_SECRET=共通の準備❹でメモしたチャネルシークレットを記載
CHANNEL_TOKEN=共通の準備❺でメモしたチャネルアクセストークンを記載
NGROK_AUTH_TOKEN=今回用の準備❶でメモしたオーストークンを記載

package.json

{
  "scripts": {
    "upgrade:ngrok": "ngrok config upgrade"
  },
  "dependencies": {
    "@line/bot-sdk": "^8.0.1",
    "dotenv": "^16.3.1",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "ngrok": "^5.0.0-beta.2"
  }
}

index.js

'use strict';

require('dotenv').config();

const ngrok = require('ngrok');
const express = require('express');
const line = require('@line/bot-sdk');
// チャネルシークレットとチャネルアクセストークンを読み込む
const { CHANNEL_SECRET, CHANNEL_TOKEN, NGROK_AUTH_TOKEN } = process.env;
// 将来を見据えて.envでポートを指定できるようにしておくが、今回は未指定なので3000となる
const PORT = process.env.PORT || 3000;
const config = {
  channelSecret: CHANNEL_SECRET,
  channelAccessToken: CHANNEL_TOKEN
};
const client = new line.Client(config);

async function handleLineWebHook(event) {
  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: 'Hello World.' // 返信内容
  });
}

const app = express();

// middlewareを読み込む位置に注意が必要
// https://line.github.io/line-bot-sdk-nodejs/guide/webhook.html
app.use('/webhook', line.middleware(config));

app.post('/webhook', (req, res) => {
  if (req.body.events.length === 0) {
    res.sendStatus(200);

    return;
  }

  Promise.all(req.body.events.map(handleLineWebHook)).then((result) => {
    return res.json(result);
  });
});

app.listen(PORT);

(async () => {
  const url = await ngrok.connect({
    addr: PORT,
    authtoken: NGROK_AUTH_TOKEN
  });

  console.log(`BOT_SERVER_URL: ${ url }`);
})();

コード内のコメントにも書きますが、ミドルウェアを読み込む場所を間違えると動きません。

line.github.io

昔は、

app.post('/webhook', line.middleware(config), (req, res) => {
  if (req.body.events.length === 0) {
    res.sendStatus(200);
    return;
  }

  Promise.all(req.body.events.map(handleLineWebHook)).then((result) => {
    return res.json(result);
  });
});

で、動いたような気がするのですが、これだと動かなくなってました。

❷ コードを実行する

初回のみ、

npm install

と、

npm run upgrade:ngrok

が必要です。

npm install は必要なライブラリのインストール。
npm run upgrade:ngrok はngrok.ymlの作成を行います。

それ以降は、

node index.js

でOKです。

実行すると、ターミナルに、

BOT_SERVER_URL: https://HOGEHOGE.ngrok-free.app/webhook

と、Ngrokの力で世に公開されたURLが表示されるのでメモしておきます。
このURLは、実行する度、毎回変わります。

❸ WebHookのURLを設定する

LINE Developers にログインし、チャンネルの「Messaging API設定 > Webhook設定 > Webhook URL」から、WebHookのURLを設定します。
WebHookのURLは❷でメモしたURLです。

URLを入力したら、「検証」を押下してみましょう。
うまくいっていれば、「成功」と表示されます。

成功したら、「Messaging API設定 > Webhook設定 > Webhookの利用」をONにします。

❹ LINE BOTの設定を変更する

実は、LINE BOTには標準で自動返信機能が備わっており、これをOFFにしないとWebHookとバッティングするのでOFFにします。

「Messaging API設定 > Webhook設定 > LINE公式アカウント機能 > 応答メッセージ」の編集を押下し、「Webhook」をONに、「応答メッセージ」をOFFにします。

❺ メッセージを送信してみる

これで、すべての設定が完了です。

試しにLINE BOTに何かメッセージを送信してみましょう。
なにを送信しても、即レスで「Hello World.」と返してくれるはずです。

リポジトリはこちらです。

github.com

みかづきブログ・カスタム

基本的にはちょちょいのほいです。

LINE Messaging APIを使って、LINE Botから定型文を返信する 📱

共通の準備（前回と一緒なのでスキップ可能）

❶ Developerアカウントを作成する

❷ プロバイダーを作成する

❸ チャンネルを作成する

❹ チャネルシークレットをメモする

❺ チャネルアクセストークンを発行しメモする

❻ Botと友達になる

今回用の準備

❶ Ngrokのアカウントを作成しauthtokenをメモする（任意）

実装