Web Chat で高速デプロイ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/48667bb9-8079-8848-8262-b901949b329b.png)

バーチャル・アシスタントを公開するにあたって、必要な要素の １ つに、ユーザー・インターフェースがあります。
ユーザー・インターフェースの形態は要件次第で様々ですが、今回は Web Chat をご紹介します。

# Web Chat について

#### Web Chat とは
Watson Assistant は、ホームページに簡単に設置できるチャット・ウィンドウ機能で、標準で提供しています。

#### ホームページへの設置イメージ

Web Chat が設置されたホームページにアクセスした時の画面イメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0c7b8a4a-fc27-ca28-f51c-5a617f037bac.png)

#### チャット・ウィンドウの起動

アイコンをクリックすると、チャット用のウィンドウが起動します。
質問を直接入力できますし、メニューを表示して選択してもらうことも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/072adff9-ddf8-8811-d296-b42e65a9c642.png)

#### カスタマイズ性

色やチャット・ウィンドウの大きさ、起動アイコンや設置場所のカスタマイズももちろん可能です。
その他、様々なカスタマイズが可能です。詳細は、明日(12/8)の記事で取り上げます。
お急ぎの方は、[公式オンラインマニュアル](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html)をご参照ください。

# Web Chat の設置方法

昨日の記事「[バーチャル・アシスタントの開発と運用を支える 開発環境 〜 検証環境 〜 本番環境 について](https://qiita.com/yanagih/items/24e42d9593e2643706bc)」で紹介したように、New Watson Assistant は、ドラフト環境とライブ環境の 2 つを提供しています。
この 2 つの環境は内部的に完全に分離されていますので、Web Chat もそれぞれ様に用意します。
とはいえ、手順は同じで、払い出される**スニペット**(ホームページにペーストする短いコード)の内容が異なるだけです。

#### Web Chat 用スニペットの取得

HOME 画面から Integrations をクリックし、Essential channels 管理画面にアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d4a5d20f-4887-42dd-0fb1-5b52369b7fed.png)

Web chat の [Open] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b6627c7d-ea9b-6e97-31b7-6a66c6f26169.png)

ここで、**ドラフト環境**もしくは**ライブ環境**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1421cd3f-c047-c9ef-ef70-b3638bf2016d.png)

カスタマイズ項目がタブ形式で選択できる様になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e3562185-1c9b-2977-ff08-fb82b6684ed0.png)

今回は、この中でいくつかのカスタマイズ手順を紹介します。
設定内容 (左側) と 画面の様子 (右側) を見比べてみてください。

**[Style]: 全体**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4b1d7148-5235-57a2-a4aa-598b269d11aa.png)

**[Launcher]: 起動アイコン**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b2609b6d-edd2-27be-cfc2-e18921f3d18f.png)

**[Home screen]: ホーム画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d6b5d3eb-7270-a6cc-81c4-210c242359d0.png)

**[Embed]: スニペット**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/aa4e6604-6167-2a17-ebde-36bf978195c5.png)

#### 設置方法

Web Chat を設置するには、**スニペット**を設置先ホームページの index.html に追加すれば OK です。
今回は、**スニペット**を webchat.js として保存し、index.html から読み込む方法をご紹介します。

```HTML:index.html
<html>
<head>
    <!-- ここで webchat.js を読み込む -->
    <script type="text/javascript" src="webchat.js"></script>
</head>
<body>
    <title>テスト・ページ</title>
    <p>これは Web Chat のテストページです</p>
    </body>
</html>
```

```javascript:webchat.js
window.watsonAssistantChatOptions = {
  integrationID: "***", // The ID of this integration.
  region: "***", // The region your integration is hosted in.
  serviceInstanceID: "***", // The ID of your service instance.
  onLoad: function(instance) { instance.render(); }
};
setTimeout(function(){
  const t=document.createElement('script');
  t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
  document.head.appendChild(t);
});
```

#### 実行イメージ

サーバーに設置しても良いですし、ローカル・ディスクにおいて、ブラウザーから index.html を開いても OK です。

**起動直後**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/07082030-3291-c5ad-6df1-535acc463d8b.png)

**アイコンをクリックして、Web Chat を起動した直後**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/3af53625-2f92-f4a6-cf11-0915cb8b5bce.png)


#### 簡易コードの公開

上記、index.html と webchat.js は [こちらのGithub](https://github.com/Watson-bx-04/webchat) で公開しています。

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

Actions で対話フローを作成した後であれば、Web Chat のデプロイは、5分もかからないと思います。

対話フローの作成については、こちらでで紹介しております。

・[直感的に操作できる Actions で対話フローを作成してみる](https://qiita.com/yanagih/items/f98cff2b5b9ce3208fc4)
・[注文のキャンセル処理を追加する 〜セッション変数の使い方〜](https://qiita.com/yanagih/items/ea38bc109527a5127dc0)

# 参考情報

#### 公式オンライン・マニュアル: Web Chat 仕様
https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html

#### 公式オンライン・マニュアル: Web Chat カスタマイズ方法
https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-config

#### 公式オンライン・マニュアル: Web Chat のデプロイ
https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop

#### 関連記事
https://qiita.com/yanagih/items/f98cff2b5b9ce3208fc4

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

#### その他

https://publicdomainq.net/pizza-food-0016877/

https://jp.freepik.com/free-photos-vectors/pizza