Node.js + HerokuでLINE Messaging APIを叩いてみる
とある用事でLINE BOTを作ってみよう!と思い立ち、すぐさま取り掛かることに。
しかし動かすまでに意外と手間取ったので、ブログとして書き残しておきました。
環境
- Windows10
- Node.js v8.11.1
- Heroku Free
LINE Developerの登録
LINE BOTを作成するために、LINE Messaging API を利用します。
「今すぐ始めよう」をクリックするとログイン画面に飛ぶため、とりあえず自分の普通のアカウントでログインしましょう。ログイン後、チャネル(要はbot)を新規作成する プロバイダー を選択します。チャネルは普通のLINEアカウントとしてではなく、それと紐づけされた「プロバイダー」として作成者が定められるようです。
プロバイダーの設定が終わったら、いよいよチャネルの登録です。
基本的に指示に沿って名前や説明欄を埋めるだけですが、上図のプランに注意。フリープランだと友達人数の上限がありませんが、[PUSH_MESSAGE]機能が使えなくなってしまいます。ここではとりあえず Developer Trial プランで始めることにしましょう。
とりあえずチャネルの登録はできました。しかしチャネル基本設定を見てもChanne IDやらアクセストークンやらwebhookなどイマイチ使い方が分からない……大丈夫です。アレコレ試行錯誤して使い方は理解したので後程お話します。
ローカルでコーディング
ここからはローカルの話。(以降ではNode.jsとnpm、gitは使えること前提で書きます)
$ mkdir sample-app $ cd sample-app $ npm init -y $ npm install --save @line/bot-sdk express
上記のコードで適当にディレクトリを作成し、Node.js用のAPIである@line/bot-sdk、サーバ構築用にExpressをインストールします。
あとはプログラムですが、とりあえず公式のサンプルコードを拝借します。
'use strict'; const line = require('@line/bot-sdk'); const express = require('express'); // create LINE SDK config from env variables const config = { channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN, channelSecret: process.env.CHANNEL_SECRET, }; // create LINE SDK client const client = new line.Client(config); // create Express app // about Express itself: https://expressjs.com/ const app = express(); // register a webhook handler with middleware // about the middleware, please refer to doc app.post('/callback', line.middleware(config), (req, res) => { Promise .all(req.body.events.map(handleEvent)) .then((result) => res.json(result)) .catch((err) => { console.error(err); res.status(500).end(); }); }); // event handler function handleEvent(event) { if (event.type !== 'message' || event.message.type !== 'text') { // ignore non-text-message event return Promise.resolve(null); } // create a echoing text message const echo = { type: 'text', text: event.message.text }; // use reply API return client.replyMessage(event.replyToken, echo); } // listen on port const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`listening on ${port}`); });
これをserver.js
等名前をつけて保存します。ここで重要なのがconfig
オブジェクトにCHANNEL_ACCESS_TOKEN
およびCHANNEL_SECRET
を代入しているところです。どこかで聞いたような変数名ですね。
また、以下のファイルをProcfile
という名前で保存します。かなり重要なファイルなので忘れないように。
web: node server.js
以上でローカルの操作は一通り終了です。後々のためにこれらのファイルをGithubにあげましょう。Githubでてきとうにレポジトリを作成したらpushしましょう。Gitの使い方は割愛します。
Herokuの設定
いよいよHerokuを使っていきます。HerokuはPaaSの一種で、個人開発程度ならFreeプランでアレコレできるので簡単にbotを実装できます。Azureとか個人サーバからngrokを利用してトンネルする(よくわかってない)方法とか選択肢はありますが、おそらくHerokuが一番親切で簡単に始められるでしょう。Micr〇S〇ftとかユーザーにAzure使わせる気あるんですか?というレベルでドキュメントが分かりにくいので
登録が終わると以下のような画面が出てくるでしょう。とりあえずページ右上のopen app
を押し、なにも表示されませんがhttps://[アプリ名].herokuapp.com に接続できたら大丈夫です。
それではこのherokuにデプロイしていきます。herokuのデプロイは2通りあり、
があります。ここでは先程pushしたGithubを使うことにします。
Deployページを開き、連携するGithub repository を選択します。ページ中部にconnected to [レポジトリ名] by [アカウント名]
と表示されたら無事完了です。
最後に、前章でコメントしていたserver.js
の変数についてです。どこにも定義されずに登場したCHANNEL_ACCESS_TOKEN
およびCHANNEL_SECRET
は、LINE botのチャネルに依存する変数で、LINEで作成したチャネル基本設定に表示されていたアクセストークン(表示されていない場合は再発行しましょう)とChannel Secretがこれにあたります。
ではどのように定義すればよいでしょうか。server.js
では、これらの変数は環境変数として扱われるので、herokuに登録することで使用可能になります。
上図のようにSettingページ中部のConfig Varsから登録します。これで2つの変数が定義され、プログラム上でも使えるようになります。
webhook URLの登録
webhookとは、
A webhook in web development is a method of augmenting or altering the behavior of a web pages, or web application , with custom callbacks.
とありますが、最近では外部サービスと連携させてアプリケーションを動かすことを指すことが多いです。
それでは、LINE Messaging APIとHerokuをひも付けしましょう。LINEのチャネル基本設定から、webhook URLを登録します。ここで/callback
を呼んでいますが、これはserver.js
のコードを読めば、ここにpostしていることが分かると思います。
最後に、LINE botの諸設定を以下のようにすれば完了です。登録時のコメントは好きなように設定すればいいと思います。
補足:コードの実行
1つ気になると思うのが、LINE botがプログラムをどう実行しているかだと思います。
これは、先程のProcfile
が担っています。herokuでResourceページを見てみると、Free Dynosの欄にこのファイルの中身が記述されているのが確認できます。LINE botからHerokuにプログラムが呼び出されると、これが実行されてserver.js
が立ち上がる、という仕組みになっているようです。
動作確認
早速作成したLINE botを友だち登録し、なにか発言してみましょう。使用したソースコードは、発言した言葉をそのまま返す、オウム返しbotとなっているはずです。
以上で終了です。お疲れ様でした。