スプリット スクリーン ビュー | Split Screen view スプリット スクリーン ビュー | Split Screen view

スプリット スクリーン ビュー | Split Screen view

最終更新日:

はじめましょう | Getting started

スプリット スクリーン ビュー(分割画面表示)は、単一ページのWebアプリに追加できるコードスニペットを提供します。これにより、デジタルヒューマンを統合して、専用のWebエクスペリエンスを通じてユーザーに同行することができます。

セッションが開始されると、Webエクスペリエンスがユーザーの画面の半分に表示され、デジタルヒューマンセッションが残りの半分に表示されます。

トリガーを追加することで、デジタルヒューマンのスピーチや、それをサポートするHTMLコンテンツがユーザーに表示されます。

 

このサンプル画像は、透明な背景が有効になっているライブ分割画面セッションを示しています。splitscreen-live.png

 

会話の安全性を保つ | Keep your conversations secure

お客様が管理するドメインからのみデジタルヒューマンのセッションを開始できるようにするために、カスタマー・サクセス担当者にご連絡いただくか、support@digitalhumans.jp にメールして、デジタルヒューマンを埋め込むドメインをお知らせください。

ご利用のドメインがホワイトリストに登録されていることを確認し、お客様のデジタルヒューマンがお客様の同意なしに使用されないようにします。

 

例えば、URL https://your-domain.com/example/ のウェブページにコードスニペットを挿入する場合する場合は、ドメイン your-domain.com をホワイトリストに登録する必要があります。

会話の安全性を確保するために、https://your-domain.com 以外の場所でデジタルヒューマンとのセッションを開始することはできません。

 

ウェブサイトにコードを埋め込む | Embedding your code into your website

ドメインがホワイトリストに登録されると、次の例のように、このコードスニペットを目的のウェブページの<head></head>セクションに挿入することができるようになります。

<html>
<head>
<title>Your Website</title>
<script>
window.uneeqInteractionsOptions = {
personaShareId: "ebsdw401-94ae-4088-8e3c-4283d9904972",
layoutMode: "splitScreen",
position: "right",
enableTransparentBackground: true,
playWelcome: true,
verboseLogging: false
}
</script>
<script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
</head>
<body>
Your website.
</body>
</html>

複数ページのウェブサイト :スプリット スクリーン ビューは複数ページのWebサイトでも使用できますが、ページを移動するとセッションが終了してしまいます

 

リージョンの選択 | Selecting your region

上記のコードスニペットでは、デジタルヒューマンがプロビジョニングされている地域のscript srcを指定する必要があります。どの地域を使用すべきか不明な場合は、カスタマー・サクセス担当者にお問い合わせください。

リージョン URL
North America https://hosted.us.uneeq.io/interactions/v1/deploy
Europe https://hosted.eu.uneeq.io/interactions/v1/deploy
Asia https://hosted.sg.uneeq.io/interactions/v1/deploy
Oceania https://hosted.au.uneeq.io/interactions/v1/deploy

 

スプリット スクリーン ビューの設定 | Configuring Split Screen view

このコードスニペットには、以下のプロパティが含まれています。

プロバティ 詳細
personaShareId

あなたのペルソナの公開IDです。カスタマーサクセスの担当者が提供してくれます。

UneeQ Creator にアクセスしている場合、Try モードでペルソナと会話する際に URL に表示される GUID です。

ebsdw401-94ae-4088-8e3c-4283d9904972
layoutMode

このオプションは、どのウェブサイト統合ビューを使用するかを制御します。このビューを使用するには、この値にsplitScreenを指定します。モーダルビューについては、こちらを参照してください。

"splitScreen"
position

任意の文字列です。指定された場合は、デジタルヒューマンがWebエクスペリエンスの左側と右側のどちらに表示されるかを決定します。指定されていない場合は、デフォルト値のrightが使用されます。

"left"
enableTransparentBackground

オプションのboolean値です。trueの場合、ペルソナは透明な背景で表示されます。

falseの場合、ペルソナは設定された背景画像を使用します。

警告 重要:透明な背景機能は、Safariユーザーには適用されません。詳細については、以下の「透明な背景のサポート」セクションを参照してください。

true
playWelcome

オプションのboolean値です。

trueの場合、ユーザーがセッションを開始する際に、設定したウェルカムインテントを自動的に話すよう、ペルソナの会話プラットフォームに指示を送ります。

falseの場合は、ユーザーがセッションを開始したときに指示は送信されません。

true
customStyles

任意の文字列です。

指定された場合、デフォルトのインタラクション要素が指示に応じてスタイリングされます。詳細については、

以下のカスタムスタイリングのセクションを参照してください。指定されていない場合は、デフォルトのスタイリングが使用されます。

以下のカスタムスタイリングをご覧下さい
verboseLogging

オプションの文字列です。falseの場合、UneeQメッセージはブラウザの開発者コンソールに記録されません。デフォルトは true です。

false

 

デジタルヒューマンとの会話 | Digital Human interaction

このビューは、デジタルヒューマンのために構築されたユーザーエクスペリエンスを対象としています。そのため、モーダルビューで使用されているオプションの「コールトゥアクション」による開始方法ではなく、エクスペリエンス内でデジタルヒューマンのセッションを開始するタイミングをコントロールすることができます。

セッションを開始するには、以下のメソッドを呼び出します。ユーザーにはセッション開始のポップアップが表示され、デジタルヒューマンのビデオとオーディオのストリームがWebブラウザで許可されるためには、これを受け入れる必要があります。ここでは、非常に簡単な例を示します。

uneeqOpenStartSessionPopup({ content:`<div><h2>You're about to meet Max.</h2><h4>Our digital human will be able to help walk you through the process.</h4></div>`, startButtonText: "Get Started" })

このメソッドには、次のプロパティが含まれています。

プロパティ 詳細
content セッション開始時のポップアップボックスに表示するコンテンツを定義します。
startButtonText セッション開始ボタンに使用するラベルを定義します。

 

承認されると、セッションが開始され、コードスニペットで定義したユーザーの画面の半分にデジタルヒューマンが表示され、残りの半分にあなたのウェブ体験が表示されます。

このポップアップのスタイルについては、以下のカスタムスタイリングのセクションを参照してください。

 

デジタルヒューマンをしゃべらせる | Making your Digital Human speak

スプリット スクリーン ビューは、既存のエンドユーザー(サービスの利用者)の違和感を軽減するように最適化されているため、デジタルヒューマンの音声は、エンドユーザーからの音声入力ではなく、あなたやあなたのエクスペリエンスに対するユーザーのインタラクションによって動作します。

uneeqAskメソッドを使用すると、ユーザーのアクションやその他のトリガーに応じて、デジタルヒューマンがエンドユーザーに語りかけることができます。

この例では、基本的なハイパーリンクを使ってuneeqAskを起動しています。

<a href="javascript: uneeqAsk('希望するインテント名')">ユーザーがこのリンクをクリックすると</a> 

この例では、会話プラットフォームが「希望する文字列」をインテントにマッチさせようとし、会話プラットフォームで定義したインテント応答が返され、それをデジタルヒューマンが話します。

uneeqAskは、セッションの状態がLiveでない限り無視されます。状態の詳細については、以下の「セッション状態のメッセージ」のセクションを参照してください。

 

補助コンテンツ | Supporting content

モーダルビューを使うと、デジタルヒューマンの音声に合わせて、補助用のHTMLコンテンツをエンドユーザーに表示することができます。このコンテンツは、displayHTMLプラットフォーム命令を通じて、マッチしたインテントレスポンスで提供されなければなりません。Dialogflow ESとLexでの提供方法の例をご覧いただけます。

{
    "instructions": {
        "displayHtml": {
            "html": "an html string"
        }
    }
}

htmlプロパティ内のコンテンツは文字列化されるため、バックスラッシュ\等でこのコンテンツをエスケープする必要があります。

レスポンスに付随するサポートコンテンツは、ユーザーがサポートコンテンツボックスを最小化するまで、または別のインテントレスポンスによって新しいサポートコンテンツに置き換えられるまで、ユーザーに表示され続けます。

 

Display HTMLのインラインスタイリング | Display HTML inline styling

CSSは、サポートするコンテンツにスタイリングを適用したい場合、displayHTML命令に含めることができます。

{ "instructions": { "displayHtml": { "html": "<h1 style='color: rgb(255, 165, 0)'>Example Content</h1><p>This is some example content. Here is an example link:</p><a href='http://uneeq.com' target='_blank'>Link</a><p>Example list:</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>" } } }

 

会話内容の可視化

会話プラットフォームから送信された質問とマッチした会話応答は、以下のイベントを介してウェブアプリに表示されます。これらのイベントは、あなたがこの情報を利用したり、ページの半分に表示したい場合に役立ちます。

/* Listen for uneeq events */ window.addEventListener( 'uneeqEvent', (event) => { if( event.detail.uneeqMessageType === 'AvatarQuestionText' ) { console.log('UneeQ: AvatarQuestionText message received: ', event.detail.question); } else if ( event.detail.uneeqMessageType === 'AvatarAnswerContent' ) { console.log('UneeQ: AvatarAnswerContent message received: ', event.detail.content); } else if ( event.detail.uneeqMessageType === 'AvatarAnswer' ) { console.log('UneeQ: AvatarAnswer message received: ', event.detail.answer); } });

 

セッションの終了 | Ending a session

ユーザーがデジタルヒューマンのセッションウィンドウを閉じると、ユーザーの帯域幅を節約するためにセッションは一時停止しますが、ユーザーが体験の後半でCTAに関与した場合にデジタルヒューマンがすぐに利用できるように、セッションはライブのままとなります。

uneeqEndSessionメソッドは、セッションを終了させる方法を提供します。そうしないと、ユーザーがシングルページアプリからナビゲートしたとき、ブラウザを閉じたとき、または30分後にタイムアウトしたときに、デフォルトでセッションが終了してしまいます。

 

 

セッションの状態 | Session states

セッションがライブであるかどうか、またセッションの状態を示すメッセージがコンソールに表示されます。liveイベント属性は、現在ライブ状態にあるアクティブなセッションがあるかどうかを示すboolean値です。stateイベント属性は、モーダル・ビューの現在の状態を示します。

AppState 詳細
Initial モーダルビューが読み込まれ、エンドユーザーに表示されています。
WaitingToStart エンドユーザーがセッションを開始するために、CTAテキストウィンドウまたはデジタルヒューマンのプレビュー画像をクリックしました。
AvatarUnavailable あなたのペルソナが利用できません。セッションを開始することができません。
MajorError 重大なエラーが発生したため、セッションの開始や継続ができません。
Live セッションはアクティブで、拡張されたセッション ウィンドウでデジタル ヒューマンがエンド ユーザーに提示されています。
Paused エンドユーザーが拡張セッションウィンドウを閉じ、デジタルヒューマンのプレビュー画像を表示しています。セッションはまだ有効です。
Ended セッションが終了しました。

 

例:

event: uneeqSessionStateUpdate
eventAttributes: {
    detail: {
        live: false
        state: Initial
    }
}

// Global variables:
uneeqSessionLive: false
uneeqState: Initial

// Example JS Event Handler:
window.addEventListener( 'uneeqSessionStateUpdate', (event) => {
    console.log('UneeQ session state updated: ', event.detail);
}

 

コンテンツのセキュリティポリシー | Content security policy

コンテンツセキュリティポリシーがある場合は、Referrer-Policy strict-origin-when-cross-originを追加する必要があります。これにより、ウェブサイトはページのリファラーをUneeQフレームに渡して検証することができます。

 

カスタムスタイリング | Custom styling

コードスニペットのcustomStylesプロパティを使って、インタラクション要素のデフォルトのスタイリングを変更することができます。簡単に変更できるように、主要な要素には個別のIDが割り当てられています。

キーエレメント 詳細
#start-session-popup 開始セッションのポップアップボックスです。
#session-loading セッション開始時のポップアップボックス内のセッションローディングアニメーション
#content レスポンス用のサポーティングコンテンツエリア

 

例:

customStyles: "
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
h1 {
font-family: 'Nunito', sans-serif;
}
body {
--primary-color: #d1d1d1;
--primary-text-color: #333333;
--secondary-text-color: #ffffff;
--content-bg-color: white;
--content-backdrop-color: transparent
}
#content {
background-color: light-grey;
}
"

注意:カスタムスタイル内で二重引用符を使用する場合は、必ずエスケープするか、一重引用符を使用してください。

 

コンテンツのセキュリティポリシー | Content security policy

コンテンツセキュリティポリシーがある場合は、Referrer-Policy strict-origin-when-cross-originを追加する必要があります。これにより、ウェブサイトはページのリファラーをUneeQフレームに渡して検証することができます。

 

 

サポートしているブラウザー| Browser support

スプリット スクリーン ビューは、Windows 10とMacOS(High Sierra以降)のChrome、MacOSのSafariに対応しています。

また、モバイルブラウザでは、AndroidのChrome(6.0以上)とiOSのSafari(11以上)に対応しています。

なお、モーダルビューは現在、モバイル向けに最適化されていません。ブラウザのサポートは、特に明記されていない限り、指定されたOSの最新バージョンで動作する様に開発しております。

 

 

透過背景のサポート

2021年9月20日にSafari 15がリリースされました。このリリースの一環として、Safariが透明な背景に対する当社のアプローチをサポートしなくなったことが判明しました。この問題を解決するために、すべてのSafariユーザーに自動的に非透過モードを表示するようにしました。この変更を有効にするためにお客様が操作する必要はありません。

Creator Platformを使用している場合、ペルソナ作成時に選択した背景画像がSafariユーザーに表示されます。また、背景画像をご提供いただいていない場合は、真っ黒な背景が表示されます。

今後のSafariのリリースでこの問題が解決されるかどうか、引き続き追いかけていきます。