はじめに
watsonx Assistantの機能を体験できるデモサイトがあるのをご存知でしょうか。
この記事を見ることでwatsonx Assistantを簡単に体験することができます。
ただ、この記事を見てもっと自分でwatsonx Assistantをカスタマイズして使ってみたいと思った方もたくさんいらっしゃると思います。
そんな方にはデモ画面左下にあります導入オプションを試してみることがおすすめです。
この記事では導入オプションの中でもお客様対応( 回答する/実行する/見せる )の「iframe応答の追加」、「ロケーションを共有する」を使ってどんなことができるかについて実際のカスタム例も示しながら、書きたいと思います。
事前準備
この記事で紹介するカスタマイズでは前提としてwatsonx Assistantのセットアップが必要です。
この記事が参考になります。
iframe応答の追加
iframeを追加することでwebチャットを続けながら、外部のサービスと接続することができます。
デモの中ではGoogle Mapを活用したチャットを体験することができました。
デモの中で、画面左下の「iframe応答の追加」を押すと次のような画面が表示されます。
表示されたこのガイドでは、ステップの指示に従って進めることでGoogle Mapsを使ったwatsonx Assistantのアクションを設定できます。
ここからはこのステップガイドに従ってiframe応答を使ってみます。
「アシスタントの内容」フィールドでiframeアイコンをクリックする
まずは「アシスタントの内容」フィールドを探します。
下の画面はホーム画面です。
左のタブから「Actions」を選びます。
「Create actions」を選択します。
start interactionは「Google Mapを開く」と入力します。(「Google Mapを開く」と入力を受け付けるとGoogle Mapsが開くように設定するため)
このAssistant saysの中身がAssistantの内容です。このiframeのマークを選択します。
iframeを選択することができました。
「iframeソース」フィールドに、外部コンテンツの完全なURLを追加します
外部コンテンツの完全なURLとは、Google Mapの場合はAPIのことになります。そのため、まずはGoogle MapのAPIを取得します。
ガイドにある「マップ組み込みAPIの概要」を選択します。
開いたページの下までいくと「クイックスタートに移動」があるので選択します。
クイックスタートのガイド指示通りに進めます。
(Google MapのAPIは毎月200ドル分を超過した場合は支払いが発生するようです、これは地図の表示回数に合わせると28500回なので、テストする分には大体無料で実施できます。)
Google MapのAPIが取得できたら、watsonx Assistantに戻って、Source URLを入力します。
Source URLには色々なオプションがあるようですが、今回は以下のようにします。
https://www.google.com/maps/embed/v1/place?q=<地名>&key=<あなたのAPI key> &zoom=15
上記は例として地名を日本IBMとします。プレビューの地図では日本IBMの場所が指定されていますね。
カスタム例
今回はカスタム例として以下のようなシナリオで動くチャットボットを考えました。
ユーザー: 「Mapを開いてください。」
watson Assistant: 「地名を入力してください。」
ユーザー: どこか地名をあげる( 例えば日本IBM本社 )
チャットボット: 地名を地図で表示
まず地名を入力してくださいというメッセージを出すためのステップを追加します。
「New step」をクリックします。
作成したステップはステップ2になるので、一つステップを上げてステップ１になるようにします。
Assistant saysに「地名を入力してください」と入力します。
「Define customer response」をクリックします。
続いて「Free text」をクリックします。
ステップ２に戻って、Source urlを編集します。<地名>のところを「Action step variables」のステップ1にします。
では、実際にpreviewから動かしてみましょう！
ロケーションを共有する
このカスタムではwebブラウザから自分の位置情報をwatsonx Assistantに共有することでGoogleマップなどと連携して活用できます。
ドキュメントを読む
デモサイトの「ロケーションを共有する」を選択します。
英語の画面になりますが、内容としてはユーザーの位置情報をwatsonx Assistantと共有し、iframeで表示できる、と言う内容です。
まずはカスタム前の、すでに設定ずみのものを触ってみます。
以下のRunning the JavaScript Example(コードの実行例)から、お試しで触ることができます。
ステップ1のリンクをクリックします。
画面右端のインストールボタンを選択します。
インストールされたindex.htmlというファイルをダブルクリック or Firefoxなどのブラウザーの検索窓に貼り付けると以下のような画面が表示されます。
右下のチャットボットを開くと次のような画面が出てきます。
一番上の「where is the nearest IBM office?」をクリックします。
すると以下のような内容がアシスタントから返ってきます。( ブラウザの位置情報の共有の設定をしておく必要があります。 )
この「IBM Location」をクリックすると以下のように最寄りのIBM officeが出てきました！(執筆時、IBMの箱崎事業所にいたので少しわかりづらくなってます、、)
このようにチャットボットユーザーから位置情報を受け取り、それを活用した情報を返すことができます。
カスタムしてみる
それでは次にこの機能を使ってwatsonx Assisntantを独自にカスタマイズしてみましょう。
先ほどのgithubの画面に戻りましょう。
ここからカスタマイズできます。リンクを開きます。
先ほどと同様にファイルをダウンロードします。
それでは独自のカスタマイズをしてみましょう。
元々のデモでは現在地から最寄のIBM事業所までの道のりを表示するデモでした。独自のカスタマイズでは現在地から東京スカイツリーまでの道のりを表示させるようにしましょう。
まずはアクションファイルを変更します
先ほどダウンロードしたアクションファイルをそのまま使用すると、最寄のIBMを探すデモになるので、まずはこのアクションファイルを変更します。
変更箇所は以下のGoogle Map APIのURLです。
ここのsourceを変更します。
https://www.google.com/maps/embed/v1/directions?key=&origin=${User_Latitude},${User_Longitude}&destination=Tokyo+Skytree
このように変更します。(api_keyのところは先ほどの章のGoogle MapのAPIキーを入れましょう)
編集したアクションファイルを使ってwatsonx Assistantを構築します。アクションファイルのアップロードについてはこの記事が参考になります。
次にwatsonx Assistantを設定しよう
日本語で「東京スカイツリーまでの道のりを教えてください」とチャットボットに聞くとアシスタントのアクションが進むように変更します。
まずはhome画面からActionsを選択します。
アクションが１つだけ設定されているので、そこをクリックします。
ここのphrasesを一つ消します。
新しいphrasesを追加しましょう。
「東京スカイツリーまでの道のりを教えてください」と入力します。
Watsonx Assistantの変更はここまでです。
HTMLのJavascript
先ほどの章でダウンロードしたHTMLを変更します。
まずは先ほど作成したwatsonx Assistantを設定します。変更する点は以下の箇所です。
ここに入力する値はwatsonx Assistantから探します。
まず左のタブから「Environments」を選択します。
Web chatを選択します。
「Embed」を選択します。
ここにintegrationIDとregion、serviceInstanceIDがあるので、それぞれHTMLファイルに適用します。
カスタマイズはここまでです。
実際に動かしてみましょう！HTMLファイルをダブルクリック、もしくはブラウザの検索窓にドラッグすることで確認することができます。
終わりに
今回示しましたように、僅か数ステップでiframeを編集でき、Google Mapをチャット内で表示することができました。ここでは行っていませんがSource URLを変えることで他のサービスとの連携も可能です。
私自身、この記事を執筆する中でこの機能について知りましたが、watsonx Assistantはただのチャットbotに留まらない、非常に拡張性に優れたチャットボットであることを理解しました。
以上です、ここまで読んでいただきありがとうございました。