はじめに

Qiita初投稿になります
Node.jsによるLINEbot製作を行ってみたく、自学のために行った流れをまとめていきます
Node.js、npmのインストール、Herokuのアカウント登録などは省きます
成果物としては、「ありがとう」と送信すると、「どういたしまして」、それ以外は「こんにちは」と返ってくるLINEbotを制作します

動作環境

・MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports)
・mac OS Catalina バージョン 10.15.7
・node v15.3.0
・npm 7.0.14
・git 2.23.0

LINE側の準備

この見出しでは、LINE側で行うことをまとめていきます。

LINE Developerアカウントの作成

まずはこちらのURLからLINE Developerのアカウントを作成します
普段使用されているLINEアカウントがあればすぐに作成できます
https://developers.line.biz/ja/

プロバイダーの作成

次にプロバイダーの作成を行います。トップページにある以下の作成ボタンを押します。

ここでは新しく作るプロバイダーをtestとしておきます。

チャネルの作成

新しくプロバイダを作成すると以下の画面に移行します。ここでは「Messaging API」を選択します。

その後、チャネルの種類を「Messaging API」に指定し、プロバイダーを先ほど作成した「test」に指定します。その後
・チャネルアイコン　※一度変更すると、１日経過しなければ変更することができません
・チャネル名　※一度変更すると、７日経過しなければ変更することができません
・チャネル説明
・大業種
・小業種
・メールアドレス
・プライバシーポリシーURL（任意）
・サービス利用規約URL（任意）
を入力し、利用規約にチェックを入れ、作成ボタンを押します

チャネルシークレットとチャネルアクセストークンの取得

次に外部からLINE APIにアクセスするためのチャネルシークレットとチャネルアクセストークン(長期)を取得します。
こちらの情報は外部に漏れないように気を付けましょう。それぞれの場所は
・チャネルシークレット
　チャネル基本設定の下部にあります
・チャネルアクセストークン(長期)
　Messaging API設定の下部にあり、発行ボタンを押すと表示されます
上記二つが取得できたら、とりあえずはメモ帳等に記録しておきましょう。

その他設定

Messaging API設定タブの応答メッセージ、編集、にて応答設定の中の詳細設定の、応答メッセージを以下の画像のようにオフ、Webhookをオンにしましょう。あいさつメッセージはオフにしていますが、オンでも構いません。
※Webhook URLに関しては後ほど入力します

こちらで一旦LINE側の準備は終わりになります。

Node.js側の準備

npm init

任意のフォルダ（ここではlinebot_test）を作成し、そのフォルダ内で、npmのイニシャライズを実行します

コンソール

mkdir linebot_test
cd linebot_test
npm init

npm init実行後、いろいろ聞かれますが、全て空のままEnterで構いません

モジュールのインストール

LINEbotを動かすために必要なnpmモジュールをそれぞれインストールします

コンソール

npm install express @line/bot-sdk dotenv --save

ローカルでテストするためのトンネリングツールをインストール

ngrokというトンネリングツールを使用することで、簡単にテストが行えます。

コンソール

npm install -g ngrok

Node側の準備はこのぐらいです、次からコードを書いていきます。

コードの作成

先ほど作成したフォルダ内で以下を実行し、index.jsを作成します

コンソール

touch index.js

その後、以下のコードをコピペします

index.js


// モジュールのインポート
const server = require('express')();
const line = require('@line/bot-sdk'); // Messaging APIのSDKをインポート
require('dotenv').config();
// -----------------------------------------------------------------------------
// パラメータ設定
const lineConfig = {
  channelAccessToken: process.env.LINE_ACCESS_TOKEN, // 環境変数からアクセストークンをセットしています
  channelSecret: process.env.LINE_CHANNEL_SECRET, // 環境変数からChannel Secretをセットしています
};
// -----------------------------------------------------------------------------
// Webサーバー設定
server.listen(process.env.PORT || 3000);
// -----------------------------------------------------------------------------
// ルーター設定
const bot = new line.Client(lineConfig);        // APIコールのためのクライアントインスタンスを作成
server.post('/webhook', line.middleware(lineConfig), async (req, res) => {
  res.sendStatus(200);                          // 先行してLINE側にステータスコード200でレスポンスする。
  const [lineEvent] = req.body.events;          // events配列から配列の0番目の要素だけを変数に代入
  const inputMessage = lineEvent.message.text;  //入力された文字を代入
  if (!lineEvent) {
    return;
  }
  if (lineEvent.type !== 'message' || lineEvent.message.type !== 'text') {
    return;
  }

  if (inputMessage === 'ありがとう') {           //「ありがとう」と入力された場合
    bot.replyMessage(lineEvent.replyToken, {
      type: 'text',
      text: 'どういたしまして',
    });
  }　else {                                    //それ以外の文字が入力された場合
    bot.replyMessage(lineEvent.replyToken, {
      type: 'text',
      text: 'こんにちは',
    });
  }

});

そして環境変数のため、.envファイルを作成します。

コンソール

touch .env

.envファイル内は、LINE側の準備で取得したチャネルシークレットとチャネルアクセストークンを用意し、以下のコードに貼り付けてください

.env

LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
LINE_CHANNEL_SECRET='メモしたチャネルシークレット'

フォルダ構成は以下のようになります

応答テスト

いよいよテストになります。

LINEbotの友達登録

LINE DevelopeのMessaging API設定のボット情報にある「ボットのベーシックID」をコピーして、自分のLINEの友達検索、にてIDで検索すると作成したbotが出てくるので、そちらを友達にします

このボット情報の下にQRコードが表示されているので、そちらから友達になっても構いません

ngrokの起動

コンソールを二つ立ち上げ、片方では

コンソール

ngrok http 3000

とすると、以下のようになるので

https://~~~~.ngrok.io の部分をコピーし

LINE DevelopeのMessaging API設定のWebhook設定、webhook URLに貼り付け、後ろに「/webhook」を記入します

index.jsの起動

もう一方のコンソールにて、

コンソール

node index.js

としてサーバーを起動します

応答テスト

いよいよテストです。
botに対して「ありがとう」と入力しましょう

すると、「どういたしまして」と返ってきます

それ以外の言葉を入力すると、「こんにちは」と返ってくるはずです。

本番環境(heroku)にデプロイ

git init

herokuにデプロイする際はgitを使用するので、まずgit initを行います

コンソール

git init

git ignore

その後、チャネルアクセストークンなどが外部に漏れてしまわないように.gitignoreファイルを作成し、
以下のように記述しておきましょう

.gitignore

npm-debug.log
node_modules
.env

こうしておくことで、pushしても.envファイルが外部に漏れることはなくなります
また、node_modules npm-debug.logに関してもプッシュする必要がないのでignoreしておきましょう

heroku create

その後、herokuにログインし、heroku createを実施して新たにサーバーを作成しましょう
その後、herokuに環境変数を読ませるため、heroku config:setにて環境変数を定義しましょう

コンソール

heroku login
heroku create
heroku config:set LINE_ACCESS_TOKEN='メモしたチャネルアクセストークン'
heroku config:set LINE_CHANNEL_SECRET='メモしたチャネルシークレット'

Procfileの作成

次に、herokuがまず何を実行すればいいかを記したファイル「Procfile」を作成します

コンソール

touch Procfile

Procfile内は以下のように記します

Procfile

web: node index.js

デプロイ

いよいよデプロイです、以下のようにgit addを行い、git commitを行って、herokuにプッシュしましょう

コンソール

git add -A
git commit -m "コミット名"
git push heroku master

デプロイ後、LINE Developersのwebhook URLを変更

コンソールからherokuにデプロイを行うと、以下のようなログが流れます

https://~~~~~.herokuapp.com/　の部分をコピーして、webhook URLに張り付けます

この後、再度LINEbotにメッセージを送ってみましょう、localでテストしたときと同じ返答が帰ってくれば成功です

初めてのLINEbot作成【Node.js + heroku】

はじめに

動作環境

目次

LINE側の準備

LINE Developerアカウントの作成

プロバイダーの作成

チャネルの作成

チャネルシークレットとチャネルアクセストークンの取得

その他設定

Node.js側の準備

npm init

モジュールのインストール

ローカルでテストするためのトンネリングツールをインストール

コードの作成

応答テスト

LINEbotの友達登録

ngrokの起動

index.jsの起動

応答テスト

本番環境(heroku)にデプロイ

git init

git ignore

heroku create

Procfileの作成

デプロイ

デプロイ後、LINE Developersのwebhook URLを変更

参考文献