Help us understand the problem. What is going on with this article?

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

image

要は(TL;DR)

  • Watson AssistantはREST APIの形式で提供されているのでアプリのフロントエンドのUIが自由に選べる半面、UIを利用者が作る必要1があります
  • でも新機能 Web Chat(2019/09時点ではクローズベータ中)を使えば、既存のWebページに超簡単にチャット機能を組み込めます
  • 具体的には既存のHTMLページに数行のスクリプトを埋め込むだけ!です

はじめに

こんにちわ!石田です。2019/9月現在、絶賛ベータ中の機能を先んじてご紹介します。ベータとはいえ、下記のようにドキュメントは公開されていますし、ベータへの参加方法はオープンになっていますのでご興味のある方はぜひお申し込みください。

ドキュメント :blue_book: Integrating with your own website

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

WebChat08.gif

やってみた

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

チャット(ダイアログ)

image

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

埋め込みコードの生成

WebChat00.gif

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

生成された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
上記で生成したコードを既存のHTMLの適切な場所にコピペします。

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

WebChat05.gif

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

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

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

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

image

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

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

ishida330
※このサイトの掲載内容は私個人の見解であり、必ずしも私が所属する会社、組織、団体の立場、戦略、意見を代表するものではありません。商用製品のことを記述している場合もありますが非公式情報ですので、そこんとこヨロシク!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした