Skip to main content

 

OutSystems 11オンラインヘルプ

 

 

OutSystems

OutSystemsアプリケーションにOutSystems.AI Chatbotコンポーネントを設定して使用する

チャットボットはコミュニケーションの最初の接点となり、顧客にサポートを提供して、効率性と顧客満足度の向上を実現します。アプリでチャットボットを作成するには、OutSystems.AI Chatbot Reactiveコンポーネントを使用します。

チャットボットの構成要素は以下のとおりです。

  • UIコンポーネント。ユーザーエクスペリエンスを設計します。OutSystems.AI Chatbot Reactiveにはユーザーインターフェイスが含まれており、これらを利用してチャットボットを自作できます。また、独自UIを備えたチャットボットを開発することもできます。詳細については、ChatbotAdvancedに関するセクションをご覧ください。
  • Webhook。UIとAIプロバイダを接続します。OutSystems.AI Chatbot Reactiveに含まれます。
  • AIプロバイダによるサービス。これを利用するにはAzureアカウントを使用します。

従来のアプリを開発する場合は、「従来のWebアプリのチャットボット」のセクションをご覧ください。

前提条件

チャットボットを作成するには、Microsoft Azureのパラメータをいくつか取得し、Forgeコンポーネントとその依存関係をインストールする必要があります。

Azureパラメータを取得する

このコンポーネントはAIプロバイダとしてMicrosoft Azureが必要です。Azure PortalでWeb App Botリソースを作成し、チャットボットの設定に必要な以下の値を取得します。

  • DirectLineSecret

    [Azure Dashboard > Your Web App Bot > Channels]に移動し、Direct Lineチャネルを追加します秘密鍵を2つ取得します。チャットボットの構成のとき、2つの値のうちいずれかをDirectLineSecretとして使用できます。

  • MicrosoftClientId

    [Azure Dashboard > Your Web App Bot > Configuration]にあります。MicrosoftClientIdは「Microsoft App ID」とも呼ばれます。

    チャットボットで使用するAzureパラメータ

  • MicrosoftClientSecret

    [Azure Dashboard > Your Web App Bot > Configuration]にあります。MicrosoftClientSecretは「Microsoft App Password」とも呼ばれます。

OutSystemsのコンポーネントと依存関係をインストールする

OutSystems.AI Chatbotおよびその依存関係をForgeからダウンロードし、環境にパブリッシュします。

Chatbotブロックを追加してUIと基本ロジックを作成する

アプリケーションでChatbotブロックを使用するには、以下の手順を実行します。

  1. Manage Dependencies]に移動し、ChatbotWebを選択して依存関係として追加します。
  2. Chatbotブロックを追加する画面にドラッグします。
  3. ブロックの各フィールドに値を入力します。

    • DirectLineSecret – 先ほどAzureアプリで取得した値
    • BotName – チャットUIに表示される名前
    • WelcomeMessage – チャットに表示される最初のメッセージ
    • IsInline – 画面内のチャットボットUIの表示方法を指定するブーリアン値この値を[True]に設定した場合、チャットボットを親コンテナの幅で描画します。[False]に設定した場合、チャットボットをモーダルダイアログで表示します。
    • StartsClosed - モーダル内でチャットウィンドウを開始時に開くか閉じるかを定義します。
    • BotImageURL - ボットメッセージの左側に表示される画像のURL。空にした場合、画像は表示されません
    • UserImageURL - ユーザーメッセージの右側に表示される画像のURL。空にした場合、画像は表示されません

  4. Chatbotブロックのプレースホルダのアイコンをカスタマイズします。

  5. パブリッシュしてUIを試してみます。チャットボットとやりとりすることで、Azureボットと適切にリンクされているかどうかも確認できます。

ボットサービスを構成してレスポンスをカスタマイズする

ボットのレスポンスのロジックを作成するには、以下の手順を実行します。

  1. Service Studioで新しいアプリを作成します。Chatbot Webhookテンプレートを選択して、モジュールを作成します。

  2. モジュールをパブリッシュします。また、チャットボットを追加するアプリケーションにモジュールを移動することを推奨します。

  3. Service Centerで、[Factory]タブの[Modules]に移動し、Chatbot Webhookテンプレートに基づいて作成したモジhttps://docs.microsoft.com/en-us/azure/cognitive-services/text-analytics/language-support#language-list-and-statusュールを検索します。

  4. [Site Properties]タブに移動し、MicrosoftClientIdMicrosoftClientSecretを入力します。

  5. Webhookテンプレートに基づいて作成したモジュールで、[Logic > Integrations > REST > MessagingWebhook_V1]に移動し、PostMessageメソッドを開きます。

  6. GetResponseMessageサーバーアクションで、ボットのレスポンスのロジックを追加してカスタマイズします。以下の例は、天気を予測するボットのロジックのカスタマイズ方法を示しています。

  7. [Logic]タブの[Integrations]に移動し、[MessagingWebhook_V1]を右クリックして、[Open Documentation]をクリックします。ブラウザの新しいタブが開き、RESTサービスの詳細が表示されます。

  8. ブラウザのタブからサービスのリクエストURL(この例ではPostMessageエンドポイント)をコピーします。

  9. Azure Bot ServiceのメッセージングエンドポイントをこのエンドポイントURLで更新します。[Azure Dashboard > Your Web App Bot > Settings]に移動し、[Messaging endpoint]フィールドにリクエストURLを入力します。設定を保存します。

ChatbotAdvancedを使用してUIをカスタマイズする

このセクションはオプションで、チャットボットのユーザーインターフェイスを開発する場合に必要です。

ChatbotAdvancedブロックを使用して、ビジネスニーズに応じてカスタマイズされたチャットボットを作成します。独自のUIを作成することができるほか、ChatbotAdvancedブロックで提供したロジックを含む既存のカスタマイズ済みUIを使用することができます。

  1. アプリケーションで[Manage Dependencies]に移動して、[Chatbot]を選択し、依存関係としてChatbotAdvancedブロックとSendMessageサーバーアクションを追加します。

  2. ChatbotAdvancedブロックを画面にドラッグします。

  3. DirectLineSecret入力フィールドに秘密鍵を入力します。

  4. イベント処理のため、新しい画面アクションを2つ作成します。1つはInitializeを、もう1つはMessageReceiveを処理するためのものです。次の2つのローカル変数を画面に追加します。

    • DLConversationデータ型のDLConversation
    • ChannelAccountデータ型のChannelAccount

  5. Initializeを処理する画面アクションに、Assignを追加します。各入力パラメータにローカル変数を割り当てます。

  6. MessageReceiveを処理する画面アクションで、ListAppendを使用し、受信メッセージを入力としてメッセージリストに追加します。

  7. 画面に新しい画面アクションを追加し、画面アクションのロジックフローで、Chatbot WebコンポーネントからSendMessageサーバーアクションを追加します。

  8. SendMessageに、次の入力パラメータを入力します。

    • ConversationId: 先ほど作成したDLConversationローカル変数
    • DirectLineSecret: ブロックで使用したものと同じ値
    • From: 先ほど作成したChannelAccountローカル変数
    • TextMessage: エンドユーザーがボットに送信したメッセージ

従来のWebアプリのチャットボット

従来のアプリにチャットボットを追加するには、OutSystems.AI Chatbot Webコンポーネントをインストールします。

手順に従ってチャットボットのコンポーネントを追加して構成します。ただし、以下の点が異なります。

  • アプリケーションテンプレートの名前はAzure Bot Webhookです。
  • コンポーネントの名前はChabotWebです。
  • BotImageURLプロパティとUserImageURLプロパティは、Webブロックで使用できません。
  • メッセージを送信するアクションを追加する場合、Chatbot WebコンポーネントからサーバーアクションSendMessageを追加します。
  • Was this article helpful?