この記事は下記の #GWアドベントカレンダーの 3日目の記事になります。

楽しそうなのでやってみる　( @inoue2002 ） | GWアドベントカレンダー

＃動作確認情報
2020/7/6　記事の点検を行いました。Mac/Winどちらにも対応

はじめに

こちらの内容は超初心者向けです。
公式ドキュメントを読める方はこちらをお読みいただく方が正確です。

昨日の記事をご覧になってない方はぜひ。
こちらの記事はGWアドベントカレンダーを通してLINEBotをサーバレスで作れるようになろう！ということを目標に書いている記事です。

LINEBotはどんなもんか大体知ってるけど、作り方はわからんという方に読んでいただきたいです。

それではおうむ返しbotを作って行きましょう！
注）途中にモザイク処理をしていない環境変数が出てきていますが、更新しておりますのでご安心ください。

アカウントの作成

LINEDevelopersのサイトに行き、ログインします。
流れとしては、
ログイン→プロバイダーを作成→新規チャネルを作成→Messaging APIのチャンル作成する→Botの設定と進みます。

右上のログインをクリック

ログインを初めてすると以下のような画面が出るので名前とメールアドレスを記入します

次にプロバイダーを作成します

プロバイダー名はBotの名前ではないのでざっくりとした名前をつけます。

チャネル設定の画面が現れるのでMessagingAPIをクリック

Botの詳細を設定するフォームが現れるので以下四角いところを記入します。

・チャネル名→Botの名前
・適宜選ぶ
・適宜選ぶ
・メールアドレス記入
・同意に2箇所チェック

アクセスキー二種類を取得します

１つ目、チャネルシークレットをメモします。

2つ目、チャネルアクセストークンをメモします。(最初は表示されていないので発行ボタンを押します)

これで、Botとの連携に必要なキーを取得する事ができました。次からコードを書いていきましょう。

コードを書く

分かりやすいようにデスクトップにディレクトリを作成していきましょう。
ターミナルを開き、以下のコマンドを順番に実行します

cd deskTop
mkdir test-linebot
cd test-linebot
npm init -y 
npm i @line/bot-sdk express
touch index.js ※Windowsではtouchコマンドが使えないのでtest-linebotディレクトリに手動でindex.jsを作成してください。(VSCodeで行えます)

そして test-linebot のディレクトリをプログラムがかけるエディタで開きます（VSCode等）
そして、index.jsを開き、以下のコードを全コピーして貼り付けます。のびすけさんの記事を参考にしてます

index.js

"use strict";

const express = require("express");
const line = require("@line/bot-sdk");
const PORT = process.env.PORT || 5000;

const config = {
  channelSecret: "先ほどLINEBotのチャネルトークンを入れる(短い方)", 
  channelAccessToken: "先ほど発行したBOTのチャネルアクセストークンを入れる(長い方)"
};

const app = express();

app.post("/webhook", line.middleware(config), (req, res) => {
  console.log(req.body.events);

  Promise.all(req.body.events.map(handleEvent)).then((result) =>
    res.json(result)
  );
});

const client = new line.Client(config);

async function handleEvent(event) {
  if (event.type !== "message" || event.message.type !== "text") {
    return Promise.resolve(null);
  };

  let mes = { type: "text", text: event.message.text };
  return client.replyMessage(event.replyToken, mes);
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

環境変数を記入する

index.js内の"チャネルシークレットを入れる"、"アクセストークンを入れる"と書かれているところに先ほどメモしておいたキーを入力してください。記入例は
channelSecret: "先ほどLINEBotのチャネルトークンを入れる(短い方)", channelAccessToken: "先ほど発行したBOTのチャネルアクセストークンを入れる(長い方)"↓
channelSecret: "5b7f3b9f97e37ccde..b448bd1b99c3", channelAccessToken: "+hp3cv+Nyr38VKVOg89.../1O/w1cDnyilFU="

コードを実際に動かしてみる

※先ほど入力したindex.jsの保存を忘れないでくださいね！
ディレクトリを作る時に開いていたターミナルを開いてください。

もし閉じてしまった人は、サイドターミナルを開き、以下のコマンドを入力してください。

cd deskTop/test-linebot

そして、以下のコマンドを入力し、コードを実行します。
node index.js以下のように表示されると成功です。
Server running at 5000

外部にポートを公開する

ここからngrokを使って、外部からアクセスできるようにしていきます。
先ほどまで使っていたポートとは別で新しいターミナルを開いてください
以下の写真のようにシェル＞新規ウィンドウをクリックすると新しいターミナルが表示されます。

新しいターミナルが表示されると、以下のコマンドを入力し、enterを押します、
ngrok http 5000すると、黒い画面が出てくると思います。エラーが出る場合はngrokのインストールに失敗している可能性があります。
以下の写真のような黒い画面が出た人は一番↓のURL、https:/350f70.....ioをコピーします。

WebhookURLを設定する

先ほどngrokを起動して表示されたURLをLINEBotのコンソールに入力します。
先ほど、アクセストークンをメモした画面に移動し、WebhookURLという記入欄に ngrokでコピーしたURL＋/webhook　を入力します。
記入例は以下の写真です。

入力できたら、更新ボタンを押し、下に現れるWebhookの利用というスイッチをオンにします。

応答設定をする

WebhookURLを記入できたら、その下にある応答設定を変更していきます。
以下の写真のような場所を見つけたら、あいさつメッセージと書かれた欄の右端にある編集をクリックします。

編集をクリックすると以下のような画面が出てきます。

上の写真と同じようにクリックしてください。ここでWebhookがオフになっている場合が時々あります。その場合はその下のMessagingAPIの設定をクリックし、webhookURLを再度入力し、保存を押します。

ここまで完成するとあとは動くか確認するだけ！

Botと友達になる

開発途中に見たであろうQRコードをスマホで読み込み、友達登録を行ってください。

そして、そのアカウントにメッセージを送ります。
以下に結果、その下に対処法書きます。

わーいできたできた https://t.co/GCITF4AMVD pic.twitter.com/nl4xVpNmBI
— ようかん (Yosuke Inoue) (@inoue2002) May 2, 2020

おうむ返ししない人の対処法

アクセスキーが間違っていないかもう一度確認してください。
コードを改変した時は、コードを起動した方のターミナルで　controlキー + Cを押し、一度コードを停止させ、もう一度node index.jsで起動する必要がありますのでお忘れなく。
それでも動かない場合は、コードを停止,ngrokも停止(ngrokのターミナルでcontrolキー+C)→コードを起動→ngrokを起動→URLをWebhookに設定の順番でもう一度トライしてみてください。

おわりに

初めて僕もBotが動いた時は感動しました。半年前、LINEBotが動く事を「命が吹き込まれた」って表現してよろこんでいたぐらいです。その感動を少しでも多くの皆さんにも体験してもらいたい。その一心で初心者ながらもこのような記事を書いています。
トライあるのみです。色々弄っているといつか動くはずです。頑張ってください。
もしどうしても動かなかったらTwitterやqiitaにコメントいただけるとお答えできる範囲で相談に乗らせていただきます。ではまた明日

本記事：LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜
次の記事LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編

LINEBotをみんなで作ろう〜環境構築編〜
LINEBotをみんなで作ろう〜LINEBot is 何？編
 LINEBotをみんなで作ろう〜Messageを分岐させるぞ編
 LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編
 LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編
 LINEBotをみんなで作ろう〜コードを実装編

LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜【3日目】