New Watson Assistant と LINE をつなぐ Part 2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/ede047eb-78bd-1d0a-de65-d29e2e27755b.png)


今回は[前回](https://qiita.com/yanagih/items/691229a7623649540b76)からの続きです。

(実施のステップ)

1. Github に用意した Node-RED 環境構築用の雛形を Gitpod にデプロイ
1. **Node-RED フローを使って LINE Platform と Watson Assistant とを接続**

[前回](https://qiita.com/yanagih/items/691229a7623649540b76)は、『1. Github に用意した Node-RED 環境構築用の雛形を Gitpod にデプロイ』 を行いました。
今回は、**『2. Node-RED フローを使って、LINE Platform と Watson Assistant との接続』** を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/06ade49b-0e7a-f706-ea95-93bee32e95e5.png)

# 2. Node-RED フローを使って LINE Platform と Watson Assistant とを接続

### 実装イメージと手順について

ここからは、複数のサービスを行ったり来たりしますので、何をやっているのか、迷子になる可能性があります。

LINE、LINE プラットフォームとサービスの接続イメージ図がわかりやすく[公式サイト](https://lineapiusecase.com/ja/api/msgapi.html)に記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1ccf48c2-1343-ddc8-31fe-21c89d543bbb.png)
迷子にならないように、この番号に結びつけながらご説明していきます。
(例えば、**『Messageing API イメージ図の x 番』** もしくは、**『Messageing API イメージ図の LINE プラットフォーム』** と言うように、参照します)

### LINE Developer アカウントの作成

**『Messageing API イメージ図の LINE プラットフォーム』** にアクセスするために、LINE Developer アカウントを作成します。
LINE をエンドユーザーとして使用するだけなら必要ありませんが、LINE Messagin API を使用するために必要な認証キーの入手やサービス (ボットサーバ)への接続設定を行うために必要です。

手順はちょっと長いのですが、公式サイトの[Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/)に詳しい解説があります。
また、色々な人が Qiita で記事を書かれていますので、自分に合った方法を探してみてください。

ポイントは、
* Channel Secret
* Channel Access Token
* Webhook の有効化と Webhook 先の変更箇所

になりますので、作業しながらメモを取っておいてください。

### LINE ノードを配置

**『Messageing API イメージ図の Webhook ( ② 番と ③ 番)』** の部分を実装していきます。
実装と言っても、Node-RED 用に公開されている LINE ノードを使用させていただきますので、とっても簡単です。

**Webhook ノード**と**Reply ノード**を方眼紙 (?) の上にドラッグ & ドロップ して、その 2 つを線で結びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/27d50246-a3f7-addf-7fb3-bafa21feeaff.png)
**Webhook ノード**をダブルクリックし、Path に ```/line_webhook``` と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c00e5c74-ef7d-d69c-af92-91dac1dc265f.png)
**Reply ノード**をダブルクリックし、Channel Securet と Channel Access Token をそれぞれ入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a7b4a7fb-09bb-72e9-7ca7-5671e0869c7a.png)
忘れずに右上の**デプロイ**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f7de493c-44d6-dfea-8b04-de4f50926fe6.png)

### エンドポイントを取得する

**『Messageing API イメージ図の LINE プラットフォーム』** から webhook でアクセスするためのエンドポイントを取得します。
ブラウザーのタブで Gitpod に切り替えます。Node-RED タブの左側にある **Get Started - node_red-linebot** と表示されているタブです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c79095b1-d1fa-d2b9-54c2-b6fcab784baf.png)
ブラウザーの右下位にある **Ports: 1800** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b9ed2c82-9634-a445-61d8-dcc2592252d8.png)
こんな表示が現れたと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/df752525-1448-db6a-4713-4fb76c94b346.png)
細かいですが、このような意味となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/64b3ea0e-456a-aea8-0cf5-37638588d6b1.png)
**①エンドポイントのコピー**をクリックしして、エンドポイントを取得します。
こんな感じです。
```https://1880-watsonbx04-noderedlineb-mkr0msq2333.ws-us79.gitpod.io```
**②エンドポイントのpublic化**をクリックして、エンドポイントが外部からアクセスできるようにします。
State が open(public)に変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d89b5064-bcec-858c-42a7-898f3dfee507.png)

:::note warn
無償の Gitpod 環境はアクセスがない時間を検知すると、サスペンド状態になります。サスペンドから復帰させると、ステータスは、**open(private)** に戻りますので上記手順で **open(public)** に変更するようにしてください。
:::

### Webhookに値をセットする

**『Messageing API イメージ図の LINE プラットフォーム**にて、**Webhook settings** に、エンドポイントをセットします。エンドポイントの後ろに、```/line_webhook``` をつけることを忘れないでください。
設定作業は、[**LINE Developers**]() から行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f0f7f019-2a7e-ed8b-bdc3-c3897f3fe8ad.png)
**Verify** をクリックします。**Success** が表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/95f75453-157b-4e1f-f187-1ff74416d023.png)

### テストしてみる (いわゆる オウム返しボット)

自分の LINE アプリを使って、お友達登録します。
QR code を読み取ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/95cb2f63-f907-f884-dd78-915224ef93c2.png)
いつもの手順でお友達登録を済ませてください。(スクリーショットを撮り忘れました。やり直しができないため、手順を省略します。すみません)
チャット画面が現れたら、何でも良いので、テキストを入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6c001a0f-1b73-13b2-9cf0-1446de8c421b.png)
おうむ返しボットができました。

### New Watson Assistant だと何が違うのか

おうむ返しボットができたので、次は New Watson Assistant と繋ぎます。
その前にちょっとだけ、従来の Watson Assistant との違いをお話しいたします。

#### API バージョンの違い
Watson Assistant の API には、従来との互換性を維持している V1 と 新しい機能が使える V2 があります。
この 2 つの内、New Watson Assistant を使用する場合は、V2 を使用することになります。

#### 提供される環境の違い
New Watson Assistant では標準で検証環境と本番環境の2つを提供してくれます。
以前から Watson Assistant をお使いのユーザー様の中には、この２つの環境を分けるために、インスタンスを 2 つ作成されているケースがありましたが、ケースによっては、1 つのインスタンスで運用することも可能です。

:::note info
この2つの環境の詳細は、[こちらの記事](https://qiita.com/yanagih/items/24e42d9593e2643706bc)で紹介しています。
:::

:::note warn
インスタンスを分ける理由は環境の観点だけではなく、セキュリティや可用性の観点もございますので、インスタンスの数については、各々の要件に応じてご検討ください。
:::

New Watson Assistant と接続するアプリケーションを**独自に開発する場合**、上記 2 点について考慮する必要があります。
そして、LINE と接続する場合は、独自に開発する場合に相当します。

::: note info
標準で提供される Web Chat は上記 2 点をあまり意識せずとも使用できるように考慮されています。
:::

### Watson Assistant ノードを配置

Node-RED 上で Watson Assistant を構成します。
方法は簡単です。LINE の時と同じで、**Watson Assistant ノード**を使用します。
**『Messageing API イメージ図の サービス (ボットサーバー)』** の部分を実装していきます。

**assistant V2 ノード**を方眼紙の上にドラッグします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0b0ff356-2adf-d082-4523-0317ce2f2888.png)
**assistant V2 ノード**をダブルクリックし、パラメータをセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/409aa860-f65c-5893-3b65-ab1648154c71.png)
**①入力** と **②入力** は、**Watson Assistant インスタンスの画面から取得してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2506278f-1b72-1416-a73f-c361630fbd27.png)
**③入力** は **Environments** 環境の **Draft** もしくは **Live** から入手します。
(図は **Drift** から入手する例です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d6381c5a-ad71-0672-96ff-aadf3c2d3cfc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/7d8ceaff-6a64-048d-9711-49e3b2acf764.png)

### LINE と New Waton Assistant をつなぐ
**change ノード** を方眼紙の上にドラッグし、図のように、配線してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c167a094-9e78-814f-22f6-bcaf4c4b2749.png)

**change ノード** のプロパティは、このようにします。
プロパティ属性: **msg.**
入力値: **payload.output.generic[0].text**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4f044c59-5bd2-8f17-e89d-1f3498385d59.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/7ba912e6-9323-a106-6e59-39ed765a210b.png)

### テストしてみる

LINE アプリからテストしてみてください。ちゃんとピザの注文ができました :relaxed:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6aa2524c-32a3-795e-2121-4f84f8680980.png)

完成したフローは、[Github](https://github.com/Watson-bx-04/node_red-linebot) にアップしてありますので、ご参考まで。(『実装例』タブにあります)

# いかがでしたでしょうか

手順は長かったのですが、思ったより簡単(?)に LINE ボットが作れたのではないでしょうか。
それも、**ほぼ No Code**で。
(Node-RED 用の LINE ノードを作成してくれた **n0bisuke 様** 、 **1ft-seabass 様**、本当に感謝です)

:::note alert
Gitpod 環境は便利なのですが、無償の場合、すぐにサスペンドしてしまうのが難点ですね。。。
再アクティベートの際は、各ノードへの**認証情報再セット**と エンドポイントの **open(public)化**をお忘れなく！
:::

# 続きの記事 / 前回の記事
https://qiita.com/yanagih/items/a38e418a58317f1fd3bf

https://qiita.com/yanagih/items/691229a7623649540b76

# 参考情報

### LINE 公式サイト

https://developers.line.biz/ja/docs/messaging-api/getting-started

https://lineapiusecase.com/ja/api/msgapi.html

#### LINE Bot 関連
https://www.npmjs.com/package/node-red-contrib-line-messaging-api

https://qiita.com/youtoy/items/287a0782fdd185fc2004

https://qiita.com/katahiro/items/298eac9c0fa875333d84

https://qiita.com/fterui/items/f49e4af2e73664998419

https://first-contact.jp/blog/article/linebot/