やりたいこと
LINE上でメッセージを送信すると指定の応答をするBot作成。
1. LINE Developers
まずはLINE developerというMessaging APIが使用できる開発者向けのサイトで準備をします。LINEアカウントが必要になりますので、持ってない方は先に作成しておきましょう。
ログイン
まずはLINE Developersにアクセスし、ログイン ＞LINEアカウントでログインでログインページへ。
LINEアカウントに登録しているメールアドレスとパスワードを入力しログインすると認証コードが発行されるので、LINEアプリを立ち上げ該当コードを入力してください。
認証が成功したら
developer name
your email
に任意の名前とメールアドレスを入力し、create my accountしましょう。
Provider作成
ログインができたら、Providerを作成します。
create new providerを押し、Provider nameに任意の名前を入力し、作成しましょう。
Channel作成
Providerの作成ができたら、次はChannelの作成をします。
ChannelのタイプはMessaging APIを選択してください。
・Channel name
・Channel description
・Category
・Subcategory
の4つを入力し、createします。
作成したChannelは以降のプロセスでも何度か訪れるので覚えておいてください。
2. Heroku
Herokuは簡単に言うとWebサーバを提供しているプラットフォームになります。
簡単なアプリをアップロードする場合に使うことが多いです。
今回は無料の範囲で使用できます。制限や料金等の詳細はこちらの記事をご参考ください。
アカウント作成
Heroku公式にアクセスし、無料で新規登録してください。
Heroku CLI
Herokuへのログイン操作などはCLI上でするので、HerokuをCLI上で使えるようにする必要があります。
The Heroku CLIにアクセスし、ご自身の環境に合わせてインストーラをダウンロードしてください。
バージョン確認
下記コマンドを実行して、バージョンが出力されたらOKです。
$ heroku -v
3. Node.js
インストール
Node.js公式にアクセスし、インストールしてください。LTSの方で大丈夫です。
バージョン確認
下記コマンドを実行して、バージョンが出力されたらOKです。
$ node -v
バージョンが出力されない場合、node.exeが存在するフォルダパスを環境変数に設定しましょう。設定が終わったら、CLIを再起動し上記コマンドを実行してみてください。
4. Git
インストール
Gitダウンロード公式にアクセスし、ご自身の環境に合わせてインストールしてください。
バージョン確認
下記コマンドを実行して、バージョンが出力されたらOKです。
$ git --version
5. CLI操作
ここからは主にCLI操作をします。Windowsの場合はコマンドプロンプト/Power shell、Macの場合はターミナルを使用。
Herokuログイン
Herokuにログインにするため、下記コマンドを実行します。
$ heroku login
ブラウザが立ち上がるので、メールアドレスとパスワードを入力しログインしましょう。
ディレクトリ/フォルダ作成
アプリケーションを置くディレクトリ/フォルダを作成しておきます。
# 新しいディレクトリ/フォルダ作成
$ mkdir <任意のディレクトリ/フォルダ名>
# 作成したディレクトリ/フォルダに移動
$ cd <上記ディレクトリ/フォルダ名>
以降のCLI操作は、作成したディレクトリ/フォルダ内で行います。
Gitリポジトリ
gitを使ってHerokuにアップするので該当ディレクトリ/フォルダをリポジトリ化しておきます。
$ git init
Heroku URL作成
下記コマンドを実行すると、https://{アプリ名}.herokuapp.com/のようなURLが作成されます。
作成されたURLはどこかにコピーしておきましょう。
$ heroku create <任意のアプリ名>
Webhook URLを設定
ブラウザに戻ります。
LINE Developersで作成したChannelにアクセスし、
Messaging API設定のWebhook URLという項目に、生成したURLを設定します。
このとき、https://{アプリ名}.herokuapp.com/webhookのように生成されたURLの末尾にwebhookを付け加えておきましょう。
Channel access tokenのHeroku環境変数への設定
一番下にあるChannel access tokenをコピーします。
CLIに戻り、下記コマンドを実行してHeroku内の環境変数にLINE_ACCESS_TOKENとして設定しておきましょう。
$ heroku config:set LINE_ACCESS_TOKEN={コピーしたチャネルアクセストークンをペースト}
package.json作成
CLIに戻り、下記コマンドを実行しましょう。
$ npm init -y
実行後、カレントディレクトリ内にpackage.jsonファイルが作成されていることを確認しましょう。
作成の確認が出来たら、エディタで当該ファイルを開き"start": "node index.js"を追加していきます。
○変更前
{
"name": <ディレクトリ名>,
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
○変更後
{
"name": <ディレクトリ名>,
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
変更が終わったら、CLIに戻ります。
expressインストール
node.jsのwebフレームワークであるexpressを下記コマンドでインストールします。
$ npm install express --save
6. メインファイル
このファイルを実行するとアプリが立ち上がります。
作成
CLIで作成する場合、下記コマンドで作成してください。
$ touch index.js
Windowsではおそらくtouchコマンドは使えないのでエクスプローラだったり、エディタ上でファイルを作成しても大丈夫です。
編集
以下のように編集しましょう。
// パッケージ取得
const https = require("https")
const express = require("express")
// PORTとTOKENは環境変数に設定しておき、そこから取得
const PORT = process.env.PORT || 3000
const TOKEN = process.env.LINE_ACCESS_TOKEN
const app = express()
// ミドルウェアの設定
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// 「/」にGETリクエストがあった場合の処理
app.get("/", (req, res) => {
res.sendStatus(200)
})
// 「/webhook」にPOSTリクエストがあった場合の処理
app.post("/webhook", function(req, res) {
res.send("HTTP POST request sent to the webhook URL!")
// ユーザーがボットにメッセージを送った場合、返信メッセージを送る
if (req.body.events[0].type === "message") {
// 文字列化したメッセージデータ
const dataString = JSON.stringify({
replyToken: req.body.events[0].replyToken,
messages: [
{
"type": "text",
"text": "Hello, user"
},
{
"type": "text",
"text": "May I help you?"
}
]
})
// リクエストヘッダー
const headers = {
"Content-Type": "application/json",
"Authorization": "Bearer " + TOKEN
}
// リクエストに渡すオプション
const webhookOptions = {
"hostname": "api.line.me",
"path": "/v2/bot/message/reply",
"method": "POST",
"headers": headers,
"body": dataString
}
// リクエストの定義
const request = https.request(webhookOptions, (res) => {
res.on("data", (d) => {
process.stdout.write(d)
})
})
// エラーをハンドル
request.on("error", (err) => {
console.error(err)
})
// データを送信
request.write(dataString)
request.end()
}
})
app.listen(PORT, () => {
console.log(`Example app listening at http://localhost:${PORT}`)
})
7. Herokuにデプロイ
CLIに戻り、下記3つのコマンドを実行すると、Herokuへのデプロイが完了します。
$ git add .
$ git commit -m "First commit"
$ git push heroku master
8. Botを動かしてみよう
LINEに作成したBotを追加（友だち追加）
LINE DevelopersのChannel上のBot basic IDやQR codeを使ってLINEにBotを追加できます。
メッセージを送信
何かしらメッセージを送信すると
Hello, user
May I help you?
の2つのメッセージが返ってくるはずです。
なにも返ってこない場合はこれまでのプロセスと違うことをしている可能性がありますので、もう一度チェックしましょう。
なお、上記以外のメッセージが付随して返ってくる場合は、LINE DevelopersのChannelにて以下のような項目がありますので、それぞれDisableに設定するとOKです。
・Allow bot to join group chats
・Auto-reply messages
・Greeting messages
LINE Messaging APIの仕組みとしてはユーザーがメッセージを送信するとLINEサーバー上でWebhookが発生し、設定したWebhook URL（BOT側）にイベント内容をPOSTリクエストします。
今回の場合Webhook URLの向き先はindex.jsの/webhookになります。
POSTリクエストを受け取った/webhookはリクエストの内容からLINEにどのようなイベントが発生したか（どのようなメッセージがユーザーから送信されたか）がわかります。
そして、そのイベント内容によってどのようなメッセージを返信するかを定義し、LINEサーバーに返しています。
今回の場合、以下の部分でイベント内容を特定し、返信内容を定義しています。
....
if (req.body.events[0].type === "message") {
// 文字列化したメッセージデータ
const dataString = JSON.stringify({
replyToken: req.body.events[0].replyToken,
messages: [
{
"type": "text",
"text": "Hello, user"
},
{
"type": "text",
"text": "May I help you?"
}
]
})
......
}
返信メッセージを変更したい場合は"text"の値を変更します。
返信できるメッセージタイプはテキストだけでなく、スタンプや画像、動画等多数サポートしています。詳しくはこちらを参照してください。
変更を反映する場合は7. Herokuにデプロイを再度実行してください。
9. まとめ
非常に簡単なLINEBOTになりますが、環境構築に悩んでいた方は参考にしていただければと思います。