New Watson Assistant と LINE をつなぐ Part 1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/97885fa9-090f-a0c4-a0fc-f376a5e3c7a7.png)

New Watson Assistant チャットボットのインターフェースとして Web Chat を標準で提供していることは、[以前ご紹介](https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf)いたしました。
Web Chat はカスタマイズ可能でクイックにデプロイできるので便利ですが、やはり、一番人気が高いのは **LINE** でしょうか。
と言うことで、今回は、New Watson Assistant と LINE をつないでみます。

Qiita の他の記事でも Watson Assistant と LINE を繋ぐ記事はあるのですが、New Watson Assistant を使用する場合、異なる部分がありますので、その違いも含めてご紹介したいと思います。

その前に、まずは LINE につなぐための全体像を見てみましょう。
LINE とつなぐと言うことは、『LINE からメッセージを受け取り、New Watson Assistant がそのメッセージを処理し、その処理結果を LINE に返信するための仕組み』が必要です。まずはそこから確認します。

# LINE Messaging API とそのアーキテクチャー

そのためには、まず、公式サイトで LINE Messaging API の動作原理を確認します。

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

公式サイトの [**Messaging APIの仕組み**](https://developers.line.biz/ja/docs/messaging-api/overview/#how-messaging-api-works) から抜粋させていただきます。

アーキテクチャーとその動作原理がわかりやすくシンプルにまとめられています。

(抜粋)
Messaging APIを使って、ボットサーバーとLINEプラットフォームの間でデータを交換できます。リクエストは、JSON形式でHTTPSを使って送信されます。

1. ユーザーが、LINE公式アカウントにメッセージを送信します。
2. LINEプラットフォームからボットサーバーのWebhook URLに、Webhookイベントが送信されます。
3. Webhookイベントに応じて、ボットサーバーからユーザーにLINEプラットフォームを介して応答します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6879be85-c315-552b-cd4f-f352cc509489.png)

# どうやって実装するのか

アーキテクチャーとその動作原理がわかったところで、次はその実装です。
この記事は、No Code Low Code をモットーに書いていますが、さすがに No Code とはいきません。
ただし、なるべく Low Code で済むような実装を検討してみます。そして、無償で :bangbang: :v:

LINE Messaging API と New Watson Assistant API をつなぐプラットフォームは、Node-RED を使います。何といっても、ほぼ No Code でつながるからです。
しかし、その Node-RED を動かす環境をどこにするのかが、今回の最大の難関でした。以前であれば、IBM Cloud 上で無償でボタン一発でクイックに環境の構築が可能でしが、今はそうはいきません。費用を抑える工夫は可能なのですが、どうしても費用が発生してしまいます。

では、どうするか。今回は、Gitpod を選択することにしました。
他にも選択肢はあると思いますが、Gitpod の便利さを皆さんに知ってもらいたい、という思いもありまして、Gitpod を選択させていただきます。

実装イメージはこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4a618b41-9234-56fa-cf7e-c81eb18cf2b7.png)

# いざ、実装！

全て無償でできますので、**「LINE チャットボットを作ってみたかったのよー」** という方は、ぜひ、一緒にやってみてください。
内容としては、それほど複雑ではないのですが、割と手順が多いので　2 回に分けて説明していきたいと思います。

### 大まかな手順の流れ

Node-RED 環境を構築するための雛形を Github に用意し、手順をシンプル化しました。
ステップとしては大きく 2 つです。

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

今回は、**『1. Github に用意した Node-RED 環境構築用の雛形を Gitpod にデプロイ』** を行います。
『2. Node-RED フローを使って、LINE Platform と Watson Assistant との接続』は次回となります。

# 1. Github に用意した Node-RED 環境構築用の雛形を Gitpod にデプロイ



### 何故 Gitpod なのか

以前であれば、IBM Cloud 上に無償で Node-RED 環境を構築できたのですが、残念ながら、現時点 (2022/12/17) で無償で Node-RED 環境を構築することはできません。

:::note info
IBM Cloud 上で Node-RED 環境を構築するには、**Code Engine** 上に構築するのが一番安く済みます。未使用時間を検知し、**Code Engine** を自動的に停止させ、料金が発生しないように構成することが可能です。
:::

今回は、無償環境にこだわり、**Gitpod** を使用します。
『**Gitpod** を初めて聞くよ』という方向けに、**Gitpod** ををわかりやすく紹介されている記事のリンクを[参考情報]()に載せておきましたのでご参照ください。

過去の私の記事 [ローコード・ノーコードで音声翻訳機を作る](https://qiita.com/yanagih/items/9f532bfa44e69a8e26f7)でも扱ったことがありますので、もしお時間がありました参照をお願いします:relaxed:

それでは、さっそく始めてみましょう。

[Github](https://github.co.jp/) にアクセスし、GitHubにサインインします。(初めての方は Sign Up をお願いします)
Node-REDを簡単にデプロイするために、Node-RED 環境構築用の雛形を GitHub リポジトリに用意しましたので、[New Watson Assistant and LINE Bot](https://github.com/Watson-bx-04/node_red-linebot) にアクセスしてください。

### Gitpod があれば、数分で Node-RED が使える状態に！

**Gitpod** の何が便利かって、GitHub等で公開されているコードをブラウザだけで簡単に実行して動作が確認できる、クラウド開発環境を提供してくれます。
そして、その開発環境は、ほぼVS Codeなので、VS Codeのユーザは操作に迷うことはありません。

このクラウド開発環境を使って **Node-RED** を起動し、LINE を New Watson Assistant に繋いでみます。

利用方法は簡単です。GitHubのURLを、https://<span>gitpod<span>.io# の後ろに追加するだけです。
そうやって出来上がったURLをWeb Browswerで開いてみてください。

こんな感じです。
```text:Web BrowswerのURL欄にコピー
https://gitpod.io#https://github.com/Watson-bx-04/node_red-linebot
```
:::note warn
警告
Gitpod起動途中で、『GitHubとGitpodを連携しますか？』的な画面が表示されたら、内容に従って許可し、進んでください。
:::
:::note info
プラグインを使えばもっと便利に！
ChromeとFirefoxには便利な[プラグイン](https://www.gitpod.io/docs/browser-extension)が提供されています。プラグインを追加すると、GitpodというボタンがGitHubの画面に追加され、そのボタンをクリックすると、GitHubのコードをGitpodにdeployしてくれます。本当に便利なので、みなさんも是非試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/62d19645-378c-c3f5-2f40-5a040b399435.png)

:::

Gitpodの画面が表示されたら、[Continue with GitHub]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/eb79a3f0-d5fc-4626-768a-9e0136bec0d8.png)


相互認証画面が表示されたら、[Authorize gitpod-io]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/213b2d91-c9ef-6659-4e16-53d5a4e1d079.png)

[VS Code Browser]がdefaultで選択されていることを確認して、[Continue]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/982e044b-1574-bd59-10cf-68b252a910bc.png)

このような画面が表示されたら成功です。(あっという間でした)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d716f963-429e-c188-09eb-792d99af4fcd.png)


### Node-REDにアクセスしてみよう

右上の方にある、リンクをクリックしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1653f336-cfc3-759b-48c2-48375c0ed394.png)


:::note warn
警告
ブラウザに『ポップアップ・ブロック』が表示される場合は、『許可』してください。
:::

無事、Node-REDにアクセスできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/8c11e969-e9df-c945-18a9-dbbaffcf5414.png)

:::note info
IBM Watson 用のノードを事前に読み込んでいます。また、LINE Messaging API が簡単に使える LINE 用のノードも読み込んであります。
詳しくは、GitHubの[.gitpod.yml](https://github.com/Watson-bx-04/node_red-linebot/blob/main/.gitpod.yml) を参照してください。
* node-red-node-watson
* node-red-contrib-line-messaging-api
:::

### Node-REDの操作に慣れてみる

まずは、Node-RED版の『Hello, World！』ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/669085f5-f2a6-aca8-1be0-ff4a25ba434b.png)

『**Node-RED** を初めて聞くよ』という方向けに、**Node-RED** をわかりやすく紹介されている記事のリンクを[参考情報]()に載せておきましたのでご参照ください。

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

本日は **Github**、**Gitpod** そして **Node-RED** と色々な道具が登場しました。
初めての人にとってはちょっとハードルが高かったかも知れず申し訳ございません。
ということで本日はここまでとさせていただきます。

# 続きの記事
https://qiita.com/yanagih/items/804bb3d26cc7146ce7a7

https://qiita.com/yanagih/items/a38e418a58317f1fd3bf

# 参考情報

### LINE Developers
https://developers.line.biz/console/

### 関連 Qiita 記事

https://qiita.com/yanagih/items/9f532bfa44e69a8e26f7

### Node-RED 関連
https://qiita.com/KMiura95/items/16698048d344389d3cf0

https://zenn.dev/protoout/articles/11-nodered-linebot-cheatsheet

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

https://qiita.com/joeartsea/items/93e8483a31292067c654

https://qiita.com/egplnt/items/222a3ae289472bb759b1

https://qiita.com/VulpeS404/items/0d73963177d5829bc5a9

### Gitpod 関連

https://qiita.com/mouse_484/items/394a4984f749cc201422

https://qiita.com/kitazaki/items/55b99a994f2993d6303f

https://qiita.com/Aramassa/items/f7d89499ebec4ade3d5a

### その他
https://qiita.com/katahiro/items/298eac9c0fa875333d84

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

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