はじめに
Messaging APIを使ってLINE Botを作成するハンズオン記事です。
ユーザーが送ったメッセージをそのままオウム返しで返すLINE Botを作成します。
前提条件
- LINEアカウントを持っていること
- VS Codeがインストールされていること
- VS CodeへGitHub or Microsoftアカウントでサインインしていること
- Node.js v18以上がインストールされていること
ハンズオン
LINE Developersコンソールへログイン
Messaging APIページへアクセスし画面右上の「コンソールにログイン」ボタンをクリックし、ログインします。
プロバイダーの作成
はじめてLINE Botを作成する際はプロバイダーを作成します。
「プロバイダー」の項目横にある「作成」ボタンをクリックします。
プロバイダーは1つのLINEアカウントに複数作成できます。
新規プロバイダー作成ウインドウが表示されるので「プロバイダー名」に任意の名称を入力し「作成」ボタンをクリックします。
Messaging APIチャネルの新規作成
「新規チャネル作成」をクリックします。
「Messaging API」を選択します。
チャネル情報を以下のように入力していきます。
以下に記載のない項目は変更しなくて大丈夫です。
- 会社・事業者の所在国・地域： 該当する国を選択します
- チャネル名： Bot名を入力します
- チャネル説明： Bot名をそのまま入力したりと適当で大丈夫です
- 大業種・小業種： 適当に選択して大丈夫です
- 「LINE公式アカウント利用規約の内容に同意します」チェックボックスをオンにします
- 「LINE公式アカウントAPI利用規約の内容に同意します」チェックボックスをオンにします
最後に「作成」ボタンをクリックします。
内容を確認し「OK」を選択します。
同意確認が2つ表示されるのでそれぞれ内容確認し問題なければ「同意する」をクリックします。
Botの応答設定
Messaging APIチャネルが新規作成されるとBot設定画面になります。
Botはデフォルトでは友達追加時やメッセージを送った際に定型文を返す設定となっています。
BotからのメッセージはMessaging APIにより制御するため、これらの応答設定を解除します。
Bot設定画面にて「Messaging API設定」タブを選択します。
画面を下の方にスクロールすると「応答メッセージ」という項目があるので、項目右にある「編集」リンクをクリックします。
LINE Official Account Manager画面が開かれます。
応答機能より「あいさつメッセージ」と「応答メッセージ」の項目をそれぞれオフにします。
Botの友達追加
続いてBotをLINEアプリにて友達追加します。
LINE Developers コンソール画面に戻り、「Messaging API設定」タブの先頭までスクロールします。
画面に表示されているQRコードをスマートフォンで読み取ります。
LINEアプリにてBotの友達追加画面に遷移するので「追加」をタップします。
Botプログラムの作成
Messaging APIを使用したBotプログラムを作成します。
まずはBotプログラム用ディレクトリを作成し、VS Codeで開きます。
mkdir messaging-api
code messaging-api
次にBotのSDKやHTTPサーバーとなるexpressのNode.jsパッケージをインストールします。
npm i @line/bot-sdk@9 express@4
そして以下のコードをbot.mjsとしてファイル保存します。
touch bot.mjs
import { messagingApi, middleware } from "@line/bot-sdk"
import express from "express"
const channelSecret = "<channel secret>"
const channelAccessToken = "<channel access token>"
const port = 3000
const client = new messagingApi.MessagingApiClient({ channelAccessToken })
const app = express()
app.post("/", middleware({ channelSecret }), (req, res) => {
console.log(req.body.events)
handleEvents(req.body.events)
res.send({ status: 200 })
})
app.listen(port, () => console.log("Start server!"))
const handleEvents = (events) => {
for (const event of events) {
switch (event.type) {
case "message": client.replyMessage({
replyToken: event.replyToken,
messages: [event.message]
}); break
}
}
}
チャネルシークレットとチャネルアクセストークンの取得
さきほど作成したコードではchannelAccessTokenとchannelSecretの値が正しく設定されていないため動作しません。
LINE Developers コンソールのBot設定画面よりそれぞれの値を取得しコードを書き換えます。
まずはチャンネルシークレットを取得します。
Bot設定画面の「チャネル基本設定」タブを開き、下の方にスクロールすると「チャネルシークレット」という項目があるのでその値をコピーします。
そしてbotコードの4行目のchannelSecretにコピーした値を貼り付けます。
次にBot設定画面の「Messaging API設定」タブを開き、下の方にスクロールすると「チャネルアクセストークン（長期）」という項目があります。
「発行」ボタンをクリックするとチャネルアクセストークンが発行されるので、その値をコピーします。
そしてbotコードの5行目のchannelAccessTokenにコピーした値を貼り付けます。
Botプログラムの実行
チャネルシークレットとチャネルアクセストークンをコードに反映できたら以下のコマンドを実行しプログラムを起動します。
Start server!と表示されれば正常に起動している状態です。
$ node bot.mjs
Start server!
VS Codeのポート転送機能によるトンネリング
この段階ではPCローカル上でプログラムが起動している状態ですので、LINEサーバーからBotプログラムへアクセスできません。
そこでVS Codeのポート転送機能を使ってBotプログラムをグローバルネットワークからアクセス可能な状態にします。
ポート転送機能を使用するにはVS CodeへGitHub or Microsoftアカウントでサインインしている必要があります。
サインインされていない場合はVS Codeの左下のアイコンよりサインインを行ってください。
ポート転送機能を呼び出すにはVS Codeのコマンドパレットを起動し（ctrl + shift + p）「Forward a Port」と入力します。
入力の途中で候補が表示されるので、選択してEnterキーを押し実行してください。
するとポート番号の入力フォームが表示されるので「3000」と入力します。
ポート転送機能の使用許可確認が表示されるので「許可」をクリックします。
ポートパネルへ3000ポートに対する転送用URLが発行されます。
しかしこの時点ですとこのURLはグローバルネットワークへは非公開の状態です。
URLを右クリックして表示されるメニューより「ポートの表示範囲」 > 「公開」と選択し、公開状態に変更します。
URL公開に関する注意が表示されるので「続行」をクリックします。
これでグローバルネットワークからPC上で起動しているBotプログラムへアクセス可能な状態になりました。
ポートパネルに表示されているURLにカーソルを合わせ、URLコピーアイコンをクリックします。
BotのWebhook URL設定
VS Codeのポート転送機能により払い出されたグローバルネットワークアクセス可能なURLをBot設定画面よりWebhook URLに設定します。
LINE Developers コンソールのBot設定画面より「Messaging API設定」タブを開き、少し下にスクロールします。
「Webhook URL」という項目があるので「編集」ボタンをクリックします。
URLを入力できるテキストボックスが表示されるので、VS Codeのポート転送機能にて払い出したURLを貼り付け「更新」ボタンをクリックします。
これでWebhook URLがセットされ、LINE BotとPC上で起動しているBotプログラムが紐づけられました。
正常に疎通できているか確認のため「検証」ボタンをクリックします。
問題なければ「成功」というポップアップが表示されます。
最後に「Webhookの利用」という項目をオンにします。
以上でLINE Botの設定は完了です。
Botへのメッセージ送信
LINEアプリより友達になったボットへメッセージを送ってみましょう。
送ったメッセージと同じメッセージがオウム返しで返ってくれば成功です🎉
LINE Botハンズオンは以上です。
お疲れ様でした🎊