Watson Assistantの新機能 「Web Chat」使うと、既存のWebページにチャット機能を簡単に埋め込めますよ~、って話


![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/8a11fcba-0ffa-f6fa-271f-37efefe26eda.png)


:triangular_flag_on_post:  (2020/8/7) 当記事の初版は2019/9月に投稿しました。当時はクローズ・ベータでしたが、**2020/4月からは正式に利用可能**になったので、記述を若干アップデートしました。

# 要は(TL;DR)

- Watson AssistantはREST APIの形式で提供されているのでアプリのフロントエンドのUIが自由に選べる半面、UIを利用者が作る必要[^1]があります
- でも新機能 Web Chat(~~2019/09時点ではクローズベータ中~~)を使えば、既存のWebページに超簡単にチャット機能を組み込めます
- 具体的には既存のHTMLページに数行のスクリプトを埋め込むだけ！です
- (2020/08/07) 【注】WebChatはPlusプラン以上でないとご利用いただけません

[^1]: 今までもSlackやFacebookMessengerなど一部のアプリとの連携なら作らずに済みましたが



# はじめに
こんにちわ！石田です。~~2019/9月現在、**絶賛ベータ中の**機能を先んじてご紹介します。ベータとはいえ、下記のようにドキュメントは公開されていますし、[ベータへの参加方法はオープン](https://cloud.ibm.com/docs/services/assistant?topic=assistant-feedback#feedback-beta)になっていますのでご興味のある方はぜひお申し込みください。~~

ドキュメント :blue_book: [Integrating with your own website](https://cloud.ibm.com/docs/services/assistant?topic=assistant-deploy-web-chat)

で、この新機能 WebChatですが、要はこういうこと↓↓↓がメチャ簡単に実装できます。このチャットのUIパネルはWatson側で用意しているので、開発なしで既存のWebページに数行のスクリプトを追加するだけで実装できてしまいます。( Watson Assistantの開発の経験がある方には「Try it outみたいなパネルがアプリに簡単に組み込めます」と言うとスッとご理解いただけるかと)

![WebChat08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/4ec963e3-0a93-de5b-a326-d1220af344d9.gif)

# やってみた
Watson Assistantのツールを使ってチャットのダイアログ部分ができたら、あとは１クリックで埋め込みコードを生成して、そのコードを既存のHTMLにコピペするだけ、で超簡単なのですが、要は以下の手順で実装できます。

## チャット（ダイアログ）

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/3324e7d1-b933-b59a-3c05-32c122d32cf6.png)

Watson Assistantの開発ツールを使って、こんな感じでチャット（ダイアログ）自体はできているとします。

## 埋め込みコードの生成

![WebChat00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/0d91625f-0082-c475-cca5-9ffcf0328161.gif)

Integrationから「Add Integration」～「Web Chat」～「Create Web Chat Script」でHTMLへの埋め込みコード(JavaScript)を生成します。(ベータに未参加の場合はWeb Chatは表示されません)

```javascript:生成されたJSコードの例
    <script src="https://assistant-web.watsonplatform.net/loadWatsonAssistantChat.js"></script>
	<script>
	  window.loadWatsonAssistantChat({
	    integrationID: "75a694d6-2302-4684-966b-xxxxxxxxxx",
	    region: "us-south"
	  }).then(function(instance){
	    instance.render();
	  });
	</script>    

```

### 生成したJavaScriptのコードを既存のHTMLに埋め込みます

![WebChat02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/8f125011-799b-4b28-ebd2-bf2e158ec9fb.gif)
上記で生成したコードを既存のHTMLの適切な場所にコピペします。

### あとはWebサーバでホストしたHTMLを実行するだけ！

![WebChat05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/d75e4c92-5f60-5fd8-c601-5f4d4ef05468.gif)

ＵＩパネルの開発は一切せずに、既存のアプリにチャット機能を追加することができました。メチャ簡単でしょ？
以上、Have Fun ! 

### :triangular_flag_on_post: 2020/8月時点の追記・アップデート
- Web Chatは2020/4月に正式に利用可能になりました。(:warning: Plusプラン以上でないと使えません)
- GA以降も機能強化が続いています。強化内容は[通常のRelease Note](https://cloud.ibm.com/docs/assistant?topic=assistant-release-notes)に加えて[独立したRelease Note](https://cloud.ibm.com/docs/assistant?topic=assistant-release-notes-chat)でご覧いただけます。
- 強化で目ぼしいものは下記
    - CSSテーマをカスタマイズ可能になり、アプリUIとフィット
    - バージョニングのサポート
    - 開始時にサービスデスク・エージェントのアバターが表示可能に
    - セキュリティの強化 
    - Salesforce/Zendesk との統合     
- Watson Assistantとは別に[WebChat専用のドキュメント・ページ](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=)も作られており、APIや構成、チュートリアルが掲載されています。

# Watson Assistantのクローズベータ(Early Access Program)について

Watson Assiatantは様々な新機能をクローズベータ(Early Access Program)として希望者に早めにリリースしてフィードバックを得ています。搭載候補の新機能がいち早く試せるので、ご興味のある方は「[Participate in the early access program](https://cloud.ibm.com/docs/services/assistant?topic=assistant-feedback#feedback-beta)」をご参照いただき、参加申請してください。なおこの新機能は色々ありますが機能ごとに申請する必要はなく、承認されればすべての新機能がまとめて利用可能になります。

- ベータ(Early Access Program)への参加自体は無償です。（WA自体の利用費用は使っているアカウントに準じます）
- 利用するアカウントはLiteまたはStandardであることが必要です
- **Dallas**リージョンでインスタンスを作ってから、そのインスタンスのSkillのタブの一番下に申請リンクがあります

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108535/903335b0-9f93-17bc-e94c-8bfe1596ff34.png)

- 新機能を使えるかどうかはインスタンス単位での設定です。アシスタントやスキルの単位での細かい制御はできません
- ベータの新機能は非互換であったり不安定である可能性もあります。釈迦に説法ですが、**既存の開発・本番環境とは別のインスタンスを用意**して、そちらで試されることを強くお勧めします。また、設定はユーザーID単位ではなくインスタンス単位ですので、インスタンスをDROPして別の名前で再CREATEした場合などは再度の申請が必要になるはずです。