ゆっくりのんびり。

いの (@inox_ee) です

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アカウントとしてではなく、それと紐づけされた「プロバイダー」として作成者が定められるようです。
プロバイダーの設定が終わったら、いよいよチャネルの登録です。

f:id:puyobyee18:20181028171438j:plain

基本的に指示に沿って名前や説明欄を埋めるだけですが、上図のプランに注意。フリープランだと友達人数の上限がありませんが、[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 に接続できたら大丈夫です。

f:id:puyobyee18:20181028171443j:plain

それではこのherokuにデプロイしていきます。herokuのデプロイは2通りあり、

  • Heroku CLIを用いる方法
  • Githubと連携させる方法

があります。ここでは先程pushしたGithubを使うことにします。

Deployページを開き、連携するGithub repository を選択します。ページ中部にconnected to [レポジトリ名] by [アカウント名]と表示されたら無事完了です。

最後に、前章でコメントしていたserver.jsの変数についてです。どこにも定義されずに登場したCHANNEL_ACCESS_TOKENおよびCHANNEL_SECRETは、LINE botのチャネルに依存する変数で、LINEで作成したチャネル基本設定に表示されていたアクセストークン(表示されていない場合は再発行しましょう)とChannel Secretがこれにあたります。
ではどのように定義すればよいでしょうか。server.jsでは、これらの変数は環境変数として扱われるので、herokuに登録することで使用可能になります。

f:id:puyobyee18:20181028171433j:plain

上図のように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.

引用元：https://en.m.wikipedia.org/wiki/Webhook

とありますが、最近では外部サービスと連携させてアプリケーションを動かすことを指すことが多いです。

それでは、LINE Messaging APIとHerokuをひも付けしましょう。LINEのチャネル基本設定から、webhook URLを登録します。ここで/callbackを呼んでいますが、これはserver.jsのコードを読めば、ここにpostしていることが分かると思います。

f:id:puyobyee18:20181028171417j:plain

最後に、LINE botの諸設定を以下のようにすれば完了です。登録時のコメントは好きなように設定すればいいと思います。

f:id:puyobyee18:20181028171424j:plain

補足:コードの実行

１つ気になると思うのが、LINE botがプログラムをどう実行しているかだと思います。
これは、先程のProcfileが担っています。herokuでResourceページを見てみると、Free Dynosの欄にこのファイルの中身が記述されているのが確認できます。LINE botからHerokuにプログラムが呼び出されると、これが実行されてserver.jsが立ち上がる、という仕組みになっているようです。

動作確認

早速作成したLINE botを友だち登録し、なにか発言してみましょう。使用したソースコードは、発言した言葉をそのまま返す、オウム返しbotとなっているはずです。

以上で終了です。お疲れ様でした。

参考にしたサイト