やさしいチャットボットのつくりかた -5.LINE経由でボットと話してみよう！

#どういう記事？
Azure素人の自分がMicrosoft AzureのBot FrameworkとCognitive Serviceと触れ合いながら、難易度も人への接し方も**“やさしい”**チャットボットを作ってみた際の備忘録の第5部、最終部です。どんなチャットボットを作るのかを含め、これまでの手順は[第1部](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)、[第2部](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)、[第3部](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)、[第4部](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)にございます。
PowerPointで記録していたものをQiita化してみたものになるので、そんな感じの画像が頻出します。
Qiita初心者なので、書き方が下手でも広い心で許してほしいです。そして全体的にゆるいです。

# アジェンダ
以下の5部構成になります。この記事は第5部にあたります。

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)**←イマココ**

なお、公式ドキュメントに沿って作りましたので、それらのリンクを張り付けつつ、辿った道筋通りに書いていきます。
その筋の方からすると遠回りだったり野暮ったかったりすると思いますが、ご容赦ください。

# 2. LINE経由でボットと話してみよう！
これまで、[第1部](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)で作ったチャットボットのソースコードを、[第2部](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)でAzure（クラウド）上へデプロイし、ユーザーから受け取ったコメントを[Azure Cognitive Service](![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d3b1948f-f50d-6e3a-9f15-8a4a21856cc1.png)
)の[Text Analytics](https://azure.microsoft.com/ja-jp/services/cognitive-services/text-analytics/)を使って、ネガティブorポジティブの判定をし、判定結果がネガティブだった場合、Twitterで偉人さんのありがたいお言葉をつぶやく[励ましBotさん](https://twitter.com/hagemasi1_bot)のつぶやきをランダムに選択して、ユーザーに返してあげる部分まで作り終わりました。
今回は、LINE経由でユーザーとやり取りする部分（赤枠部分）を作っていきたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/405bec49-c7c2-9381-045b-d62584da2903.png)



## 2.1 参考ドキュメント
今回の作業は公式ドキュメントの[ボットを LINE に接続する](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-service-channel-connect-line?view=azure-bot-service-4.0)を参考にしています。

##　2.2 LINEのコンソールにログインする
LINEアカウントを持っている人は、[LINE Developers Console](https://developers.line.biz/console/register/messaging-api/provider/)からDeveloper Consoleにログインします。LINEアカウントを持っていない人は、[LINEアプリのダウンロード](https://line.me/)をして、メールアドレスの登録をお願いします。

#### 開発者として登録する
初回アクセス時のみ、名前とメールアドレスを入力して、LINE Developersコンソールで開発者アカウントを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/8ba94dc0-03f8-f73f-542a-77394f525acf.png)

## 2.3 新しいプロバイダーを作成する
ボットのプロバイダーを作成します。プロバイダーとは、アプリを提供する組織のことです。ご自分の名前や企業名を入力してください。既存のプロバイダーがある場合はそちらを使ってもOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/da3d2cb6-9736-8386-6b6e-5aba87a99a2e.png)


## 2.4 メッセージング API チャンネルを作成する
次に、新しい Messaging API チャンネルを作成します。Create a new channelを選択し、続いて出てくるCreate a Channelのボックスでは**Messaging API**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/763c0ef6-294e-285d-ae2b-591e1ebf2e94.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/4f0c49c1-9523-ee54-2e97-bf3b031e3f25.png)

作成するチャンネルの詳細を入力していきます。

- Provider<br>
先ほど作成（または選択）したプロバイダー名がデフォルトで入っていると思いますので、そのままでOKです。
- Channel icon(optional)<br>
LINE上のアイコンになります。なくても大丈夫です。
- Channel name<br>
作成するチャンネルの名前です。LINE上で表示されます。自由に決めて大丈夫です。
- Channel description<br>
このチャンネル（ボット）の説明を記載します。自由に記入して大丈夫です。
- Category<br>
このチャンネルのカテゴリを選択します。カテゴリって言われても…となってしまったので、今回は「個人」を選択しました。
- Subcategory<br>
このチャンネルのサブカテゴリを選択します。サブカテゴリって言われても…（ry　なんでもいいです。
- Email address<br>
重要なアップデートなどがあった際、LINE側から連絡が来るそうです。自分のメールアドレスを入力します。
- Privacy policy URL(optional)<br> 
プライバシーポリシーが記載されたURLがあれば入力します。なくても大丈夫です。
- Terms of use URL(optional)<br>
利用規約が記載されたURLがあれば入力します。なくても大丈夫です。
- I have read and agree to the LINE Official Account Terms of Use <br>
- I have read and agree to the LINE Official Account API Terms of Use <br>
LINEの利用規約を読みましたよ、同意します、という確認です。確認し、両方チェックを入れます。

ちなみに私の入力内容はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/7576e72d-c47f-149c-f04d-3c4acecb9917.png)

すべて入力したら、一番下の**Create**ボタンをクリックします。

## 2.5 チャンネルの設定から必要な値を取得する
チャンネルが作成されたら、**Basic Settings**のタブから、下の方にある**Channel secret**をコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/2bd4bdcc-98a8-c762-92e0-fb1decc9f89f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/c182a60f-e570-6b17-8f5b-68d418f4adcd.png)

また、**Messaging API**タブから、**Available APIs**に**PUSH_MESSAGE**が含まれていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/2ccf4d4b-eab0-be31-06a6-8ad2fd6d76f0.png)

さらに下へスクロールして、**LINE Official Account features**の項目へ移動します。
**Auto-reply messages**または**Greeting messages**の右の**Edit**をクリックします。どちらも同じ画面に行きますので、どちらでもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/8c2eafa4-09d4-222a-41c4-449efadb98d1.png)

リンク先の応答設定のページで、**あいさつメッセージ**と**応答メッセージ**をオフにします。挨拶メッセージは友達追加時のメッセージで、今回のボットではソースコード内で「Hello and welcome!」と言うようになっているのでオフにします。応答メッセージは、ユーザーが初めて話しかけてきたときに返すメッセージですが、今回特に不要なのでオフにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/3f9d5cd9-c731-c24e-42cb-b96a947adee0.png)

元のMessaging APIタブへ戻り、**Channel access token**の部分で**Issue**ボタンをクリックし、アクセストークンを発行、コピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/20f8dd39-6166-97c7-c113-40625cceff53.png)

## 2.6 LINE のチャンネルを Azure ボットに接続する
[Azure Portal](https://portal.azure.com/)にログインし、[第2部](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)で作成したボットチャンネル登録のリソースを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/395315b7-97b1-4c4d-b71e-75b84449f8b4.png)

左の**チャンネル**を選択し、チャンネルに接続画面で、その他のチャンネルから**LINE**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/b361dd61-ab52-eaf3-e5ae-6917781d462d.png)

ここで、チャンネルシークレットとアクセストークンを要求されますので、それぞれコピーしておいたものを入力し、保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e0ede098-3b52-5701-6759-efecb199f8f4.png)

LINE構成情報内で使用する設定情報の欄の、webhookのURLをコピーしておきます。LINE Developers Console側で使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/053b3dfb-bc9f-3b90-bc47-81d750b29bf5.png)

## 2.7 LINE の Webhook 設定を構成する
LINE Developers Consoleに戻り、**Messaging API**タブより、**Webhook settings**部分に、Azure PortalでコピーしたWebhook URLを入力します。入力時は**https://**から入力してください。入力したら、Updateボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/737b58a2-ef5f-7f87-e258-5c6cf233b998.png)

Webhook URLが登録されたら、**Verify**ボタンで接続確認します。接続が成功していたら、**Use webhook**をONにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d7caebe6-00f1-fa15-cdc3-51150c34c418.png)

## 2.8 ボットをテストする
いよいよLINE上からボットと会話してみます。**Messaging API**タブの**QR code**を読み取り、LINEアプリ上でボットを友達追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/d850a6f4-6f9f-da8d-bbe1-53daf0d0be52.png)

つらそうなメッセージと、ハッピーなメッセージを送ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e0ce92c0-7476-2681-2d43-e8d5b774772d.png)

見事ありがたいお言葉と塩対応がそれぞれ返ってくれば、成功です！


# 今までの工程について
今までの工程はこのようになっています。
こんなくだらないボット作成にここまでお付き合いいただき、ありがとうございました！

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)**←イマココ**