TypeScriptでLINE BOTを操作してみる(Mac)

line/bot-sdkをインストール

npm install @line/bot-sdk

SDKドキュメントを参考に進めて参りますが、既にデフォルトでTypeScriptの定義がされているので、難なくコピペで進行できるかと思います。WebhookサーバーをエコーするのにExpressを使用します。

npm install express

タイトル通りTypeScriptでってことなので下記をインストール

npm install typescript ts-node

npm install @types/node @types/express -D

package.json

package.json

{
 "dependencies": {
    "@line/bot-sdk": "^7.5.2",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.11.4"
  },
  "private": true
}

tsconfig.json

tsconfig.json

{
    "ts-node": {
        "compilerOptions": {
            "module": "CommonJS"
        }
    },
}

下記から.envにいれるトークンを取得します。

ホーム右上の設定から、応答設定とMessaging APIを開き設定します。この時に、友達登録もしておきましょう。


応答設定

Webhook URLにngrokでトンネリングさせます。新規ターミナルから

ngrok http 3000

してngrokを立ち上げたら、ForwardingのURL+/webhookを下記、Webhook URLに保存します。

ngrokは常に起動した状態を保って下さい。次にこちらのMessaging APIサイトから下記の要領でチャンネルアクセストークンを取得して下さい。

以上を.envに入れます。

.env

CHANNEL_ID='LINE BOTのクライアントID'
CHANNEL_SECRET='LINE BOTのクライアントシークレット'
CHANNEL_ACCESS_TOKEN='LINE BOTのチャンネルアクセストークン'

ルート直下に、server.tsファイルを作成して下記コードを入力。

server.ts

// すべての依存関係をインポートし、見やすくするために構造化
import { ClientConfig, Client, middleware, MiddlewareConfig, WebhookEvent, TextMessage, MessageAPIResponseBase } from '@line/bot-sdk';
import { Application, Request, Response } from 'express';
import express = require('express');
require('dotenv').config();

// LINEクライアントとExpressの設定を行う
const clientConfig: ClientConfig = {
    channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN || '',
    channelSecret: process.env.CHANNEL_SECRET,
};

const middlewareConfig: MiddlewareConfig = {
    channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
    channelSecret: process.env.CHANNEL_SECRET || '',
};

const PORT = process.env.PORT || 3000;

// LINE SDKクライアントを新規に作成
const client = new Client(clientConfig);

// Expressアプリケーションを新規に作成
const app: Application = express();

// テキストを受け取る関数
const textEventHandler = async (event: WebhookEvent): Promise<MessageAPIResponseBase | undefined> => {
    // すべての変数を処理
    if (event.type !== 'message' || event.message.type !== 'text') {
        return;
    }

    // メッセージに関連する変数をこちらで処理
    const { replyToken } = event;
    const { text } = event.message;

    // 新規メッセージの作成
    const response: TextMessage = {
        type: 'text',
        text,
    };

    // ユーザーに返信
    await client.replyMessage(replyToken, response);
};

// LINEミドルウェアを登録
// ルートハンドラの中でミドルウェアを渡すことも可能↓
// app.use(middleware(middlewareConfig));

// Webhookイベントを受信する
// 接続テストを受信
app.get(
    '/',
    async (_: Request, res: Response): Promise<Response> => {
        return res.status(200).json({
            status: '成功',
            message: '正常に接続されました!',
        });
    }
);

// Webhookに使用されるルート
app.post(
    '/webhook',
    middleware(middlewareConfig),
    async (req: Request, res: Response): Promise<Response> => {
        const events: WebhookEvent[] = req.body.events;

        // 受信したすべてのイベントを非同期で処理
        const results = await Promise.all(
            events.map(async (event: WebhookEvent) => {
                try {
                    await textEventHandler(event);
                } catch (err: unknown) {
                    if (err instanceof Error) {
                        console.error(err);
                    }

                    // エラーメッセージを返す
                    return res.status(500).json({
                        status: 'エラー',
                    });
                }
            })
        );

        // 成功した場合のメッセージを返す
        return res.status(200).json({
            status: '成功',
            results,
        });
    }
);

// サーバーを作成し3000listenする
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}/。`);
});

立ち上げ時にts-node server.tsだとzsh: command not found: ts-nodeエラーで怒られるので、npxに頼ります。

npx ts-node server.ts

LINEでメッセージを入力するとやまびこになって返ってきたら成功です。