DialogflowのLINE連携設定

Dialogflowの知見があるのでせっかくなのでLineとかと連携していろいろやってみたいなぁと思いました。（時代に乗り遅れてる感はありますが。。。）
DialogflowはWebhookを使ってAPI連携できるし、AWSのLambda、APIGatewayを使えばいろいろなことができそうですよね。
今回はDialogflowとLineを連携する部分の設定をします。

本記事の実施前提条件
1.Dialogflowアカウントを持っている
2.LINEアカウントを持っている

<h1>LINE公式アカウントの開設</h1>
まずはLINEアカウントを開設します。

1.下記URLを開きます。
https://www.linebiz.com/jp/

2.右上の[アカウントの開設]ボタンをクリックし、必要情報を入力し、アカウントを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/93ed0fea-3b35-cfe7-0303-9bde23ad9c85.png)

3.[管理画面ログイン]メニューをクリック後、[LINE公式アカウントの新規開設はこちら]リンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/84dda5a4-d3e7-0004-a27b-9b02ced29271.png)

4.動作確認レベルなので[未承認アカウントの作成]をクリックし、必要情報を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/717e0796-6a57-8c17-e720-b4986f92198b.png)

5.登録が完了すると晴れてアカウントができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/5a5b0f13-4cbe-3831-ad59-24af35b33f12.png)

<h1>LINE公式アカウントにdialogflowのWebhookURLを設定</h1>
LINE公式アカウントにdialogflowのWebhookURLを設定していきます。
本記事では下記の順序で設定を行います。
1.DialogflowのWebhookURLを取得
2.DialogflowのWebhookURLをLINE公式アカウントに設定

<h2>DialogflowのWebhookURLを取得</h2>
Dialogflowの画面を開いてください

1.Dialogflowの画面から新しいagentを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/22ff4f34-006f-9cda-ebde-631879c2dfc0.png)


2.左メニューから[Integrations]を選択→[LINE]をonにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/11687c2f-fee2-d49f-9c95-aee1cac7a1d9.png)

3.ポップアップ画面が開かれ、WebhookURLが表示されるので値をコピーしてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/e877e42a-c4bc-528d-330d-8f18355ed7b1.png)


<h2>DialogflowのWebhookURLをLINE公式アカウントに設定</h2>
LINE official Account Managerの画面を開いてください。

1.[チャット]メニューをクリック→出てきたポップアップで[応答モード設定に移動]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/875aecc5-cb7c-fd1a-a6c0-000017fec0eb.png)

2.[Messaging API]メニューを選択→[Messaging APIを利用する]ボタンをクリックし、必要情報を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/a6c9be64-782d-be0d-2c74-a10664d97c03.png)

3.WebhookURLにdialogflowのURLを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/6e457dba-3547-b87b-7828-8e3ccdb93047.png)

<h1>LINE公式アカウントのWebhook有効化</h1>
Webhookを有効にしないとDialogflowと通信できないためWebhookを有効化します。
1.LINE DeveloppersからのMessaging APIの設定からWebhookを有効化してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/b54e5460-bd20-575f-c0a8-bcd5c47c2021.png)

<h1>応答メッセージのオフ</h1>
応答メッセージをオフにしないと、応答がDialogflowとLINE双方から返却されることになります。
1.左メニュー[応答設定]→詳細設定[応答メッセージ]を[オフ]にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/19d77669-eb3b-9e7e-08ff-36b5f94d2955.png)


以上でLINE側の設定は完了です。
次はDialogFlow側の設定を行います。


<h1>dialogflowにLINE公式アカウントの情報を設定</h1>

Dialogflowに[Channel ID],[Channel Secret],[Channel Access Token]の3つを設定するためにLINE Developpersへアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/3723da6e-097e-4a87-4615-1a01f2de0731.png)

1.[チャネル基本設定]を選択し、[Channel ID]、[Channel Secret]の二点を取得します。
2.[Messaging API設定]を選択し、[Channel Access Token]を取得します。
3.Dialogflowの画面へ戻りそれぞれ値を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/e877e42a-c4bc-528d-330d-8f18355ed7b1.png)



以上で設定は完了です！
お疲れ様でした。

<h1>動作確認</h1>
今回は簡単に「こんにちは」とLINEに打ったら「よぉ！」と返すような仕組みを作ってみようと思います。

1.自分のLINEアカウントを使ってLINE Developpersなどに登録した場合LINEの友達に勝手にbotが登録されていると思います。（されていない場合はLine Developpersの[Messaging API設定]からQRコードを読み込んでください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/60cb536b-2066-4934-8cfa-2c21171d5007.png)

2.DialogflowでIntentsを作成します。
Intents名：hello
TrainingPhrase:こんにちは
Response:よぉ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/504ae613-fe0f-8888-bca4-90146d2af864.png)

3.DialogflowでいらないIntentsを削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/bf2f384e-50aa-5a18-a088-31783a2b5b27.png)

先ほど作成したhelloインテンツ以外消しちゃいましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294965/28b3ad5c-ba8d-dae3-8c2d-2b302e0632bf.png)

無事連携できました！

自分が作ったものが動くというのは面白いですよねー。
次はこのボットを使ってもうちょっと面白そうなことをやってみたいです。

Messaging APIを使ってプッシュ通知などをやりたかったのですが、フリープランでは出来なさそうなので断念