Twilio Programmable Chat と Watson Conversation を使って、Chatbot を作る

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

※本記事は、2017/3/10に開催されたBluemix-UG勉強会で使用されたものです。また、本記事では、主にTwilio側のプログラミングについて解説しています。Conversationについては、別の資料を参考に設定を行ってください。

本日の資料のURLは以下のとおりです。
**https://goo.gl/Y4Prbh**

## 目的
IBM Watsonの[Conversation](https://www.ibm.com/smarterplanet/jp/ja/ibmwatson/developercloud/conversation.html)と、Twilioの[Programmable Chat](https://twilio.kddi-web.com/function/chat/)を組み合わせて、Chatbotを作成してみます。

### Watson Conversation とは

自然言語インターフェースを提供して、エンドユーザとのやり取りを自動化する「会話」エンジン。会話に必要なインテントやエンティティと呼ばれる要素を追加していくことで、よくある質問に自動的に答えるようなチャットボットを作成することができます。

### Twilio Programmable Chat とは

Twilioが提供するチャットアプリケーションのためのフレームワークAPIです。
従来、チャットのようなアプリケーションを作成しようとすると、 WebSocket や Socket.io などの、リアルタイム通信のための仕組みを準備する必要があり、システム構築のハードルが高くなっていました。Twilio Programmable Chat を利用すると、 リアルタイム通信の実装はもちろん、チャットに必要な機能がすべて API として提供されます。
これにより、プログラマは必要最低限のコードを書くだけで、簡単にチャットアプリケーションを作成することができます。

### Programmable Chat の概念

![概念図.png](https://qiita-image-store.s3.amazonaws.com/0/86046/52f41c9e-9fd4-734a-4d0e-71e54e5325d0.png)

サービス：チャットルームやユーザを管理する単位
チャネル：いわゆるチャットルームで、ユーザを参加させたり、メッセージを管理する単位
ユーザ：メッセージを送信したり、受け取ったりすることができる（マルチデバイスにも対応している）
メンバー：チャットルームに参加しているユーザの集合

これらの要素の管理はAPI経由で行いますが、サービスについては管理コンソールからも管理できます。

### AccessToken について

ユーザは、 Programmable Chat を利用する際に、事前に Twilio に対してアクセストークンと呼ばれる文字列を動的に取得する必要があります。その流れをまとめたものが次の図です。
![初期設定手順 (3).png](https://qiita-image-store.s3.amazonaws.com/0/86046/de0b2831-478f-d250-3784-2b250b528dd5.png)


デバイスID：スマホの場合は、機体固有のIDを使います。ブラウザの場合は、 'browser' を指定します。
Identity：ユーザ名など、ユーザを識別するための情報です。
サービスSID:Programmable Chatのサービスを識別するIDです。管理コンソールで確認可能です。
AccountSID:TwilioアカウントのIDです。管理コンソールで確認可能です。
API KEY:Twilioへのアクセスに使用される認証情報です。後ほど作成します。
API Secret:API KEYと一緒に生成されます。作成時にしか確認できないので注意が必要です。
Token:上記情報を使って、Twilioから発行されるアクセストークンです。

### Programmable Chat の料金

| 項目       |       料金 |
|:-----------------|:------------------|
| メッセージ送信、チャネル作成など、RestAPIを使ったコマンド送信 | 0.075円/アクション|
| メッセージの読み出しなど | 0.0075円/読み出し|
| 送信通知、オンライン/オフライン通知など | 0.0075円/通知|

# ハンズオン

## Conversation APIの設定

1. [この記事](https://www.change-makers.jp/technology/11268)などを参考にConversation APIを設定してください。
2. サービス資格情報のusernameとpasswordをメモ帳に控えておきます。
3. WorkspaceのIDもメモ帳に控えておきます。

## Cloud Foundryツール（cf）のインストール（Mac）

```
$ brew tap cloudfoundry/tap
$ brew install cf-cli
```

## Cloud Foundry（Node.js）の準備

1. Bluemixへログイン後、カタログのCloud FoundryアプリのSDK for Node.jsを選択。なお、今回は英国リージョンを利用します。
2. アプリ名：「twilioChatbot-XXXX」XXXXはユニークな何か文字列、ホスト名も同じを指定して、「作成」ボタンを押下。

## Twilioの準備

### AccountSIDとAuthTokenを取得

1. Twilioの管理コンソールにログイン。
2. AccountSID（ACから始まる文字列）とAuthTokenをメモ帳にコピー。

### APIキーとAPIシークレットを取得

1. Twilioの管理コンソールにログイン。
2. デベロッパーセンターの中から、APIキーを選択。
3. 「twilioChatbot」というAPIキーを新規作成。
4. 生成されたSIDとSECRETをメモ帳にコピー。

### Programmable ChatのサービスIDを取得

1. Twilioの管理コンソールのProgrammable Chatを開く。
2. サービスを開き、「twilioChatbot」というサービスを新規作成する。
3. 生成されたサービスのSERVICE SIDをメモ帳にコピー。

### Webhookを設定

1. twilioChatbotのWebhookを選択。
2. Post-Event Webhooksの中のCALLBACK URLに以下のurlを指定。  
http://twiliochatbot-XXXX.eu-gb.mybluemix.net/webhookFromTwilio
3. メソッドをGETからPOSTに変更。
4. コールバックイベントの「OnMessageSent」にチェックを入れて「保存」


## チャットアプリの準備

- GithubよりサンプルプログラムをCloneする。

```lang:ターミナル
$ git clone https://github.com/twilioforkwc/twilioChatBot.git
$ cd twilioChatBot
```

- .env.example をエディタで編集し、先程メモをしておいた情報に置き換える。

```.env.example
TWILIO_ACCOUNT_SID：Account SID
TWILIO_AUTH_TOKEN：Auth Token
TWILIO_API_KEY：APIキー
TWILIO_API_SECRET：APIシークレット
TWILIO_IPM_SERVICE_SID：ChatのサービスSID
WATSON_WORKSPACE_ID：Conversation APIのWorkspace ID
WATSON_USERNAME：Conversation APIの認証情報のUsername
WATSON_PASSWORD：Conversation APIの認証情報のPassword
```

- .env.example を .env に名称変更する。

## Cloud Foundryにログイン

```
$ cf login

API エンドポイント> https://api.eu-gb.bluemix.net

Email> Bluemixに登録したメールアドレス

Password> Bluemixに登録したパスワード
認証中です...
OK
```

## Cloud Foundryにデプロイ

```
$ cf push twilioChatbot-XXXX
```

## 実行

```
$ open http://twilioChatbot-XXXX.eu-gb.mybluemix.net
```