機械翻訳について

機能

Oracle Web SDKで構成できる機能を次に示します。

絶対タイムスタンプと相対タイムスタンプ

  • 機能フラグ: timestampMode: 'relative' | 'absolute' (default: 'relative' )
  • 機能構成: timestampMode

チャット・メッセージの絶対タイムスタンプまたは相対タイムスタンプを有効にできます。 絶対タイムスタンプには、各メッセージの正確な時間が表示されます。 相対タイムスタンプは最新のメッセージにのみ表示され、前のメッセージに対する秒数、日数、時間数、月数または年数の相対的な時間を表します。
「relative-v-absolute-timestamps.pngの説明は以下のとおりです
図relative-v-absolute-timestamps.pngの説明」
絶対タイムスタンプによって得られる精度は、アーカイブ・タスクに最適です。ただし、チャット・セッションの限られたコンテキストでは、ユーザーがタイムスタンプを比較してメッセージ間の時間の経過を調べる必要があるため、この精度はユーザー・エクスペリエンスから低下します。 相対タイムスタンプを使用すると、ユーザーはすぐに理解できる「直前」や「しばらく前」などの用語を使用して会話を簡単に追跡できます。 相対的なタイムスタンプにより、ユーザー・エクスペリエンスが別の方法で向上し、開発タスクも簡素化されます: 相対タイムスタンプはメッセージを秒、日、時間、月または年前の時点でマークするため、タイムゾーン用に変換する必要はありません。

相対タイムスタンプの動作

前述のように、相対タイムスタンプは最新のメッセージにのみ表示されます。 ここでは、その動作について少し詳しく説明します。 タイムスタンプ(timestampMode: 'relative'またはtimestampMode: 'default')を構成すると、1日の最初のメッセージの前にヘッダーとして絶対タイムスタンプが表示されます。 このヘッダーは、会話がクリアされておらず、古いメッセージが履歴でまだ使用可能な場合に表示されます。
first-message-day.pngの説明は以下のとおりです
図first-message-day.pngの説明

相対タイムスタンプは、新しいメッセージごとに表示されます。
most-recent-message-timestamp.pngの説明は以下のとおりです
「図most-recent-message-timestamp.pngの説明」
このタイムスタンプは、新しいメッセージが受信されるまで、次の一定間隔(秒、分など)で更新されます。
  • 最初の10s
  • 10s-60sの間
  • 1m-60m間の毎分
  • 1hr-24hr間の毎時
  • 1d-30d間の毎日
  • 1m-12m間の毎月
  • 初年度以降の毎年
新しいメッセージがチャットにロードされると、前のメッセージの相対タイムスタンプが削除され、前のメッセージに対する相対時間を示す新しいタイムスタンプが新しいメッセージに表示されます。 その時点で、次のメッセージが到着するまで相対的なタイムスタンプが更新されます。

相対タイムスタンプの追加

相対タイムスタンプを追加するには:
  • 相対タイムスタンプの有効化 - timestampMode: 'relative'
  • オプションのステップ:
    • 相対タイムスタンプの色を設定 - timestamp: ' <a hexadecimal color value> '
    • 多言語スキルの場合は、次のキーを使用してタイムスタンプ・テキストをローカライズします:
      キー デフォルト・テキスト 説明
      relTimeNow Now 最初の9秒間表示される初期タイムスタンプ。 このタイムスタンプは、会話がリセットされたときにも表示されます。
      relTimeMoment a few moments ago 10～ 60秒間表示されます。
      relTimeMin {0}min ago 毎分更新
      relTimeHr {0}hr ago 毎時更新
      relTimeDay {0}d ago 最初の月の毎日更新します。
      relTimeMon {0}mth ago 最初の12か月間、毎月更新されます。
      relTimeYr {0}yr ago 毎年更新します。
    • timeStampFormat設定を使用して、各日の最初のメッセージの前に表示される絶対タイムスタンプの書式を変更します。

オートコンプリート

  • 機能フラグ: enableAutocomplete: true (default: false )
  • クライアント側キャッシュの有効化: enableAutocompleteClientCache
自動完了では、直接入力と提案の両方として使用できる有効なフレーズを指定することで、ユーザーのエラーを最小限に抑えます。 この機能を有効にするには、ウィジェット設定をenableAutocomplete: trueで更新し、最適化した一連のユーザー・メッセージを「インテントの作成」ページ」に追加します。 有効にすると、ユーザーが3文字以上を入力した後、ポップアップにこれらのメッセージが表示されます。 ユーザー入力と一致する推奨メッセージ内の単語は、太字でオフに設定されています。 そこから、ユーザーは独自の入力を入力したり、自動完了メッセージの1つを選択できます。

ノート:

この機能は、WebSocketでのみ使用できます。

autocomplete-phrase-list.pngの説明は以下のとおりです
図autocomplete-phrase-list.pngの説明

デジタル・アシスタントをOracle Webチャネルに関連付けると、そのデジタル・アシスタントに登録されているスキルに構成されているすべてのサンプル発話が、自動補完候補として使用できます。

フィールドの自動送信

フィールドのautoSubmitプロパティがtrueに設定されている場合、クライアントは、これまでに入力された有効なフィールド値を含むsubmittedFieldマップを含むFormSubmissionMessagePayloadを送信します。 まだ設定されていないフィールド(必須かどうかに関係なく)、またはクライアント側の検証に違反するフィールドは、submittedFieldマップに含まれません。 自動発行フィールド自体に有効でない値が含まれている場合、発行メッセージは送信されず、その特定のフィールドにクライアント・エラー・メッセージが表示されます。 自動発行が成功すると、フォーム送信メッセージのpartialSubmitFieldがautoSubmitフィールドのidに設定されます。

前の入力フォームの置換

フィールドのautosubmitがtrueに設定されているため、エンド・ユーザーがフォームを送信すると、スキルは新しいEditFormMessagePayloadを送信できます。 このメッセージは、前の入力フォーム・メッセージを置き換える必要があります。 replaceMessageチャネル拡張プロパティをtrueに設定すると、以前の入力フォーム・メッセージを現在の入力フォーム・メッセージで置き換えるようにSDKが有効になります。

自動RTLレイアウト

<html dir="rtl">でホスト・ページのベース方向が右から左(RTL)の言語に対応するように設定されている場合、チャット・ウィジェットは自動的に左側にレンダリングされます。 RTL言語のウィジェットは左揃えになっているため、そのアイコンおよびテキスト要素も同様に再配置されます。 アイコンは、左から右(LTR)へのレンダリングでは反対の位置にあります。 たとえば、送信、マイクおよび添付アイコンは、添付アイコンが入力フィールドの右側にあるときに、マイクおよび送信アイコンが入力フィールドの左側を占めるように反転されます。 inputPlaceholderやchatTitleなどのテキスト要素の位置合せは、テキスト言語がLTRかRTLかによって異なります。 RTL言語の場合、inputPlaceHolderテキストおよびchatTitleは入力フィールドの右側に表示されます。

アバター

デフォルトでは、チャット内のメッセージにアバターは付属していません。 ただし、次のパラメータを使用すると、スキルがライブ・エージェント・サポートと統合されている場合に、スキル、ユーザーおよびエージェント・アバターのアバターを構成できます。
  • avatarBot - イメージ・ソースのURL、またはスキル・メッセージの横に表示されるSVGイメージのソース文字列。
  • avatarUser - イメージ・ソースのURL、またはユーザー・メッセージの横に表示されるSVGイメージのソース文字列。 また、スキルにライブ・エージェント統合がある場合は、エージェント・メッセージに対して別のアイコンを表示するようにSDKを構成できます。
  • avatarAgent - イメージ・ソースのURL、またはエージェント・メッセージとともに表示されるSVGイメージのソース文字列。 この値が指定されていないが、avatarBotが設定されている場合は、かわりにavatarBotアイコンが使用されます。

ノート:

これらの設定は、初期化設定でのみ渡すことができます。 動的に変更することはできません。 
new WebSDK({
URI: '<URI>',
//...,
icons: {
    avatarBot: '../assets/images/avatar-bot.png',
    avatarUser: '../assets/images/avatar-user.jpg',
    avatarAgent: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 9c2.7 0 5.8 1.29 6 2v1H6v-.99c.2-.72 3.3-2.01 6-2.01m0-11C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg>'
}
})

クロス・タブ会話同期化

機能フラグ: enableTabsSync: true (default: true )

様々な理由から、ユーザーがwebサイトを複数のタブで開く必要がある場合があります。 enableTabsSync: trueを使用すると、接続パラメータ(URI、channelIdおよびuserId)がすべてのタブで同じであれば、任意のタブからユーザーの会話を同期および続行できます。 この機能により、ユーザーは任意のタブのスキルからのメッセージを表示し、同じタブまたは他の任意のタブから応答できます。 また、ユーザーが1つのタブで会話履歴をクリアした場合、他のタブからも削除されます。 ユーザーが1つのタブでチャット言語を更新すると、チャット言語が他のタブに同期されます。

いくつかの制限事項があります:
  • 新規タブは、オープン時にユーザーとスキルの間の新規メッセージの既存のタブと同期されます。 会話履歴からのメッセージを表示するようにSDKを構成していない場合、新しいタブの初期チャット・ウィジェットは開いたときに空になります。
  • 会話履歴を表示するようにSDKを構成している場合、既存のタブの現在のチャットからのメッセージは、新しいタブで会話履歴の一部として表示されます。 disablePastActionsをallまたはpostbackに設定すると、新しいタブ内のメッセージのアクションとの相互作用が妨げられる場合があります。
  • 現在、Safariブラウザはこの機能をサポートしていません。

カスタム・メッセージ・レンダリング

機能フラグ: delegate.render: (message) => boolean (default: undefined)

この機能を使用して、デフォルトのメッセージ・レンダリングを独自のカスタム・メッセージ・テンプレートでオーバーライドします。 この機能を使用するには、メッセージ・モデルを入力として取得し、出力としてブール・フラグを返すrenderデリゲート関数を実装する必要があります。 特定のメッセージ・タイプのデフォルトのレンダリングをカスタム・レンダリングに置き換えるには、trueを返す必要があります。 falseが返された場合、かわりにデフォルトのメッセージがレンダリングされます。

ノート:

カスタム・レンダリングでは、すべてのアクション・クリック処理およびアクションの無効化または有効化を明示的に処理する必要があります。
メッセージ・レンダリングには、任意の外部フレームワーク・コンポーネントを使用できます。 React、Angular、Oracle JavaScript Extension Toolkit (JET)などのフレームワークでこの機能を使用する方法を確認するには、SDKのsamplesディレクトリに含まれる統合サンプルを参照してください。

デフォルト・クライアント・レスポンス

機能フラグ: enableDefaultClientResponse: true (default: false )

このフラグは、スキル・レスポンスが遅延した場合、またはスキル・レスポンスがまったくない場合に、クライアント側のデフォルトのレスポンスと入力インジケータを提供するために使用します。 ユーザーが最初のメッセージ/問合せを送信したが、defaultGreetingTimeoutフラグで設定された秒数内にスキルが応答しない場合、スキルはdefaultGreetingMessage翻訳文字列を使用して構成された挨拶メッセージを表示できます。 次に、クライアントはスキル・レスポンスを再度確認します。 スキル・レスポンスを受信したが、受信されていない場合は、クライアントはdefaultWaitMessageIntervalで設定された間隔で待機メッセージ(defaultWaitMessage翻訳文字列で構成)を表示します。 スキル・レスポンスの待機がtypingIndicatorTimeoutフラグで設定されたしきい値を超えると、クライアントはユーザーに申し訳ないレスポンスを表示し、入力インジケータを停止します。 defaultSorryMessage翻訳文字列を使用して、sorryレスポンスを構成できます。

委任

機能構成: delegate

委任機能では、会話での特定のイベントの前にコールバックを受信するように委任を設定します。 委任を設定するには、delegateパラメータを渡すか、setDelegateメソッドを使用します。 デリゲート・オブジェクトには、オプションでbeforeDisplay, beforeSend, beforePostbackSend, beforeEndConversationおよびrenderデリゲート関数を含めることができます。 
const delegate = {
    beforeDisplay: function(message) {
        return message;
    },
    beforeSend: function(message) {
        return message;
    },
    beforePostbackSend: function(postback) {
        return postback;
    },
    beforeEndConversation: function(message) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(message);
            }, 2000);
        });
    },
    render: function(message) {
        if (message.messagePayload.type === 'card') {
            // Perform custom rendering for card using msgId
            return true;
        }
        return false;
    }
}

Bots.setDelegate(delegate);

beforeDisplay

beforeDisplay代理人は、スキル・メッセージを会話に表示する前に変更できます。 代理人から返されたメッセージは、元のメッセージのかわりに表示されます。 代理人がnull、undefined、falseなどの偽の値を返す場合、返されたメッセージは表示されません。 代理人がエラーになった場合、代理人が返すメッセージのかわりに元のメッセージが表示されます。 「ウィジェット内WebViewリンク動作の選択的な適用」へのbeforeDisplay委任を使用します。

beforeSend

beforeSendデリゲートでは、sendMessageの一部としてチャット・サーバーに送信される前にユーザー・メッセージを変更できます。 委任者が返すメッセージは、元のメッセージではなくスキルに送信されます。 委任者がnull、undefined、falseなどの偽の値を返す場合、委任によって返されるメッセージは送信されません。 エラーになった場合、委任者が返したメッセージのかわりに元のメッセージが送信されます。

beforePostbackSend

beforePostbackSendの委任は、beforeSendと類似しており、ユーザーからのメッセージのポストバックに適用されるだけです。 委任によって返されたポストバックは、スキルに送信されます。 null、undefined、falseのような偽造値が返される場合は、メッセージは送信されません。

beforeEndConversation

beforeEndConversationデリゲートでは、一部のプリエグジット・アクティビティを実行する必要がある場合に、会話フローの最後にインターセプションを許可します。 functionは、入力パラメータとして終了メッセージを受信し、Promiseを返す必要があります。 このPromiseが終了メッセージで解決されると、CloseSession終了メッセージがチャット・サーバーに送信されます。 それ以外の場合、終了メッセージは送信されません。 
...

 beforeEndConversation: function(message) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(message);
            }, 2000);
        });
    }

render

renderデリゲートを使用すると、デフォルトのメッセージ・レンダリングをオーバーライドできます。 renderデリゲート関数が特定のメッセージ・タイプに対してtrueを返す場合、WebSDKはデフォルトのメッセージ・レンダリングではなくプレースホルダー・スロットを作成します。 プレースホルダーを識別するには、メッセージのmsgIdを要素のidとして追加します。 renderデリゲート関数では、この識別子を使用してプレースホルダーの参照を取得し、カスタム・メッセージ・テンプレートをレンダリングできます。 「カスタム・メッセージ・レンダリング」を参照してください。

ドラッグ可能な起動ボタンとウィジェット

機能フラグ: enableDraggableButton: true (default: false )

特に画面サイズが制限されているモバイル・デバイスでは、チャット・ウィジェットまたは起動ボタンによってwebページのコンテンツをブロックできる場合があります。 enableDraggableButton: trueを設定すると、ビューをブロックしているときに、ユーザーがウィジェットまたは起動ボタンを邪魔にならないようにドラッグできるようになります。 このフラグは起動ボタンのロケーションにのみ影響し、チャット・ウィジェットには影響しません: ウィジェットは元のロケーションから開きます。

動的型付けインジケータ

機能フラグ: showTypingIndicator: 'true'

入力インジケータは、スキルがレスポンスを準備しているため、メッセージの送信を保留するようユーザーに指示します。 デフォルトでは、showTypingIndicator: 'true'を使用してSDKを初期化する場合、スキルには最初のレスポンスの入力インジケータのみが表示されます。 最適なユーザー・エクスペリエンスを得るには、スキルに動的入力インジケータが必要です。これは、各スキル・レスポンスの後に表示される入力インジケータです。 スキルがタイムアウトしていないことをユーザーに認識させる以外に、各スキル・レスポンスの後に入力インジケータを表示することで、ユーザーがレスポンスをインタージェクトできない一連の個別のメッセージでスキルに応答するようにkeepTurnプロパティが指示する場合など、ユーザーが早期にメッセージを送信しようとしないようにできます。

各スキル・レスポンスの後に入力インジケータを有効にするには:
  • showTypingIndicatorをtrueに設定してSDKを初期化します。
  • showTypingIndicator APIのコール
showTypingIndicatorでは、次の場合にのみ動的入力インジケータの表示を有効にできます:
  • ウィジェットがOracleチャット・サーバーに接続されます。 接続を閉じると、動的入力インジケータは表示されません。
  • SDKは、showTypingIndicatorを trueに設定して初期化されています。

    ノート:

    SDKがヘッドレス・モードで使用されている場合、このAPIは機能しません。
入力インジケータは、オプション・プロパティtypingIndicatorTimeoutによって設定された期間(デフォルト設定は20秒)について表示されます。 入力インジケータがすでに表示されている間にAPIが呼び出された場合、タイマーはリセットされ、インジケータは非表示になります。

入力インジケータは、ユーザーがスキルのメッセージを受信するとすぐに消えます。 ユーザーがメッセージを入力するか、添付ファイルをアップロードするか、ロケーションを送信すると、入力インジケータがチャット・ウィンドウの下部に移動します。

埋込みリンクの動作の制御

  • カスタム処理: linkHandler: { onclick: <function>, target: '<string>' }
  • ウィジェット内webビュー : linkHandler: { target: 'oda-chat-webview' }
  • 新しいウィンドウ: openLinksInNewWindow: 'true'

Web SDKには、会話内のURLリンクのターゲットのロケーションを制御するための様々な方法が用意されています。 デフォルトでは、会話内の任意のリンクをクリックすると、リンクされたURLが新しいタブに開きます。 linkHandler設定を使用して、ウィジェットを特定のターゲットで開くように構成できます。

linkHandler設定では、targetおよびonclick.という2つのオプション・フィールドを使用できるオブジェクトが想定されます ターゲット・フィールドは、リンクされたURLが表示されるロケーション(タブ、ウィンドウまたは<iframe>)を識別する文字列を受け入れます。 次のキーワードには、URLをロードする場所に関する特別な意味があります:
  • '_self': 現在のブラウジング・コンテキスト。
  • '_blank': 通常は新しいタブですが、代わりに新しいウィンドウを開くようにブラウザを構成できます。
  • '_parent': 現在のブラウジング・コンテキスト。 親ブラウジング・コンテキストがない場合、動作はデフォルトで '_self'に設定されます。
  • '_top': 最上位のブラウジング・コンテキスト(つまり、現在のコンテキストの祖先である最も高いコンテキスト)。 祖先がない場合、'_self'として動作します。 
settings = {
    ...,
    linkHandler: { target: '_blank'}
};

const Bots = new WebSDK(settings);
iframe内のリンクを開くには、ターゲット・プロパティでその名前属性を渡します。
<iframe name="container" width="400" height="300"></iframe>

<script>
  settings = {
      ...
      linkHandler: { target: 'container'}
  }

  const Bots = new WebSDK(settings);
</script>
linkHandlerの onclickプロパティを使用すると、会話内のすべてのアンカー・リンクにイベント・リスナーを追加できます。 リスナーは、リンクを開く前に起動され、リンクに基づいてアクションの実行に使用できます。 リスナーは、クリック・アクションによって生成されるパラメータとしてイベント・オブジェクトを渡します。 リスナーからfalseを戻すことで、リンクが開かないようにできます。 リスナーは、クリックされたアンカー要素にもバインドされます。 コンテキストは、リスナー内のHTMLAnchorElementを参照します。 linkHandler設定の1つまたは両方のプロパティを設定できますが、フィールドの1つを渡す必要があります。 
linkHandler: {
    onclick: function(event) {
        console.log('The element clicked is', this);
        console.log('The event fired from the click is', event);
        console.log('The clicked link is', event.target.href);
        console.log('Preventing the link from being opened');
        return false;
    }
}

ヒント:

一部のシナリオでは、ブラウザ・プリファレンスをオーバーライドして、新しいウィンドウでリンクを明示的に開くことができます。 これを行うには、設定でopenLinksInNewWindow: true を渡します。

埋込みモード

  • 機能フラグ: embedded: true (default: false )
  • ターゲット・コンテナ要素のIDを渡します: targetElement
チャットを実行するウィジェットのルック・アンド・フィールをカスタマイズするその他の設定に加えて、次の方法でWebページにウィジェット自体を埋め込むことができます:
  • embedded: trueの追加。
  • ウィジェット・コンテナとして使用されるDOM要素(HTMLコンポーネント)のIDを使用してtargetElementプロパティを定義します(次のスニペットの'container-div'など)。 
<head>
    <meta charset="utf-8">
    <title>Oracle Web SDK Sample</title>
    <script src="scripts/settings.js"></script>
     <script>
        const chatSettings = {
            URI: YOUR_URI,
            channelId: YOUR_CHANNELID,
            embedded: true,
            targetElement: 'container-div'
...

    </script> 
</head>
<body>
    <h3 align="center">The Widget Is Embedded Here!</h3>
</body>
           <div id="container-div" 
                style="height: 600px; width: 380px; padding: 0; text-align: initial">
            </div>

ノート:

ウィジェットはコンテナの全幅と高さを占有します。 コンテナに対応できない場合、ウィジェットはページに表示されません。

会話セッションの終了

機能フラグ: enableEndConversation: true (default: true )

バージョン21.12以降、SDKは、デフォルトでチャット・ウィジェット・ヘッダーにクローズ・ボタンを追加し、ユーザーが現在のセッションを終了できるようにします(enableEndConversation: true)。
これはチャット・ウィジェット・ヘッダーの閉じるボタンのイメージです。

ユーザーがこのボタンをクリックすると、SDKによって確認プロンプトが提示されます(会話を終了しますか?) これにより、会話履歴もクリアされます。)endConversationConfirmMessageおよびendConversationDescriptionキーでカスタマイズできます。 ユーザーがYesをクリックしてプロンプトを閉じると、SDKは、現在の会話セッションを終了とマークするイベント・メッセージをスキルに送信します。 次に、インスタンスはスキルから切断し、チャット・ウィジェットを縮小し、現在のユーザーの会話履歴を消去します。 また、登録できるchatendイベントも発生しています: 
Bots.on('chatend', function() {
    console.log('The conversation is ended.');
});
その後、チャット・ウィジェットを開くと、新しい会話セッションが開始されます。

ノート:

Bots.endChat()メソッド(「ダウンロード」ページから使用可能なOracle Web SDKに付属しているリファレンスを参照)をコールして、セッションを終了することもできます。 このメソッドは、SDKが「ヘッドレス・モード」で初期化されるときにコールできます。

メッセージの最初のアクションにフォーカス

機能フラグ: focusOnNewMessage: 'action' (default: 'input' )

キーボード・ベースのナビゲーション(パワー・ユーザーを含む)を希望するユーザーの場合は、メッセージ内のユーザー入力フィールドから最初(または左端)のアクション・ボタンにフォーカスを移動できます。 デフォルトでは、チャット・ウィジェットは、新しいメッセージのたびにフォーカスをユーザー入力フィールドに戻します(focusOnNewMessage: 'input')。 これは、ユーザーからの多数のテキスト入力を必要とするダイアログ・フローに適していますが、ダイアログ・フローにアクションを含む多数のメッセージが含まれている場合、ユーザーはマウスまたはリバース・タブ・ナビゲーションを介してのみこれらのアクションを選択できます。 このユースケースでは、focusOnNewMessage: 'action'を設定することで、受信時にスキル・メッセージの最初のアクション・ボタンにフォーカスを変更できます。 メッセージにアクションが含まれていない場合、フォーカスはユーザー入力フィールドに設定されます。

キーボード・ショートカットとホット・キー

hotkeysオブジェクトを定義すると、チャット・ウィジェットでUI要素をアクティブ化またはフォーカスをシフトするAltキー組合せショートカットを作成できます。 ユーザーは、マウスまたはタッチジェスチャを使用する代わりにこれらのショートカットを実行できます。 たとえば、ユーザーはAlt + Lを入力してチャット・ウィジェットを起動し、Alt + Cを入力して縮小できます。 キーボード・キーは、hotkeysオブジェクトのキーと値のペアを使用して要素に割り当てます。 たとえば: 
const settings = {
    // ...,
    hotkeys: {
        collapse: 'c',  // Usage: press Alt + C to collapse the chat widget when chat widget is expanded
        launch: 'l'     // Usage: press Alt + L to launch the chat widget when chat widget is collapsed
    }
};
これらのキー値ペアを作成するとき:
  • キーには1つの文字または数字しか渡せません。
  • 値として使用できるのは、キーボード・キーa-zと0-9のみです。
次のキーを定義することで、ホット・キー属性を渡すことができます。

ノート:

属性では大文字と小文字は区別されません。
キー 要素
clearHistory 会話履歴をクリアするボタン。
close チャット・ウィジェットを閉じて会話を終了するボタン。
collapse 拡張されたチャット・ウィジェットを縮小するボタン。
input チャット・フッターのテキスト入力フィールド
keyboard 入力モードを音声からテキストに切り替えるボタン。
language 言語選択リストを表示する選択メニュー。
launch チャット・ウィジェットの起動ボタン
mic 入力モードをテキストから音声に切り替えるボタン。
send 入力テキストをスキルに送信するボタン。
shareMenu チャット・フッターの共有メニュー・ボタン
shareMenuAudio 共有するオーディオ・ファイルを選択する共有メニュー・ポップアップのメニュー・アイテム。
shareMenuFile 共有用の汎用ファイルを選択する共有メニュー・ポップアップのメニュー・アイテム
shareMenuLocation 共有メニュー・ポップアップのメニュー・アイテムで、共有するユーザーのロケーションを選択します。
shareMenuVisual 共有するイメージまたはビデオ・ファイルを選択する、共有メニュー・ポップアップのメニュー・アイテム。

ヘッドレスSDK

機能フラグ: enableHeadless: true (default: false )

ヘッドレス・ブラウザと同様に、SDKもUIなしで使用できます。 SDKはサーバーへの接続を維持し、メッセージの送信、メッセージの受信およびネットワーク・ステータスの更新を行うAPIを提供します。 これらのAPIを使用して、SDKと対話したり、UIを更新できます。 この機能を有効にするには、初期設定でenableHeadless: trueを渡します。 通信は次のように実装できます:
  • メッセージの送信 - ペイロードをサーバーに渡すためにBots.sendMessage(message)をコールします。
  • メッセージの受信 - レスポンスは、Bots.on('message:received', <messageReceivedCallbackFunction>)を使用するためにリスニングできます。
  • 接続ステータス更新の取得 - Bots.on('networkstatuschange', <networkStatusCallbackFunction>)を使用して接続のステータスの更新をリスニングします。 コールバックには、それぞれがWebSocketの状態にマップされる0から3の値で更新されるステータス・パラメータがあります:
    • 0 : WebSocket.CONNECTING
    • 1: WebSocket.OPEN
    • 2: WebSocket.CLOSING
    • 3: WebSocket.CLOSED
    • 問合せの提案を返します - 指定された問合せ文字列の提案に解決されるPromiseを返します。 提案のフェッチに時間がかかりすぎる場合(約10秒)、約束は拒否されます。 
      Bots.getSuggestions(utterance)
    .then((suggestions) => {
        const suggestionString = suggestions.toString();
        console.log('The suggestions are: ', suggestionString);
    })
    .catch((reason) => {
        console.log('Suggestion request failed', reason);
    });

    ノート:

    このAPIを使用するには、autocompleteを有効にする必要があります(
    enableAutocomplete: true
    )およびインテントの自動完了を構成します。

多言語チャット

Web SDK 「各国語サポート」を使用すると、チャット・ウィジェットでユーザー言語を検出したり、ユーザーが会話言語を選択できるようになります。 ユーザーが新しい言語を選択するたびに会話がリセットされるため、ユーザーは言語を切り替えることができますが、会話中ではなく会話間でのみ切り替えることができます。

言語メニューの有効化

ユーザーがドロップダウン・メニューから優先言語を選択できるようにするメニューを有効にするには、言語タグ(lang)とオプションの表示ラベル(label)で構成されるsupportedLangs配列を含むオブジェクトを使用してmultiLangChatプロパティを定義します。 この配列の外部では、オプションでprimaryキー(次のスニペットのprimary: 'en')を使用してデフォルト言語を設定できます。 
multiLangChat: {
    supportedLangs: [{
        lang: 'en'
    }, {
        lang: 'es',
        label: 'Español'
    }, {
        lang: 'fr',
        label: 'Français'
    }, {
        lang: 'hi',
        label: 'हिंदी'
    }],
    primary: 'en'
}
チャット・ウィジェットのヘッダーにあるドロップダウン・メニューに、渡された「サポートされる言語」が表示されます。 使用可能な言語に加えて、メニューには「言語の検出」オプションも含まれます。 ユーザーがこのメニューから言語を選択すると、現在の会話がリセットされ、選択した言語で新しい会話が開始されます。 ユーザーが選択した言語は、同じブラウザのセッション間で保持されるため、チャット・ウィジェットを含むページからスキルを再確認すると、ユーザーの以前の言語が自動的に選択されます。

ヒント:

chatlanguagechangeイベントのイベント・リスナーを追加できます(「ダウンロード」ページから使用可能なOracle Web SDKに付属のリファレンスを参照)。これは、ドロップダウン・メニューからチャット言語が選択されているか、変更されたときにトリガーされます。
Bots.on('chatlanguagechange', function(language) {
    console.log('The selected chat language is', language);
});
次に、言語ドロップダウン・メニューを構成するときに注意すべき事項をいくつか示します:
  • ドロップダウン・メニューを表示するには、少なくとも2つの言語を定義する必要があります。
  • labelキーは、ネイティブでサポートされている言語ではオプションです: frはメニューにフランス語として表示され、esはスペイン語として表示されます。
  • 言語のラベルは、i18n設定でラベルを渡すことで動的に設定できます。 language_<languageTag>キーに渡すことで、任意の言語のラベルを設定できます。 このパターンでは、サポートされている言語またはサポートされていない言語のラベルを設定でき、異なるロケールでラベル自体を翻訳することもできます。 たとえば: 
    i18n: {
    en: {
        langauge_de: 'German',
        language_en: 'English',
        language_sw: 'Swahili',
        language_tr: 'Turkish'
    },
    de: {
        langauge_de: 'Deutsche',
        language_en: 'Englisch',
        language_sw: 'Swahili',
        language_tr: 'Türkisch'
    }
}
    i18nプロパティに選択した言語の翻訳文字列が含まれている場合、入力プレースホルダー、チャット・タイトル、ボタンのホバー・テキストおよびツールチップ・タイトルなどのフィールドのテキストは、選択した言語に自動的に切り替わります。 選択した言語の翻訳文字列がある場合のみ、フィールド・テキストを別の言語に切り替えることができます。 このような文字列が存在しない場合、フィールド・テキストの言語は変更されません。
  • ウィジェットは、ユーザー・プロファイルの言語を自動的に検出し、primaryキーを省略すると、「言語の検出」オプションをアクティブ化します。
  • labelはオプションですが、ネイティブにサポートされている言語ではない言語を追加した場合は、特にその言語のi18n文字列がない場合に、タグを識別するラベルを追加する必要があります。 たとえば、lang: hiに対してlabel: 'हिंदी'を定義しない場合、ドロップダウンにはかわりに「hiが表示され、最適でないユーザー・エクスペリエンスが提供されます。

言語メニューの無効化

バージョン21.12以降、multiLangChat.supportedLangs配列を渡さずに初期構成でmultiLangChat.primaryを渡すことで、言語選択ドロップダウン・メニューを構成することなく、チャット言語を構成および更新することもできます。 primary変数に渡された値は、会話のチャット言語として設定されます。

言語検出

渡された言語に加えて、チャット・ウィジェットはドロップダウンに「言語の検出」オプションを表示します。 このオプションを選択すると、ユーザー・メッセージから会話の言語を自動的に検出し、可能な場合は同じ言語で応答するようにスキルに指示します。

ノート:

primaryキーを省略すると、ウィジェットはユーザー・プロファイルの言語を自動的に検出し、メニューの「言語の検出」オプションをアクティブ化します。

setPrimaryChatLanguage(lang) APIをコールして、選択した言語を動的に更新できます。 渡されたlangがサポートされている言語のいずれかと一致する場合は、その言語が選択されます。 一致が見つからない場合は、「言語の検出」がアクティブ化されます。 setPrimaryChatLanguage('und') APIを呼び出すことで、「検出言語」オプションをアクティブ化することもできます。ここで、'und'は未決定を示すか、multiLangChat: {primary: null}またはmultiLangChat: {primary: 'und'}のいずれかを渡します。

ドロップダウン・メニューが構成されていない場合でも、setPrimaryChatLanguage(lang) APIを使用してチャット言語を動的に更新できます。 たとえば: 
Bots.setPrimaryChatLanguage('fr')
チャット言語が最初に構成されているかどうかに関係なく、言語を動的に更新できます。

ノート:

「音声認識」は、構成されている場合、ユーザーがサポートされている言語を選択すると使用できます。 「言語の検出」オプションが設定されている場合、このオプションは使用できません。 音声認識でサポートされていない言語を選択すると、サポートされている言語が選択されるまで認識機能が無効になります。

多言語チャット・クイック・リファレンス

これを行うには... 目的
言語選択ドロップダウンをエンド・ユーザーに表示します。 multiLangChat.supportedLangsを渡します。
言語選択ドロップダウン・メニューを表示せずに、チャット言語をエンド・ユーザーに設定します。 multiLangChat.primaryを渡します。
デフォルト言語を設定します。 multiLangChat.supportedLangsを使用してmultiLangChat.primaryを渡します。 primary値は、配列に含まれるサポートされている言語のいずれかである必要があります。
言語検出機能の有効化 primary: nullまたはprimary: 'und'をmultiLangChatとともに渡します。
チャット言語を動的に更新します。 setPrimaryChatLanguage(lang) APIをコールします。

ウィジェット内Webビュー

チャット・メッセージのリンク動作を構成して、ユーザーがチャット・ウィジェット内からwebページにアクセスできるようにすることができます。 タブまたは別のブラウザ・ウィンドウでページを表示するために会話から切り替えるかわりに、チャット・ウィジェットがWebview内でリンクを開くため、ユーザーはチャットにとどまることができます。

Webビューへのリンク動作の構成

webビューは、すべてのリンクに適用することも、より一般的なユースケースではリンクの選択のみに適用することもできます。 webビュー自体をカスタマイズすることもできます。
  • webビューのすべてのリンクを開くには、設定でlinkHandler: { target: 'oda-chat-webview' }を渡します。 これにより、webビューのiframeの名前であるoda-chat-webviewへのすべてのリンクのターゲットが設定されます。
  • webビューで特定のリンクのみを開き、他のリンクが他のタブまたはウィンドウで正常に開くようにするには、beforeDisplayデリゲートを使用します。 webビューで特定のメッセージURLアクションを開くには、action.typeフィールドの'url'値を'webview'に置き換えます。 beforeDisplay関数でアクション・タイプが'webview'の場合、アクション・ボタンをクリックするとwebビューでリンクが開きます。

Webビュー内からリンクを開く

WebView内に表示されるページ内に埋め込まれたリンクは、「ターゲット」属性がtarget="oda-chat-webview"として定義されたアンカー要素(<a>)に変換された場合にのみ、WebView内で開くことができます。

WebViewのカスタマイズ

オブジェクトを受け入れるwebViewConfig設定を使用して、WebViewをカスタマイズできます。 たとえば: 
{ referrerPolicy: 'no-referrer-when-downgrade', closeButtonType: 'icon', size: 'tall'
このオブジェクト内のフィールドはオプションです。

ノート:

構成は、setWebViewConfigメソッドでwebViewConfigオブジェクトを渡すことによって動的に更新することもできます。 オブジェクトのすべてのプロパティはオプションです。
フィールド 値 説明
accessibilityTitle String WebアクセシビリティのWebViewフレーム要素の名前。
closeButtonIcon String 閉じるボタン・アイコンの表示に使用されるイメージURL/SVG文字列。
closeButtonLabel String 閉じるボタンのテキスト・ラベル/ツールチップ・タイトル。
closeButtonType
  • 'icon'
  • 'label'
  • 'iconWithLabel'
WebViewでの閉じるボタンの表示方法を設定します。
referrerPolicy ReferrerPolicy フレーム・リソースのフェッチ時に送信するリファラを示します。 referrerPolicyポリシー値は有効な「ディレクティブ」である必要があります。 適用されるデフォルトのポリシーは'no-referrer-when-downgrade'です。
sandbox String配列 フレーム内の特定のアクションを除外できる有効な制限文字列の配列。 このフィールドに渡すことができる制限は、「MDN Webドキュメント」のsandbox属性の説明に含まれています。
size
  • 'tall'
  • 'full'
チャット・ウィジェットの高さと比較したWebViewの高さ。 'tall'に設定すると、ウィジェットの高さの80%として設定され、'full'に設定すると、ウィジェットの高さと等しくなります。
title String WebViewコンテナのヘッダーに表示されるタイトル。
すべてのリンクをWebView内で開くことができるわけではありません。 理由は次のとおりです:
  • レスポンス・ヘッダーX-frame-options: denyまたはX-frame-options: sameoriginを提供するページは、iframes内でのページのオープンを妨げるサーバー側の制限のため、WebViewで開かない場合があります。 このような場合、WebViewは、ユーザーが新しいウィンドウまたはタブで開くことができるように、ユーザーにリンクを戻します。
  • サーバー側の制限により、認可ページはWebViews内で開けません。認可ページでは、「クリックジャッキング攻撃」を防ぐために常にX-frame-options: denyが返されるためです。
  • 外部リンク。WebView内で正しく開けません。 WebViewで開くことができるのは、会話メッセージに埋め込まれたリンクのみです。

    ノート:

    外部メッセージはWebViewと互換性がないため、WebViewで開く外部リンクをターゲットにしないでください。
WebViewでリンクを開くことができない場合、ウィジェットは、ユーザーに情報テキストとWebViewへのリンクを表示します。このリンクをクリックすると、ページが新しいタブで開きます。 このテキストは、webViewErrorInfoText i18n翻訳文字列を使用してカスタマイズできます: 
settings = {
    URI: 'instance',
    //...,
    i18n: {
        en: {
            webViewErrorInfoText: 'This link can not be opened here. You can open it in a new page by clicking {0}here{/0}.'
        }
    }
}

ロング・ポーリング

機能フラグ: enableLongPolling: true (default: false )

SDKは、WebSocketsを使用してサーバーに接続し、スキルと対話します。 なんらかの理由でWebSocketがネットワーク上で無効化された場合、従来のHTTPコールを使用してスキルとチャットできます。 SDKは継続的にスキルから最新のメッセージをフェッチするため、この機能はポーリングと呼ばれます。 このフォールバック機能を有効にするには、初期設定でenableLongPolling: trueを渡します。

ユーザー・エージェント会話の入力インジケータ

機能フラグ: enableSendTypingStatus: boolean (デフォルト): false )

この機能により、エージェントは、ユーザー・ステータスをライブ・エージェントに送信することで、ユーザーが会話にまだ参加しているかどうかを確認できます。 enableSendTypingStatusがtrueに設定されている場合、SDKは、ユーザーによって現在入力されているテキストとともに、RESPONDING入力ステータス・イベントをOracle B2C Serviceまたは「Oracle Fusionサービス」に送信します。 これにより、エージェント・コンソールに入力インジケータが表示されます。 ユーザーが入力を完了すると、SDKによってLISTENINGイベントがサービスに送信され、エージェント・コンソールの入力インジケータが非表示になります。

最小値が3秒のtypingStatusInterval構成では、入力ステータスの更新が抑制されます。

Oracle B2C Serviceエージェントをユーザーが入力するテキストと入力ステータスの両方を送信するには、enableAgentSneakPreview (デフォルトはfalse)をtrueに設定し、「Oracle B2C Serviceチャット構成」でスニーク・プレビューを有効にする必要があります。

ノート:

ユーザー側でライブ入力ステータスを構成する必要はありません。 デフォルトでは、エージェントの入力ステータスが表示されます。 エージェントが入力すると、SDKはRESPONDINGステータス・メッセージを受信し、ユーザー・ビューに入力インジケータが表示されます。 同様に、エージェントがアイドル状態の場合、SDKはLISTENINGステータス・メッセージを受信し、入力インジケータが非表示になります。

音声認識

機能フラグ: enableSpeech: true (default: false )

enableSpeech: trueを設定すると、ユーザー入力フィールドが空の場合は常に、送信ボタンのかわりにマイクロフォン・ボタンを表示できます。

スキルでは、startVoiceRecording(onSpeechRecognition, onSpeechNetworkChange)メソッドを使用してレコーディングを開始し、stopVoiceRecordingメソッドを使用してレコーディングを停止することもできます。 (これらのメソッドについては、SDKに付属しているユーザー・ガイドを参照してください。)

enableSpeechAutoSendフラグを使用すると、ユーザーが手動で入力しないで、ユーザーのボイスからチャット・サーバーに直接認識されるテキストを送信するかどうかを構成できます。 このプロパティをtrue (デフォルト)に設定すると、ユーザーの音声レスポンスをチャット・サーバーに自動的に送信できます。 falseに設定すると、チャット・サーバーに送信する前にメッセージを編集したり、メッセージを削除することができます。

音声ビジュアライザ

機能構成: enableSpeechAutoSend

チャット・ウィジェットは、ユーザーが音声アイコンこれはVoice Visualizer Speakアイコンのイメージです。をクリックすると音声ビジュアライザを表示し、チャット・ウィジェットは音声ビジュアライザを表示します。 これは、SDKがユーザーの音声をキャプチャするのに十分な高さがオーディオ・レベルであるかどうかを示すインジケータです。 ユーザーのメッセージは、テキストとして認識されると、ビジュアライザの下に表示されます。

ノート:

キーボードのこれはキーボード・アイコンのイメージです。アイコンが表示されると、音声モードが示されます。
voice-visualizer.pngの説明は以下のとおりです
図voice-visualizer.pngの説明
enableSpeechAutosendのデフォルト設定はtrue (enableSpeechAutoSend: true)であるため、メッセージは認識された後に自動的に送信されます。 enableSpeechAutoSend: falseを設定すると、ボイス・メッセージの認識後に入力モードがテキストに切り替わり、ユーザーは手動で送信する前にテキストを使用してメッセージを編集または完了できます。 または、手動で送信する前に、ボイス・アイコンをクリックしてメッセージを音声で完了することもできます。

ノート:

音声ビジュアライザは、AnalyserNodeを使用して作成されます。 startVoiceRecordingメソッドを使用して、「ヘッドレス・モード」に音声ビジュアライザを実装できます。 AnalyserNodeおよび頻度レベルの詳細は、SDKを参照してください。