はじめに
対話型AIプラットフォーム
チャットボットの概要
自然言語処理(NLP)
ボットの概念と用語
クイックスタートガイド
プラットフォームへのアクセス
ボットビルダーの操作
リリースノート
最新バージョン(英語)
以前のバージョン(英語)
廃止機能(英語)
コンセプト
設計
ストーリーボード
ダイアログタスク
ダイアログタスクとは
ダイアログビルダー
ノードタイプ
インテントノード
ダイアログノード
エンティティノード
フォームノード
確認ノード
ロジックノード
ボットアクションノード
サービスノード
Webhookノード
スクリプトノード
グループノード
エージェント転送ノード
ユーザープロンプト
音声通話プロパティ
イベント ハンドラー
ナレッジグラフ
ナレッジグラフの抽出
ナレッジグラフの構築
ボットにナレッジグラフを追加
グラフの作成
ナレッジグラフの構築
既存のソースからFAQを構築
特性、同義語、停止用語
変数ネームスペースの管理
更新
ノード間の質問と回答の移動
用語の編集と削除
質問と応答の編集
ナレッジグラフの分析
通知タスク
スモールトーク
デジタルスキル
デジタルフォーム
デジタルビュー
デジタルビューとは
パネル
ウィジェット
トレーニング
トレーニングとは
機械学習
機械学習とは
モデル検証
ファンダメンタルミーニング
ナレッジグラフ
示唆
ランキングおよび解決
NLPの詳細設定
NLPのガイドライン
インテリジェンス
インテリジェンスとは
コンテキスト
コンテキストインテント
割り込み
複数インテントの検出
エンティティの変更
デフォルトの会話
センチメント管理
トーン分析
テストとデバッグ
ボットと会話
発話テスト
バッチテスト
会話テスト
デプロイ
チャネル
公開
分析
ボットの分析
NLPメトリクス
会話フロー
Usage Metrics
封じ込め測定
カスタムダッシュボード
カスタムダッシュボードとは
メタタグ
カスタムダッシュボードとウィジェット
ユニバーサルボット
ユニバーサルボットとは
ユニバーサルボットの定義
ユニバーサルボットの作成
ユニバーサルボットのトレーニング
ユニバーサルボットのカスタマイズ
他言語の有効化
ストア
プラントと使用
Overview
Usage Plans
Support Plans
Invoices
管理
ボット認証
複数言語対応ボット
個人を特定できる情報の編集
ボット変数の使用
IVRのシステム連携
一般設定
ボット管理
ハウツー
会話スキルの設計
バンキングボットを作成
バンキングボット – 資金の振り替え
バンキングボット – 残高を更新
ナレッジグラフを構築
スマートアラートの予約方法
デジタルスキルの設計
デジタルフォームの設定方法
デジタルビューの設定方法
データテーブルのデータの追加方法
データテーブルのデータの更新方法
Add Data from Digital Forms
ボットのトレーニング
示唆の使用方法
インテントとエンティティのパターンの使用方法
コンテキスト切り替えの管理方法
ボットのデプロイ
エージェント転送の設定方法
ボット関数の使用方法
コンテンツ変数の使用方法
グローバル変数の使用方法
Web SDK Tutorial(英語)
Widget SDK Tutorial(英語)
ボットの分析
カスタムダッシュボードの作成方法
カスタムタグを使ってフィルタリング
管理
ボット管理者コンソール
ダッシュボード
ユーザーの管理
ユーザーの管理
グループの管理
ロール管理
ボット管理モジュール
登録
ユーザーの招待
招待状の一括送信
ユーザーデータのインポート
Active Directoryからユーザーを同期
セキュリティ/コンプライアンス
シングル サインオンの使用
セキュリティ設定
Billing(日本未対応)
  1. ホーム
  2. Docs
  3. Virtual Assistants
  4. How Tos
  5. パネルとウィジェットの設定方法

パネルとウィジェットの設定方法

こちらの案内では、ワンクリックでユーザーが口座の詳細を表示できるバンキングBotのシナリオについて見ていきます。ウィジェットを使用してダイアログタスクをトリガーし、適切なメッセージを表示する方法と、パネルを使用してこれらのウィジェットを保持する方法を説明いたします。また、ウィジェットSDKを使用してパネルをウェブ/モバイルクライアント上でホストする方法についてもご説明します。パネルとウィジェットとは何か、またKore.aiのBotプラットフォームにどのように導入されるかについての詳細は、こちらを参照してください

例題

以下のシナリオに取り組むバンキングBotを検討します。 このドキュメントでは、パネル、ウィジェット、ウィジェットSDK、ウェブ/モバイルクライアントを使用して、上記のすべてのシナリオを実現するための詳細な手法を説明します。

Pre-requisites

  • Botビルドナレッジ
  • 以下に説明するダイアログを持つバンキングBot:
    • 残高取得-ユーザーが口座番号と口座種類を入力し、利用可能な残高を表示するダイアログタスクです。

設定

次の各シナリオを1つずつ考えてみましょう。

  1. ウィジェットSDKチャネルを使用して特定の口座の残高を表示するダイアログタスクです。
  2. ウィジェットは上記のダイアログタスクをトリガーし、ウィジェットとパネルをセットします。
  3. パネルは静的なJSONテンプレートメッセージを表示するウィジェットを保持します。

メッセージテンプレート

まず、ウィジェットからトリガーされるダイアログタスクには、ウィジェットSDKチャネル用にメッセージ定義が必要となります。 ここでは口座の詳細を表示するために次のメッセージを使用しています。

var output = 'The Balance in your' + context.entities.AccountType + ' account is ' + context.GetAccountBalance.response.body.Balance; var message = { "elements": [ { "title": "Account View", "sub_title": output, "icon": "https://kore.ai/wp-content/uploads/sites/35/banking-home.png", } ] }; print(JSON.stringify(message));

ウィジェットの設定

ダイアログタスクのウィジェット

ダイアログタスクをトリガーする2つのウィジェットを作成します。当座預金:まず、ユーザーの現在の口座残高を表示するようにウィジェットを設定する方法を見ていきましょう。

  • 左側のナビゲーションメニューから、Botタスクの下部にあるパネルとウィジェットを開きます。
  • ウィジェットを作成ボタンをクリックします。
  • ウィジェット名と表示名を付けます。
  • ソースを設定します。ダイアログタスクをトリガーしているため、ダイアログタスクを選択します。
  • ユースケースに従って、ダイアログタスクを選択残高取得として選択します。
  • エンティティの割り当てで、ダイアログタスクの要件に従って次のエンティティを設定します(入力時に表示されるドロップボックスから選択できます)。
    • AccountType当座
    • AccountNumber1.「ダイアログタスクを選択」ドロップダウンの横にあるダイアログタスクを開くアイコンを使用して、ダイアログを開き、必要なエンティティを確認することができます。

  • ウィジェットを保存します。
  • ウィジェットを編集し、実行とプレビューをクリックして、ウィジェットのアウトプットを確認します。
  • プレビューとして保存を行うと、アウトプットをウィジェットに対するサムネイルとして設定します。

普通預金口座 同じ口座番号の普通預金口座から、口座の表示のために上記の手順を繰り返します。

パネルの設定

このようにして作成されたウィジェットは、ランタイムの表示と実行のためにパネルに添付する必要があります。

  1. パネルを作成ボタンをクリックして、パネルを作成します。
  2. 新しいパネルウィンドウの中に、パネル名、表示名、アイコンURLを入力します。
  3. ウィジェットを追加ボタンをクリックして、パネル管理ウィンドウを開きます。
  4. ウィジェットを追加を使用して、表示するウィジェット(この場合は口座残高と当座預金のウィジェット)を選択して追加します。
  5. テストボタンを使用して、ウィジェットの動作を確認します。

JSONウィジェットのパネル

静的なJSONコンテンツを使用してウィジェットを作成する方法をご説明します。JSONを使用して円グラフを表示させます。

  1. パネルを作成をクリックして新しいパネルを作成しJSONの例と名前を付けます。
  2. 詳細アイコンを選択してパネル管理を選択すると、ウィジェットを作成のオプションが見つかりますので、それをクリックします。
  3. 新しいウィジェットダイアログで名前を入力し、ソースをJSONに設定します。
  4. JavaScriptエディタには次のように入力します。これは、交通費、食費、宿泊費などのさまざまな局面で費やされた金額の内訳を円グラフで表示するためのメッセージテンプレートです。サポートされているメッセージテンプレートの詳細については、こちらを参照してください
    var message = { "templateType": "piechart", "pie_type": "regular", "title": "Summary", "description": "monthly report", "elements": [ { "title": "Airlines", "value": "1264.0", "displayValue": "$ 1,234" }, { "title": "Hotels", "value": "568.10", "displayValue": "$ 568" }, { "title": "Food", "value": "324.50", "displayValue": "$ 324" } ] }; print(JSON.stringify(message));
  5. パネルをテストすると、両方のパネルアイコンが表示されますので、それぞれをクリックして実際の動作を確認してください。

公開

Botを公開するには、まずチャネルを有効にします。

  1. 左側のナビゲーションメニューから、公開するチャネルを選択します。このユースケースでは、ウェブ/モバイルクライアントとウィジェットSDKのチャネルの両方を選択します。
  2. チャネルを選択し、設定タブからBot名BotIdクライアントIdクライアントシークレットをメモします。
  3. 左側のナビゲーションメニューから、公開オプションを選択します。「タスクと言語」セクションで、開発したウィジェットとパネルが公開用に選択されていることを確認します。
  4. 公開として続行します。

ホスティング

パネルはウェブ/モバイルクライアントでホストします。ウィジェットSDKの使用方法の詳細についてはこちらをご覧ください

  1. Kore.aiウィジェットSDKをダウンロードするには、https://github.com/Koredotcom/web-kore-sdkにアクセスし、ダウンロードをクリックします。
  2. すべてのファイルを…/SDKApp/sdkフォルダに展開します。
  3. 上記のSDKフォルダを開き、UIフォルダに移動します。
  4. 次を開きます。 kore-config.js
  5. 上記のセクションでコピーしたウェブ/モバイルクライアントのチャネル設定のbotOptionsを設定します。
    • botOptions.botInfo
    • botOptions.clientId
    • botOptions.clientSecret

    要件に応じて他の変更内容を加えます。

  6. 次を開きます。 kore-widgets-config.js
  7. 上記のセクションでコピーしたウィジェットSDKのチャネル設定のbotOptionsWizを設定します。
    • botOptionsWiz.botInfo
    • botOptionsWiz.clientId
    • botOptionsWiz.clientSecret

    要件に応じて他の変更内容を加えます。

  8. ブラウザでindex_widgets_chat.htmlファイルを開き、ウィジェットと共にチャットウィンドウを表示します。
  9. パネルを個別にホストする場合は、index_widgets.htmlファイルを使用します。ウェブサイトで同じものをホストする方法については、GitHubを参照してください。

パネルとウィジェットの設定方法

こちらの案内では、ワンクリックでユーザーが口座の詳細を表示できるバンキングBotのシナリオについて見ていきます。ウィジェットを使用してダイアログタスクをトリガーし、適切なメッセージを表示する方法と、パネルを使用してこれらのウィジェットを保持する方法を説明いたします。また、ウィジェットSDKを使用してパネルをウェブ/モバイルクライアント上でホストする方法についてもご説明します。パネルとウィジェットとは何か、またKore.aiのBotプラットフォームにどのように導入されるかについての詳細は、こちらを参照してください

例題

以下のシナリオに取り組むバンキングBotを検討します。 このドキュメントでは、パネル、ウィジェット、ウィジェットSDK、ウェブ/モバイルクライアントを使用して、上記のすべてのシナリオを実現するための詳細な手法を説明します。

Pre-requisites

  • Botビルドナレッジ
  • 以下に説明するダイアログを持つバンキングBot:
    • 残高取得-ユーザーが口座番号と口座種類を入力し、利用可能な残高を表示するダイアログタスクです。

設定

次の各シナリオを1つずつ考えてみましょう。

  1. ウィジェットSDKチャネルを使用して特定の口座の残高を表示するダイアログタスクです。
  2. ウィジェットは上記のダイアログタスクをトリガーし、ウィジェットとパネルをセットします。
  3. パネルは静的なJSONテンプレートメッセージを表示するウィジェットを保持します。

メッセージテンプレート

まず、ウィジェットからトリガーされるダイアログタスクには、ウィジェットSDKチャネル用にメッセージ定義が必要となります。 ここでは口座の詳細を表示するために次のメッセージを使用しています。

var output = 'The Balance in your' + context.entities.AccountType + ' account is ' + context.GetAccountBalance.response.body.Balance; var message = { "elements": [ { "title": "Account View", "sub_title": output, "icon": "https://kore.ai/wp-content/uploads/sites/35/banking-home.png", } ] }; print(JSON.stringify(message));

ウィジェットの設定

ダイアログタスクのウィジェット

ダイアログタスクをトリガーする2つのウィジェットを作成します。当座預金:まず、ユーザーの現在の口座残高を表示するようにウィジェットを設定する方法を見ていきましょう。

  • 左側のナビゲーションメニューから、Botタスクの下部にあるパネルとウィジェットを開きます。
  • ウィジェットを作成ボタンをクリックします。
  • ウィジェット名と表示名を付けます。
  • ソースを設定します。ダイアログタスクをトリガーしているため、ダイアログタスクを選択します。
  • ユースケースに従って、ダイアログタスクを選択残高取得として選択します。
  • エンティティの割り当てで、ダイアログタスクの要件に従って次のエンティティを設定します(入力時に表示されるドロップボックスから選択できます)。
    • AccountType当座
    • AccountNumber1.「ダイアログタスクを選択」ドロップダウンの横にあるダイアログタスクを開くアイコンを使用して、ダイアログを開き、必要なエンティティを確認することができます。

  • ウィジェットを保存します。
  • ウィジェットを編集し、実行とプレビューをクリックして、ウィジェットのアウトプットを確認します。
  • プレビューとして保存を行うと、アウトプットをウィジェットに対するサムネイルとして設定します。

普通預金口座 同じ口座番号の普通預金口座から、口座の表示のために上記の手順を繰り返します。

パネルの設定

このようにして作成されたウィジェットは、ランタイムの表示と実行のためにパネルに添付する必要があります。

  1. パネルを作成ボタンをクリックして、パネルを作成します。
  2. 新しいパネルウィンドウの中に、パネル名、表示名、アイコンURLを入力します。
  3. ウィジェットを追加ボタンをクリックして、パネル管理ウィンドウを開きます。
  4. ウィジェットを追加を使用して、表示するウィジェット(この場合は口座残高と当座預金のウィジェット)を選択して追加します。
  5. テストボタンを使用して、ウィジェットの動作を確認します。

JSONウィジェットのパネル

静的なJSONコンテンツを使用してウィジェットを作成する方法をご説明します。JSONを使用して円グラフを表示させます。

  1. パネルを作成をクリックして新しいパネルを作成しJSONの例と名前を付けます。
  2. 詳細アイコンを選択してパネル管理を選択すると、ウィジェットを作成のオプションが見つかりますので、それをクリックします。
  3. 新しいウィジェットダイアログで名前を入力し、ソースをJSONに設定します。
  4. JavaScriptエディタには次のように入力します。これは、交通費、食費、宿泊費などのさまざまな局面で費やされた金額の内訳を円グラフで表示するためのメッセージテンプレートです。サポートされているメッセージテンプレートの詳細については、こちらを参照してください
    var message = { "templateType": "piechart", "pie_type": "regular", "title": "Summary", "description": "monthly report", "elements": [ { "title": "Airlines", "value": "1264.0", "displayValue": "$ 1,234" }, { "title": "Hotels", "value": "568.10", "displayValue": "$ 568" }, { "title": "Food", "value": "324.50", "displayValue": "$ 324" } ] }; print(JSON.stringify(message));
  5. パネルをテストすると、両方のパネルアイコンが表示されますので、それぞれをクリックして実際の動作を確認してください。

公開

Botを公開するには、まずチャネルを有効にします。

  1. 左側のナビゲーションメニューから、公開するチャネルを選択します。このユースケースでは、ウェブ/モバイルクライアントとウィジェットSDKのチャネルの両方を選択します。
  2. チャネルを選択し、設定タブからBot名BotIdクライアントIdクライアントシークレットをメモします。
  3. 左側のナビゲーションメニューから、公開オプションを選択します。「タスクと言語」セクションで、開発したウィジェットとパネルが公開用に選択されていることを確認します。
  4. 公開として続行します。

ホスティング

パネルはウェブ/モバイルクライアントでホストします。ウィジェットSDKの使用方法の詳細についてはこちらをご覧ください

  1. Kore.aiウィジェットSDKをダウンロードするには、https://github.com/Koredotcom/web-kore-sdkにアクセスし、ダウンロードをクリックします。
  2. すべてのファイルを…/SDKApp/sdkフォルダに展開します。
  3. 上記のSDKフォルダを開き、UIフォルダに移動します。
  4. 次を開きます。 kore-config.js
  5. 上記のセクションでコピーしたウェブ/モバイルクライアントのチャネル設定のbotOptionsを設定します。
    • botOptions.botInfo
    • botOptions.clientId
    • botOptions.clientSecret

    要件に応じて他の変更内容を加えます。

  6. 次を開きます。 kore-widgets-config.js
  7. 上記のセクションでコピーしたウィジェットSDKのチャネル設定のbotOptionsWizを設定します。
    • botOptionsWiz.botInfo
    • botOptionsWiz.clientId
    • botOptionsWiz.clientSecret

    要件に応じて他の変更内容を加えます。

  8. ブラウザでindex_widgets_chat.htmlファイルを開き、ウィジェットと共にチャットウィンドウを表示します。
  9. パネルを個別にホストする場合は、index_widgets.htmlファイルを使用します。ウェブサイトで同じものをホストする方法については、GitHubを参照してください。
メニュー