LINE Messaging APIとAPI Gatewayでオウム返しLINE BOTを作ろう

## やること

LINE Messaging APIとAmazon API Gatewayで、オウム返しするBotを作ります。

## 参考

以下サイトを参考にしました。（というかそのまま）

- [LINE Bot を5分で作ってみる (API Gateway 編)](https://blog.yuu26.com/entry/20171221/1513863467)
- [1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)

## 前提

LINE developersとAWSへのアカウント登録が必要です。

- [LINE developers](https://developers.line.biz/ja/)
- [AWSコンソール](https://console.aws.amazon.com/console/home)

## 構成図

このような構成を作ります。

<img width="450" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/f72c248c-56cd-3b2e-d76f-e9eb0a738caf.png">

LINE Messaging APIでBot用のチャネルを作り、API Gatewayで作成したAPIを呼び出します。APIは受信したメッセージをそのまま返信します。これでオウム返しBotを作ります。では、作っていきます。

### 1.LINE Developersでプロバイダーとチャネルを作ろう
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9fbf1547-4189-09ae-2529-f6ffb20cf5e0.png">


##### 1-1.[LINE developersのサイト](https://developers.line.biz/ja/)にログインし`プロバイダーリスト`を開き、`新規プロバイダー作成`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9cc85a92-6550-12ef-ca8c-1d2f6ee402f1.png">


##### 1-2.プロバイダー名を入力し、`確認する`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/842867b9-9af4-976d-7310-3af0380d7c12.png">


`作成する`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/192f614c-954f-f350-1a38-a8f97b44d577.png">

##### 1-3.プロバイダーが作成したら、`チャネル作成する`ボタンをクリックして、チャネルを作成します。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/0c6cbf62-ea15-7831-7b4d-456e64cc226a.png">

必要事項を記載したら、最下部にある`入力内容を確認する`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/528a26f0-dc24-d0e7-a810-696d979c9123.png">


`情報利用に関する同意について`を確認し、`同意する`ボタンをクリックします。更に、利用規約に同意するかのチェックを行い、`作成`ボタンをクリックします。このように、Messaging APIのチャネルが作成されれば成功です。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/b811e7e2-e4b3-707f-6636-4cbccc94cc20.png">


##### 1-4.作成したチャネルの設定を変更します。作成したチャネルをクリックし、`チャネルの基本設定`タブを開きます。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/950c9830-4ac8-bd49-282c-e6de85b9d052.png">


`Webhook送信`を`利用する`にします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/45d5365f-966e-35c9-ac79-d193bf1c2d5f.png">


自動応答メッセージの設定を開きます
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/7fef9888-b140-0f6e-1699-1a3fed050947.png">


Webhookを`オン`にします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/2c2b9444-da5f-2f5f-accc-571ed78dd1b6.png">





### 2.AWSのAPI GatewayでREST APIを作ろう

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/305f254b-ad0f-8661-6df8-64a4f71f7440.png">


##### 2-1.API Gatewayでオウム返しするAPIを作ります。API Gatewayの`APIの作成`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/ecede6b9-4b39-0dc5-e3e5-d4e5dd9ff2b7.png">


##### 2-2.API名、説明などを入力し、`APIの作成`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/1fbc4397-9878-0eaa-065a-802d377f150c.png">

こんな画面になります。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/2d2c995f-d477-b9f4-7fd0-a0ca9f6649e3.png">

##### 2-3.`アクション`の`メソッドの作成`をクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/ae678411-f4d2-49f4-f3cc-0585c737115c.png">


##### 2-4.`POST`を選択し、チェックマークをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6ed7a9c5-c94d-7313-d2f4-f970624ee9ff.png">


##### 2-5.エンドポイントに `https://api.line.me/v2/bot/message/reply`を設定し、`保存`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9c019698-1a33-1d3c-064c-26c534bc5769.png">


##### 2-6.作成したPOSTを選択し`統合リクエスト`をクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/621de388-f6a6-104f-c7d1-0c9d4d5e8334.png">


##### 2-7.`アクセストークン`の`再発行`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/fdba325c-b4dd-ded6-2e4b-d6785c75a209.png">

発行されると、このようになります。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/2a21afdb-591f-bb2e-7442-7ca8d1869ccf.png">


##### 2-8.`HTTPヘッダー`の`ヘッダーの追加`をクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/868609b5-eb6a-5dad-9970-e836c6187052.png">


##### 2-9.名前に`Authorization`を、マッピング元に `'Bearer△<アクセストークン>'`（△は半角空白）と入力し、チェックマークをクリックします。※ '（シングルクォーテーション）で囲むことを忘れないよう注意
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/b5598ee0-2e77-cc39-4e2b-6855c45ab406.png">

##### 2-10.マッピングテンプレートを追加します。マッピングテンプレートで `application/json` を新規に作成します。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/45b5f6bf-c5d1-29d8-f18f-23423140e84c.png">

テンプレートに以下を登録し`保存`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/cab70399-0dc7-31b8-8eb7-5312e818f3f4.png">


```JSON
#set($data = $input.path('$.events[0]'))
{
    "replyToken": "$data.replyToken",
    "messages": [
        {
            "type": "text",
            "text": "$data.message.text"
        }
    ]
}
```

##### 2-11.ヘッダーの追加が完了したら、上部にある`メソッドの実行`のリンクをクリックし、POSTメソッドの画面に戻ります。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/8d79db43-442b-95e4-04ae-57b09029fd37.png">

##### 2-12.API GatewayをデプロイしてURLを取得します。`アクション`の`APIのデプロイ`をクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/32aef303-3d1f-a3bb-2fa8-24cc1853a99e.png">


##### 2-12.ステージ名などを登録し、`デプロイ`ボタンをクリックします。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/b88b372b-0339-4bfc-24c8-de5f49cedd5d.png">

##### 2-13.これでURLが作成されました。後で使うので`URLの呼び出し`のURLをコピーします
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/cbbd5e08-05d0-0558-a337-956b1e2146e3.png">


### 3.LINE Developersでチャネルの設定を更新しよう

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9fbf1547-4189-09ae-2529-f6ffb20cf5e0.png">

##### 3-1.作成したチャネルの`チャネルの基本設定`の`Webhook送信`にAPI GatewayのURLを登録します(手順 2-13 でコピーしたURL)。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/6611d3fc-afaf-0319-3da5-b91b8d3e670e.png">

URL登録後の画面はこんな感じです。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/206bda96-1294-3f77-0cc2-e84088d452c4.png">


## 4.Botを友達登録します。

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/e9a6c145-bcf2-3c4a-aa7a-250b69be82ab.png">

##### 4-1.作成したチャネルの`チャネルの基本設定`の`Bot情報`のQRコードから友達登録します。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/86211673-b926-e11b-209d-e85725df55bb.png">

登録するとこのようになります。
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/ca7b190b-8a93-cc73-726b-60781dd451e7.png">


## 5.動作を確認します

##### 5-1.以下のように、チャネルの設定により、挙動が異なりますが、送ったメッセージをオウム返しすれば成功です。
（以下は、LINEチャネルの設定による挙動の違いを示しています）
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/8fd7f7a7-2a26-cc1d-fa5d-60da2d1e340c.png">


## ※注意事項※ AWS利用料に注意

API Gatewayは、受信したAPI呼び出しと、送出したデータ量に対して料金が発生します。今回紹介した作り方は、インターネットを経由して、どこからでもAPIを呼び出せるので、嫌がらせ（大量アクセス）によって利用料が高くなる可能性があります。使わないときは削除するなど、何か対策することをオススメします。

API Gatewayの利用料について、詳細はこちらを確認ください。
[Amazon API Gateway の料金](https://aws.amazon.com/jp/api-gateway/pricing/)


## おわりに

とりあえずオウム返しのLINE Botを作ることができました。紹介した作り方では、API Gatewayの安全対策が不十分なので、今後は、安全対策も含めたAPIの作り方を調査しようと思います。

---

追記 2019/11/28

APIキーでアクセス制御した方法を以下で紹介しました。

8万語の辞書を持ったインテリBotを常時利用できるようにした話
https://qiita.com/zgw426/items/67c4ef35ed62e799461b