LoginSignup
1
0

watsonx Assistantの導入オプションをやってみた「iframe応答の追加」「ロケーションの共有」編

Posted at
1 / 2

はじめに

watsonx Assistantの機能を体験できるデモサイトがあるのをご存知でしょうか。
この記事を見ることでwatsonx Assistantを簡単に体験することができます。

ただ、この記事を見てもっと自分でwatsonx Assistantをカスタマイズして使ってみたいと思った方もたくさんいらっしゃると思います。
そんな方にはデモ画面左下にあります導入オプションを試してみることがおすすめです。
image.png

この記事では導入オプションの中でもお客様対応( 回答する/実行する/見せる )の「iframe応答の追加」、「ロケーションを共有する」を使ってどんなことができるかについて実際のカスタム例も示しながら、書きたいと思います。

事前準備

この記事で紹介するカスタマイズでは前提としてwatsonx Assistantのセットアップが必要です。
この記事が参考になります。
image.png

iframe応答の追加

iframeを追加することでwebチャットを続けながら、外部のサービスと接続することができます。
デモの中ではGoogle Mapを活用したチャットを体験することができました。
image.png
デモの中で、画面左下の「iframe応答の追加」を押すと次のような画面が表示されます。

image.png

表示されたこのガイドでは、ステップの指示に従って進めることでGoogle Mapsを使ったwatsonx Assistantのアクションを設定できます。

ここからはこのステップガイドに従ってiframe応答を使ってみます。

「アシスタントの内容」フィールドでiframeアイコンをクリックする

まずは「アシスタントの内容」フィールドを探します。

下の画面はホーム画面です。
image.png
左のタブから「Actions」を選びます。

image.png
「Create actions」を選択します。

image.png
start interactionは「Google Mapを開く」と入力します。(「Google Mapを開く」と入力を受け付けるとGoogle Mapsが開くように設定するため)

image.png
このAssistant saysの中身がAssistantの内容です。このiframeのマークを選択します。

image.png
iframeを選択することができました。

「iframeソース」フィールドに、外部コンテンツの完全なURLを追加します

外部コンテンツの完全なURLとは、Google Mapの場合はAPIのことになります。そのため、まずはGoogle MapのAPIを取得します。
ガイドにある「マップ組み込みAPIの概要」を選択します。
image.png

開いたページの下までいくと「クイックスタートに移動」があるので選択します。
image.png
image.png
クイックスタートのガイド指示通りに進めます。
(Google MapのAPIは毎月200ドル分を超過した場合は支払いが発生するようです、これは地図の表示回数に合わせると28500回なので、テストする分には大体無料で実施できます。)

Google MapのAPIが取得できたら、watsonx Assistantに戻って、Source URLを入力します。
image.png
Source URLには色々なオプションがあるようですが、今回は以下のようにします。

https://www.google.com/maps/embed/v1/place?q=<地名>&key=<あなたのAPI key> &zoom=15

上記は例として地名を日本IBMとします。プレビューの地図では日本IBMの場所が指定されていますね。

カスタム例

今回はカスタム例として以下のようなシナリオで動くチャットボットを考えました。
ユーザー: 「Mapを開いてください。」
watson Assistant: 「地名を入力してください。」
ユーザー: どこか地名をあげる( 例えば日本IBM本社 )
チャットボット: 地名を地図で表示

まず地名を入力してくださいというメッセージを出すためのステップを追加します。
「New step」をクリックします。
image.png

作成したステップはステップ2になるので、一つステップを上げてステップ1になるようにします。
Assistant saysに「地名を入力してください」と入力します。

image.png
「Define customer response」をクリックします。

image.png
続いて「Free text」をクリックします。

image.png

ステップ2に戻って、Source urlを編集します。<地名>のところを「Action step variables」のステップ1にします。

image.png

では、実際にpreviewから動かしてみましょう!
demo1.gif

ロケーションを共有する

このカスタムではwebブラウザから自分の位置情報をwatsonx Assistantに共有することでGoogleマップなどと連携して活用できます。

ドキュメントを読む

デモサイトの「ロケーションを共有する」を選択します。
image.png

image.png
英語の画面になりますが、内容としてはユーザーの位置情報をwatsonx Assistantと共有し、iframeで表示できる、と言う内容です。

まずはカスタム前の、すでに設定ずみのものを触ってみます。
以下のRunning the JavaScript Example(コードの実行例)から、お試しで触ることができます。
image.png
ステップ1のリンクをクリックします。

image.png
画面右端のインストールボタンを選択します。

インストールされたindex.htmlというファイルをダブルクリック or Firefoxなどのブラウザーの検索窓に貼り付けると以下のような画面が表示されます。
image.png
右下のチャットボットを開くと次のような画面が出てきます。

image.png
一番上の「where is the nearest IBM office?」をクリックします。

すると以下のような内容がアシスタントから返ってきます。( ブラウザの位置情報の共有の設定をしておく必要があります。 )
image.png
この「IBM Location」をクリックすると以下のように最寄りのIBM officeが出てきました!(執筆時、IBMの箱崎事業所にいたので少しわかりづらくなってます、、)
image.png

このようにチャットボットユーザーから位置情報を受け取り、それを活用した情報を返すことができます。

カスタムしてみる

それでは次にこの機能を使ってwatsonx Assisntantを独自にカスタマイズしてみましょう。

先ほどのgithubの画面に戻りましょう。
image.png
ここからカスタマイズできます。リンクを開きます。

image.png
先ほどと同様にファイルをダウンロードします。

それでは独自のカスタマイズをしてみましょう。
元々のデモでは現在地から最寄のIBM事業所までの道のりを表示するデモでした。独自のカスタマイズでは現在地から東京スカイツリーまでの道のりを表示させるようにしましょう。

まずはアクションファイルを変更します

先ほどダウンロードしたアクションファイルをそのまま使用すると、最寄のIBMを探すデモになるので、まずはこのアクションファイルを変更します。
変更箇所は以下のGoogle Map APIのURLです。
image.png
ここの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を選択します。
image.png

アクションが1つだけ設定されているので、そこをクリックします。
image.png

ここのphrasesを一つ消します。
image.png

新しいphrasesを追加しましょう。
「東京スカイツリーまでの道のりを教えてください」と入力します。
image.png

Watsonx Assistantの変更はここまでです。

HTMLのJavascript

先ほどの章でダウンロードしたHTMLを変更します。
まずは先ほど作成したwatsonx Assistantを設定します。変更する点は以下の箇所です。
image.png

ここに入力する値はwatsonx Assistantから探します。
まず左のタブから「Environments」を選択します。
image.png

Web chatを選択します。
image.png

「Embed」を選択します。
image.png

ここにintegrationIDとregion、serviceInstanceIDがあるので、それぞれHTMLファイルに適用します。
image.png

カスタマイズはここまでです。

実際に動かしてみましょう!HTMLファイルをダブルクリック、もしくはブラウザの検索窓にドラッグすることで確認することができます。

終わりに

今回示しましたように、僅か数ステップでiframeを編集でき、Google Mapをチャット内で表示することができました。ここでは行っていませんがSource URLを変えることで他のサービスとの連携も可能です。
私自身、この記事を執筆する中でこの機能について知りましたが、watsonx Assistantはただのチャットbotに留まらない、非常に拡張性に優れたチャットボットであることを理解しました。

以上です、ここまで読んでいただきありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0