Node.jsとTypeScriptを使用したLINEBot開発の基本的な知識と実践的な方法についてまとめていきます。
具体的には、LINEBot開発に必要な環境構築やLINE Messaging APIの設定、LINEBot SDKを使ったBotの実装方法、ngrokを使ってローカル環境を外部公開する方法などについて解説します。
LINEBotとは何か
LINEBotとは、LINE Messaging APIを利用して、LINEアプリ内でチャット型のコミュニケーションを行うことができるボットのことです。ユーザーとの自動応答や、特定のワードに反応するアクションを設定することができ、さまざまなシーンで活用できます。
LINEBotの開発には、Node.jsやPythonなどのプログラミング言語を使った開発が一般的で、SDK（※）も提供されているため初心者の方でも簡単に開発が可能となっています。
LINEBotでできること
- 自動応答
ユーザーからのメッセージに対して自動で返信をすることができる
例）お店の定休日や営業時間などの情報を返信することができたり、今話題のChatGPTとの連携も可能。 - 情報提供
あらかじめ設定した情報をユーザーに提供することができる
例）最新のニュースや天気予報、交通情報などを提供 - サービスの利用
あらかじめ設定したサービスをユーザーに提供することができる
例）予約システムや注文システムなどを提供 - ユーザー管理
ユーザーの情報を管理することができる
例）ユーザーの属性情報や購入履歴などを管理 - エンターテイメント
ユーザーとのコミュニケーションを楽しむことができる
例）クイズやゲームなどを提供
今回構築するアプリケーションの処理フローは以下のようになります。
実装の流れ
前回の記事を参考にNode.js + TypeScriptの実行環境を構築
expressを使用してAPIサーバーを作成し、LINE Messaging APIからのWebhookを受信するための基盤実装
LINE Messaging APIとの接続をするために、ngrokを使ってローカル環境を外部公開
LINE Developers ConsoleでMessaging APIの設定し、自身のLINEBotを作成
LINEBot SDKを利用して、Botの機能を実装
実装したLINEBotに対してメッセージを送信し、正常に動作することを確認
開発環境
- Node.js：
v18.15.0 - npm：
v9.5.0 - TypeScript：
v4.9.5 - OS：
MacOS Monterey
構築手順
Node.jsとTypeScriptによる実行環境構築
Node.jsとTypeScriptを使ってLINEBotを開発するには、まずNode.jsとTypeScriptをインストールし、実行環境をセットアップする必要があります。過去に構築手順についてまとめた記事がありますので、参考にしてください。
expressによるAPIサーバーの構築
LINEBotを開発するためには、APIサーバーを構築する必要があります。本記事では、expressを使ったAPIサーバーの構築方法について解説します。
パッケージのインストール
$ npm install --save express
$ npm install --save-dev @types/express ts-dotenv nodemon実装
import express, { Application, Request, Response } from 'express';
import { load } from 'ts-dotenv';
const env = load({
PORT: Number,
});
const PORT = env.PORT || 3000;
const app: Application = express();
app.get('/', async (_: Request, res: Response): Promise<Response> => {
return res.status(200).send({
message: 'Hello World!',
});
});
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}/`);
});
package.jsonに設定を追加
"scripts": {
"build": "npx tsc",
"build:watch": "npx tsc --watch",
"start": "node dist/index.js",
"start:dev": "nodemon dist/index.js"
},動作検証
$ npm run start:dev 23:16:15
> ts-linebot@1.0.0 start:dev
> nodemon dist/index.js
[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node dist/index.js`
http://localhost:3000/$ curl http://localhost:3000/ 23:09:28
{"message":"Hello World!"}ngrokを使ってローカル環境の外部公開
LINEBotを開発する際、ローカル環境での開発では、外部からのアクセスができません。そこで、ngrokを使ってローカル環境を外部に公開する必要があります。ngrokを使ったローカル環境の外部公開方法について解説します。
今回は下記記事を参考にngrokの準備をしました。
ngrokでlocalhost(127.0.0.1)をHTTPS化する
一応こちらにも主な流れを記載します。
- ngrokのインストール
ターミナルでbrew install --cask ngrokのコマンドを入力して、ngrokをインストールします。Homebrewがインストールされていることが前提 - アカウントの登録
ngrokを使用するためには、アカウント登録が必要なため、https://dashboard.ngrok.com/signup から登録する。 - 認証トークンの取得
ngrokを使用するには認証トークンが必要なため、アカウント登録後、ダッシュボードからトークンを取得 - ngrokの認証
ターミナルでngrok authtoken <your_auth_token>を入力して、ngrokを起動。<your_auth_token>には、③で取得した認証トークンを入力 - ngrokの起動
ngrok http 3000のコマンドを実行して、Node.jsで起動したポート番号3000のサーバーを公開 - 動作確認
ターミナルに表示されたhttps://*******.jp.ngrok.ioのURLを使用して、サーバーにアクセスし、画面上に「Hello World!」と表示されていればOK
以上の手順で、ngrokの準備は完了となります。
LINE Messaging APIの設定
LINEBotを開発するには、LINE Messaging APIの設定が必要です。そのため、LINE Messaging APIの設定方法について解説します。また、LINE Developer Consoleにアカウント登録する必要がありますので、アカウント登録方法についても併せて解説します。
- LINE Developersにログイン
LINE Developersのウェブサイト https://developers.line.biz/ja/ にアクセスして、ログインします。
※普段使用しているLINEアカウントが使用可能 - プロバイダーの作成
プロバイダーは、LINE Messaging APIを利用するための組織単位です。プロバイダーを作成するには、ダッシュボードの左側にある「プロバイダーの作成」ボタンをクリックし、必要事項を入力します。 - チャネルの作成
LINE Messaging APIを利用するためには、チャネルを作成する必要があります。ダッシュボードの左側にある「新しいチャネルを作成」ボタンをクリックして、必要事項を入力します。 - チャネル設定の変更
作成したチャネルの「チャネル設定」を変更します。設定項目には、基本情報、メッセージ送信設定、Webhook送信設定などがあります。必要事項を入力して設定を完了してください。 - Webhookの設定
LINE Messaging APIを利用するためには、Webhookの設定が必要です。Webhookは、LINEのサーバーからのメッセージを受け取るためのURLを指します。チャネル設定の「Webhook送信設定」で、ngrokが生成したURLをWebhookのURLとして設定してください。 - LINEアプリでチャネルのQRコードを読み取る
作成したチャネルのQRコードを読み取って、LINEアプリで友達追加を行ってください。
※この時点では、メッセージを送っても何も反応がない状態ですが問題ありません
LINE Botのクライアントを生成するためには、「CHANNEL_ACCESS_TOKEN」と「CHANNEL_SECRET」が必要となりますので、それぞれ以下のページから値を控えておいてください。CHANNEL_ACCESS_TOKEN
「Messaging API設定」ページ内にある「チャネルアクセストークン」をコピーCHANNEL_SECRET
「チャネル基本設定」ページ内にある「チャネルシークレット」をコピー
以上が、LINEのMessaging APIを利用するための手順となります。
いよいよ本題であるLINTBotの実装に入っていきます。
LINEBot SDKを使ったLINEBotの実装
LINEBotのSDKを利用して、LINE Botとやり取りするための実装を行なっていきます。
ここでの実装が完了すれば、LINE Botの完成となります。
LINE SDKのインストール
npm install --save @line/bot-sdk.envファイルに環境変数を設定
LINE Messaging APIの設定の際に取得した「チャネルアクセストークン」と「チャネルシークレット」を定義
CHANNEL_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CHANNEL_SECRET=xxxxxxxxxxxxxxxxxxxx
PORT=3000完成系
最終的な実装は以下のようになります。
import {
ClientConfig,
Client,
middleware,
MiddlewareConfig,
WebhookEvent,
TextMessage,
MessageAPIResponseBase,
} from '@line/bot-sdk';
import express, { Application, Request, Response } from 'express';
import { load } from 'ts-dotenv';
const env = load({
CHANNEL_ACCESS_TOKEN: String,
CHANNEL_SECRET: String,
PORT: Number,
});
const PORT = env.PORT || 3000;
const config = {
channelAccessToken: env.CHANNEL_ACCESS_TOKEN || '',
channelSecret: env.CHANNEL_SECRET || '',
};
const clientConfig: ClientConfig = config;
const middlewareConfig: MiddlewareConfig = config;
const client = new Client(clientConfig); //①
const app: Application = express(); //②
app.get('/', async (_: Request, res: Response): Promise<Response> => { //③
return res.status(200).send({
message: 'success',
});
});
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: text,
};
await client.replyMessage(replyToken, response);
};
app.post( //⑤
'/webhook',
middleware(middlewareConfig),
async (req: Request, res: Response): Promise<Response> => {
const events: WebhookEvent[] = req.body.events;
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);
}
})
);
return res.status(200);
}
);
app.listen(PORT, () => { //⑥
console.log(`http://localhost:${PORT}/`);
});
処理フロー
- クライアントの設定
LINE Bot SDKの「Client」を使用して、LINE Messaging APIにアクセスするためのクライアントを設定 - サーバーの設定
expressアプリケーションを設定しています。 - ルートの設定
ルートとして「/」にGETリクエストが送信された場合、「success」というメッセージを返すように設定しています。 - テキストメッセージのイベントハンドラー
受信したイベントがテキストメッセージの場合、メッセージを返信する処理を実行するイベントハンドラーを設定しています。
※ 本記事では受け取ったメッセージをそのまま返す形にしていますが、この部分を応用させれば様々な処理を実装することが可能となります - Webhookの設定
LINE Messaging APIのWebhookの設定を行っています。POSTリクエストが送信された場合、「middleware」を介してイベントを受信し、処理を実行するように設定しています。 - サーバーの起動
サーバーを起動し、ローカル環境でのアクセスURLをコンソールに出力しています。
動作検証
以下、準備できていることを確認してから実施してください。
# ①サーバーを起動
$ npm run start
# ②ngrokを起動 ※別ターミナル
$ ngrok http 3000
Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust
Session Status online
...略...
Forwarding https://c4xxxxxxxxxxxxxxxx09.jp.ngrok.io -> http://localhost:3000 npm run startによりhttp://localhost:3000でサーバーが起動していること- ngrokを起動させ、https通信によるURLが生成されていること
- LINE Messaging API側のWebhookURLがngrokが生成したURLに設定されていること
/webhookを忘れずに
上記、準備が完了していることが前提として、
LINEから今回作成したLINE Botに対してメッセージを送ってみると、オウム返しでメッセージが返ってきていることが確認できました！
送信されたメッセージに対してどのような処理を行うかは開発者次第ですので、様々なことが応用できるかと思います。
その他
外部公開について
RenderやHerokuなどのホスティングサービスを利用した場合、ngrokのようにURLが頻繁に変更されることはありません。一度設定すれば、同じURLで常にアクセスすることができます。このため、LINEBotを開発する際には、URLの変更や設定の手間を省きたい場合は、ホスティングサービスを利用することをおすすめします。
別記事にてRenderを使ったデプロイ方法についてはまとめていますので、参考にして頂ければと思います。
まとめ
Node.jsとTypeScriptを使用したLINEBot開発に必要な基礎知識と実践的な方法についてまとめてみました。
LINEBot開発は一度やってしまえば割と簡単に作れるので、今後も様々な応用に挑戦していきます。
