スプリット スクリーン ビュー
はじめましょう | Getting started
スプリットスクリーンビュー（分割画面表示）は、単一ページのWebアプリに追加できるコードスニペットを提供します。これにより、デジタルヒューマンを統合して、専用のWebエクスペリエンスを通じてユーザーに同行することができます。
セッションが開始されると、Webエクスペリエンスがユーザーの画面の半分に表示され、デジタルヒューマンセッションが残りの半分に表示されます。
トリガーを追加することで、デジタルヒューマンのスピーチや、それをサポートするHTMLコンテンツがユーザーに表示されます。
このサンプル画像は、透明な背景が有効になっているライブ分割画面セッションを示しています。
会話の安全性を保つ | 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 | |
Europe | |
Asia | |
Oceania |
スプリット スクリーン ビューの設定 | 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ブラウザで許可されるためには、これを受け入れる必要があります。ここでは、非常に簡単な例を示します。
<script> functiononClickStart() { uneeqOpenStartSessionPopup({ content:`<div><h2>ソフィーに会いましょう</h2><h4>デジタルヒューマンが、お客様をご案内させていただきます。</h4></div>`, startButtonText: "はじめる" }); } </script>
このメソッドには、次のプロパティが含まれています。
プロパティ | 詳細 |
content | セッション開始時のポップアップボックスに表示するコンテンツを定義します。 |
startButtonText | セッション開始ボタンに使用するラベルを定義します。 |
承認されると、セッションが開始され、コードスニペットで定義したユーザーの画面の半分にデジタルヒューマンが表示され、残りの半分にあなたのウェブ体験が表示されます。
このポップアップのスタイルについては、以下のカスタムスタイリングのセクションを参照してください。
デジタルヒューマンをしゃべらせる | Making your Digital Human speak
スプリット スクリーン ビューは、既存のエンドユーザー（サービスの利用者）の違和感を軽減するように最適化されているため、デジタルヒューマンの音声は、エンドユーザーからの音声入力ではなく、あなたやあなたのエクスペリエンスに対するユーザーのインタラクションによって動作します。
uneeqAskメソッドを使用すると、ユーザーのアクションやその他のトリガーに応じて、デジタルヒューマンがエンドユーザーに語りかけることができます。
この例では、基本的なハイパーリンクを使ってuneeqAskを起動しています。
<a href="javascript: uneeqAsk('希望するインテント名')">ユーザーがこのリンクをクリックすると</a>
Copy
この例では、会話プラットフォームが「希望する文字列」をインテントにマッチさせようとし、会話プラットフォームで定義したインテント応答が返され、それをデジタルヒューマンが話します。
uneeqAskは、セッションの状態がLiveでない限り無視されます。状態の詳細については、以下の「セッション状態のメッセージ」のセクションを参照してください。
会話を主体としたスピーチ | Conversation driven speech
スプリット スクリーン ビューは、デジタルヒューマンの音声がエンドユーザーからの発話またはタイプ入力によって行われる会話体験にも対応しています。これにより、非常に魅力的な体験を提供しますが、より堅牢な会話プラットフォームが必要です。
会話による応答を可能にしたい場合は、uneeqShowVoiceInput メソッドを使用して、ユーザーに会話入力UIを表示することができます。このUIでは、ユーザーがデジタルヒューマンにリクエストを話したり、タイプしたりすることができます。
会話入力UIを削除したい場合は、uneeqHideVoiceInput メソッドを使用することで、いつでも削除できます。
マイクの使用を許可すると、ユーザーはマイクのアイコンをクリックして話し始めます。
ユーザーは、話し終わったら停止アイコンをクリックすると、そのリクエストが会話プラットフォームに送信されます。
ユーザーは、好みに応じてタイプ入力に切り替えたり、戻したりすることができます。
上記の入力例では、会話プラットフォームが「How much am I allowed to borrow（いくら借りてもいいですか）」をインテントにマッチさせようとし、会話プラットフォームで定義したインテントレスポンスを返し、それをデジタルヒューマンが話します。
このメソッドを呼び出す際のテキスト入力フィールドには、ユーザーに表示するプレースホルダーテキストを定義することができます。
uneeqShowVoiceInput('Type here...')
Copy
この例では、タイプ入力に切り替えたときに、ユーザーにプレースホルダーのテキストがどのように表示されるかを示しています。
カスタム会話UI | Custom conversation driven UI
何らかの理由でユーザーに表示される音声入力UIを完全にコントロールしたい場合は、キャプチャしたい期間の最初と最後にuneeqStartRecording()メソッドとuneeqStopRecording()メソッドを呼び出すことで、もう半分のページにこれを実装することができます。
window.onkeydown = (e) => { if( e.code === 'Space' && !e.repeat ) { uneeqStartRecording(); } }; window.onkeyup = (e) => { if( e.code === 'Space' && !e.repeat ) { uneeqStopRecording(); } };
補助コンテンツ | 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テキストウィンドウまたはデジタルヒューマンのプレビュー画像をクリックしました。 |
あなたのペルソナが利用できません。セッションを開始することができません。 | |
MajorError | 重大なエラーが発生したため、セッションの開始や継続ができません。 |
Live | セッションはアクティブで、拡張されたセッション ウィンドウでデジタル ヒューマンがエンド ユーザーに提示されています。 |
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); }
エラー状態の扱い | Handling error states
以下のエラー状態を使用して、経験上適切なエラーシナリオを処理することができます。
セッションを開始しようとしてAvatarUnavailable またはMajorErrorが発生した場合、セッション開始のポップアップは削除されます。
アクティブなセッション中に MajorError が発生した場合は、セッションウィンドウが閉じられ、Web アプリはユーザーのブラウザウィンドウの幅いっぱいになります。
コンテンツのセキュリティポリシー | 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のリリースでこの問題が解決されるかどうか、引き続き追いかけていきます。
最終更新日 January 1, 2020