Watson Assistant Tips - チャットボットのUIはどうする？

# やっぱりUIは自分で作るしかないのか？
「対話フローはGUIツールで作れるのに、チャットボットのUIは一から作るしかないのだろうか？」
Watson AssistantをWatson Conversationの時代からお使いのユーザさんには、今でも『UIは自分で作るもの』と思っている人が少なくないようです。
また最近では、「SlackやFacebook Messenger、使えるよね」と世の中で広く使われているツールと連携できることを知っているユーザも増えてきました。
とはいえ、『もっと手軽にチャットボットのUIが作れたら良いのに。。。』という声をよく聞きます。

# Web Chat機能があります

Watson Assistantには、ホームページに簡単に設置できるWeb Chat機能があります。

### こんな感じでホームページに設置できます
![web1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e6df1d2c-5093-81c7-9dd2-1775039f5e57.png)

### アイコンをクリックするとUIがオープン
![web2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f74e0b2c-f1b6-aa77-1743-a74e9a2745fc.png)

### 質問を入力すればチャットボットからの回答が表示されます
![web3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e737ce71-e353-d1e1-3515-4d431bbb6dd4.png)

# でも、難しそう。。。
安心してください。プログラミングのスキルは必要ありません。
ホームページ用のHTMLに、Watson Assistantが提供するスニペットをコピペするだけで、Web Chatを簡単に設置できます。

### STEP1: Web Chatを構成します
Watson Assistantを起動すると、Assistants作成の画面が表示されますので、[Create assistant]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/098049c0-4e83-6e74-2e48-ce9fd08a2f3f.png)

適当な名前をつけて、[Create assistant]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e5866a74-222c-7a3f-9b1d-96e1fb64b748.png)

作成済みのdialog skillをセットしてください。
(dialog skillの作成手順については今回省略します)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/7bb5745c-abb3-b3a9-4a67-f43924673379.png)

[Integrate web chat]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/e0fdb318-adf9-d354-ceb9-91a1327424c2.png)

[Create]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c587671e-04ec-2000-71e8-af4c7e71c159.png)

[Home screen]タブに移動して、『タイトル』や『よく聞かれる質問』を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/eba84610-d81f-65b4-f6fb-6189b3225fcd.png)

[Embed]タブに移動して、コードスニペットをコピーし、[Save and exit]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b75cfac6-d66d-60a4-96cd-f127783bcce2.png)

### STEP2: HTMLファイルにWeb Chatスニペットをコピーします
先ほどコピーしたコードスニペットをindex.html等に挿入します。
```html
<html>
<head></head>
<script>
  window.watsonAssistantChatOptions = {
      integrationID: "xxx", // The ID of this integration.
      region: "xxx", // The region your integration is hosted in.
      serviceInstanceID: "xxx", // 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);
  });
</script>
<body>
    <title>My Test Page</title>
    <p>The body of my page.</p>
</body>
</html>

```
後はアクセスするだけですね。

Web Chat設置までの手順は以上です。

# YouTubeに解説動画が公開されています
英語による解説動画となっていますが、```字幕```を有効化したり、字幕の```自動翻訳機能```を使うと、```字幕```が```日本語```に変換されます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/52bpMKVigGU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# いかがでしたでしょうか
また、Watson Assistantがちょっぴり好きになりました :blush:

# 参考

・[Web チャットと Web サイトの統合](https://cloud.ibm.com/docs/assistant?topic=assistant-deploy-web-chat)
・[Web Chat Configuration](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration)