Node.jsを使ってお手軽インドカレー検索LINE Bot を作ってみた(1.簡単な応答)

#はじめに
皆さん、LINE Bot について様々な箇所で使われているので既にご存じの方も多いと思います。
ただ自分が作るとなると少し敷居が高いように感じますが、そんなことはありません！！
無料かつアイデア次第で面白いものを作成できると思います。
僕は近くのインドカレー屋を探しすぎたのがきっかけで LINE Bot に触れてみました。(なぜかGoogleが面倒)

最終的には**位置情報、フリーワードでインドカレー屋を検索、お気に入り機能の実装**までを目標に紹介していきます！
まずは**お手軽にNode.js(Express)を使って LINE Bot を作れる**ことを紹介していきます！

**最終目標サンプル**
![IMG_1803.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/84203b3a-2f83-55a9-471c-b489bd975cf9.png)

#LINE Bot 作成手順
### ①LINE 設定
#### (1)チャネルを作成
[Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/ "")に従ってチャネルを作成していきましょう！
チャネルの名前とかは好きなものを設定してOKです。
#### (2)トークンを発行
本来であればトークンの有効期限は短いほうがよいですが、実装も簡単になるため今回は長期トークンを選択します。詳しくは[チャネルアクセストークンについて](https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/ "")リファレンスを見てみてください。
作成出来たらMessaging APIの**チャネルシークレット**と**チャネルアクセストークン**をメモしておきましょう！

・**チャネルシークレット**
![screenshot6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/ad4f5bd8-5b36-04e4-41ca-83e269acb341.png)


・**チャネルアクセストークン**
![scrennshot7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/ef2ee540-d85f-7e3d-2184-ff349b67a8fc.png)

### ②ホスティングサービスの設定
#### (1)ホスティングサービスの選定
ホスティングサービスには色々な選択肢があると思いますが、今回はお手軽さを重視するために**Heroku**を使用します！
Herokuはソースコードをプッシュしたら自動でビルド・デプロイしてくれるし、GitHubと連携もできるので、ものすごくお手軽です！
#### (2)アカウントの作成
Herokuを利用するにはアカウントが必要です。
[Herokuの公式サイト](https://jp.heroku.com/ "")でサクッと作っちゃいましょう！(無料です)
#### (3)GitとHeroku CLIのインストール
Herokuでアプリをデプロイするために**Git**と**Heroku CLI**が必要なのでインストールします。

・[Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git "")
・[Heroku CLI](https://devcenter.heroku.com/ja/articles/getting-started-with-nodejs#-2 "")
#### (4)Herokuスタータープログラムのclone
Gitを使ってHerokuスタータープログラムをクローンしてアプリを作成します。

```command:コマンドライン
$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started
```
#### (5)Heroku上に自分のアプリを作成してプログラムをデプロイ
Herokuでアプリを作ったら自分のアプリ名が出てきます。大事なのでメモっておきましょう。下記で言うと`sharp-rain-871`(アプリ名は[Heroku スターターガイド](https://jp.heroku.com/ "")から引用しています)

```command:コマンドライン
$ heroku create
Creating sharp-rain-871... done, stack is heroku-18
//自分のアプリ名！
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added
```

後はクローンしたソースコードをHerokuにデプロイしてNode.jsアプリ作成完了です！

```command:コマンドライン
$ git push heroku main
```

デプロイが完了したので LINE Bot アプリを作成していきます。
アプリには**LINE SDK**が必要なので先にnpmで入れます。

```command:コマンドライン
$ npm install @line/bot-sdk --save
```

このままだと、まだ動かないのでindex.jsを LINE Bot のチュートリアルを参考にして、下記のように受けとったメッセージをオウム返しできるように書き換えましょう！
最初にメモった**チャネルシークレット**と**チャネルアクセストークン**をconfigで定義してあげてください。
(Herokuの環境変数に埋め込む方がベターですが簡便化のため直書きにしています)

```javascript:index.js
const line = require('@line/bot-sdk');
const express = require('express');

// 環境変数を定義
// チャネルシークレットとチャネルアクセストークンを記載
const config = {
  channelAccessToken: "XXXXXX",
  channelSecret: "XXXXX",
};

// create LINE SDK client
const client = new line.Client(config);

// Expressアプリ
const app = express();

// Webhookの設定
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();
    });
});

// ★イベントハンドラー
// メッセージの返答はここで定義
function handleEvent(event) {
  // テキストメッセージ以外は無視
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  // 受け取ったメッセージをそのまま返す変数
  const echo = { type: "text", text: event.message.text };

  // 定義したメッセージをLINE SDKのメソッドを使って返信
  return client.replyMessage(event.replyToken, echo);
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});
```
今回は詳細を省きますが少しだけコードの解説をします。
**★イベントハンドラー**の部分でメッセージのレスポンスを定義しています。今回は受けとったメッセージをそのまま返答するのでtextには引数で受け取った`event.message.text`をセットしています。eventオブジェクトについて[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#rate-limits "")に詳細が記載あるので一度見てみてください。
index.jsを書き換えたら、Herokuにデプロイしておきましょう。これでサーバー側の準備は完了です！


### ③チャネルの設定
##### (1)Webhook URLを設定
ここまできたらあと一歩です...！
LINE Developersコンソールで、Messaging APIチャネルの［Messaging API設定］タブからWebhookのURLに`https://自分のアプリ名.herokuapp.com/callback`を設定して応答メッセージを無効にしたら完了です！
![webhook-url-heroku-com.59a8da1d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/673bc505-428f-62b2-a756-e5e0911e2f07.png)
![スクリーンショット 2021-03-10 23.11.51-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/25f10b30-329f-6983-a70f-ff574e29458b.png)
これでオウム返し LINE Bot の完成です！！

##### (2)動作確認
せっかく作成したので動きを確認してみましょう！下記サンプルのようにオウム返しをしてくれるはずです！

**サンプル**
![IMG_1807.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178305/6194514f-5412-c6a5-e6c7-f2f824b184d4.png)


## 終わりに
いかがでしたでしょうか？？思ったより簡単に作成できたかと思います...！
次回では位置情報と、ホットペッパーAPIを活用して近くのお店を表示するよう LINE Bot をアップデートしていきます。
またメッセージ応答の詳しいカスタマイズも次回以降で紹介していきますね！

## 参考記事・URL
https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/
https://developers.line.biz/ja/docs/messaging-api/getting-started/
https://developers.line.biz/ja/reference/messaging-api/#create-upload-audience-group-by-file
https://qiita.com/TakuTaku04/items/cb71f10669a9e9cbf71b