はじめに

IBM Watson/watsonxを知る・試す・活用するを支援する Advent Calendar 2023 14日目記事です。
本記事では、watsonx Assistantの極小粒な小ネタをご紹介します。

この記事を思いついたきっかけ

こんにちは。CSMをやってます。
仕事柄、watsonx Assistantのデモをすることが多いのですが、Web Chatを紹介する時にシンプルなサンプル画面や動かせないイメージ背景のページに組み込んでご紹介しても味気なく感じます。またせっかく作ったWeb Chatをパッとお見せしたい事もありますよね。そこで本記事ではデモや見た目を確認する目的でwatsonx AssistantのWeb Chatを簡単にプレビューする方法を３つご紹介します。

想定している対象者

watsonx AssistantのWeb Chatを開発経験がある方
いろいろなライブWebページにWeb Chatを埋め込んで様子を見たい方
自分が作ったWeb Chat画面をいつでも呼び出したい方

必要なもの

watsonx AssistantのWeb Chatのプロジェクト
開発コンソールを持つブラウザ（今回はChrome）
任意のEditor

開発画面におけるプレビュー画面

通常こちらの画面の様に開発をしながらWeb ChatのWindowだけが表示された状態で開発を進めることができます。変数と動作を確認しながら開発が可能です。しかし色やデザインが埋め込むページにあっているか確認することができません。

方法１：標準機能で実現

実はプレビューを確認するための標準機能があります。
Preview画面を開くためには左ペインのメニューから
Preview ボタンをクリックします。

標準では背景が灰色基調のSample画像が使われています。上部の[Change backgroud]メニューを押すと以下の様にURLを指定するか、任意の背景イメージをアップロードをするメニューが出てきます。

次のダイアログでURLを入力してContinueを押します。

すると指定したページが静止画にキャプチャされた状態で開きます。
これでも十分にイメージをしやすいですね。

特徴

開発段階では標準機能を使いましょう。デザイン変更画面への切り替えがすぐにできるので素早い外観の編集が可能です。
PublicなURLのみ指定できます。Loginが必要だったりファイヤーウォールの中のサイトは指定できません。
キャプチャされた静止画なのでリンクや動きのあるページは動きません。
Loginが必要なWeb Pageやイントラネットなどファイヤーウォールの中のWebページと合わせる場合はJPG,PNG形式の画像を入手してアップロードが可能です。アプロードした画像は24時間後に削除されます。
Publicにシェアするためのリンクを作ることができます。重要な情報が含まれないように気を付けましょう。

方法２：ブラウザのDevToolsのコンソールを使用する。

Web Chatを本番のWebページに組み込むにはembed code(JavaScript)をwebsiteのhtmlに貼り付けます。
これを応用してブラウザの開発者ツールのコンソールからcodeを入力しブラウザで開いた任意のライブページでの動作を確認できるようにする方法をご紹介します。

まずは、watsonx AssistantのプロジェクトページからWeb Chatのembed codeを入手しましょう。
プロジェクトを開き左ペインのメニューからPreview ボタンをクリックします。開いたPreviewページ上部の[Customize web chat]ボタンをクリックしましょう。

するとカスタマイズのページが開きますのでEmbedという右から二つ目のタブを探してクリックします。

embed codeをコピーしてEditorに貼り付けます。

<script>
  window.watsonAssistantChatOptions = {
    integrationID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx", // The ID of this integration.　このIDは個々に違います。
    region: "jp-tok", // The region your integration is hosted in.
    serviceInstanceID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx", // The ID of your service instance.このIDも個々に違います。
    onLoad: async (instance) => { await 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>

<script> </script>タグ内のコードをコピーして以下のコードの中に貼り付けます。

javascript:(function(){
//　<script> </script>タグ内のコードをここに貼り付けます。
})()

完成したEmbed Code

javascript:(function(){
  window.watsonAssistantChatOptions = {
    integrationID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx",
    region: "jp-tok", 
    serviceInstanceID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx",
    onLoad: async (instance) => { await 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);
  });
})()

ここではChromeブラウザを使用しています。
ブラウザでEmbedする対象のWebページを開いた後、F12などでブラウザの開発者コンソールを開きます。コンソールタブからコンソールを開きEmbed Codeを張り付けて改行をします。

するとライブのWebページにEmbedされたWeb Chatを動かすことができるようになります。

特徴

任意のライブページで動作を確認することが可能です。
実行しているＰＣがアクセスできるファイヤーウォールの中のページやLogin後のWebページ、背景が動くWebページにEmbedすることが可能になります。
この方法ではページを遷移すると消えてしまいます。
embed codeはCSS,JavaScriptなのでカスタマイズやデバッグが可能になります。

方法３：Bookmarkletにする

コンソールで動作確認ができたら今度はブックマークに貼り付けることでいつでもどのライブページでも呼び出すことができるようになります。

コンソールで動作確認をしたEmded Codeから”//"から始まるコメントアウトを削除します。

javascript:(function(){
  window.watsonAssistantChatOptions = {
    integrationID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx",
    region: "jp-tok", 
    serviceInstanceID: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx",
    onLoad: async (instance) => { await 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);
  });
})()

Bookmarkできる最大文字長などもあり長すぎるとBookmarkに登録できない場合があります。その場合は空白文字を詰めたり改行を削除します。また短くするための便利なツールもあります。

任意のページでダミーのブックマークを作成します。Chromeだと★のマークをチェックするかCtl+dでブックマークが登録できます。任意の名前を付けましょう。以下ではwww.example.comを開きダミーのブックマークを作成しました。

ブックマークバーのダミーブックマークの上にカーソルを置き右クリックで”編集”を選択します。

URLを編集しEmded Codeを貼り付けます。
編集前

編集後

後は任意のページで作成したBookmarkボタンを押すと・・・

この通り！

特徴

登録したブックマークボタン一つで呼び出したいWebChatがいつでも任意のページで呼び出せるようになります。
開発者画面に入ってPreview画面を押して・・・といった面倒さが無くなります。

終わりに

小粒な小ネタなのですが意外と長文になりました。
人に紹介したいWeb ChatはBookmarkに入れていつでも自分が作ったWebChatを紹介できるようにしましょう!
Embed Codeの中身はCSSやJavaScriptなので詳しい方ならば外見や動作のカスタマイズが可能となります。
その際は方法２でご紹介した開発者コンソールを使うことでデバッグもできるのでカスタマイズ開発が進むことでしょう。

Let’s Create! and Have Fun!

参考

watsonx Assistantを初めて触る方はこちらを参照することをお勧めします！

watsonx AssistantのWeb ChatカスタマイズについてのDocumentはこちらを参照ください

watsonx Assistantの小ネタ：３つのプレビュー方法