すべてのカテゴリ
旧ドキュメント
モーダルビュー

モーダルビュー

💡
このドキュメントは古い可能性があります。仕様変更やプラットフォームの世代交代のため、新しいドキュメントが公開されている場合があります。

はじめましょう | Getting started

モーダルビューは、シングルページのWebアプリに追加できるコードスニペットで、デジタルヒューマンをオーバーレイ（重ねて表示）させることができます。このコードスニペットをシングルページのWebアプリに追加すると、既存のエクスペリエンスにデジタルヒューマンを重ねることができます。

例：スニペットが最初に読み込まれたときにユーザーに表示されるイメージを示しています。

Notion image

例：透明な背景を有効にしてライブセッションを行っています。

Notion image

会話の安全性を保つ | 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", enableTransparentBackground: true, callToActionText: "こんにちは。私はソフィーです。あなたのアプリケーションについて何か質問はありますか？", errorText: "申し訳ありません。現在、ご利用いただけません。時間をおいて再度アクセスしてみてください。", playWelcome: true
        } </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 Modal view

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

プロバティ
詳細
例
personaShareId
あなたのペルソナの公開IDです。カスタマーサクセスの担当者が提供してくれます。 UneeQ Creator にアクセスしている場合、Try モードでペルソナと会話する際に URL に表示される GUID です。
ebsdw401-94ae-4088-8e3c-4283d9904972
enableTransparentBackground
オプションのboolean値です。trueの場合、ペルソナは透明な背景で表示されます。 falseの場合、ペルソナは設定された背景画像を使用します。ペルソナのプレビューは、デフォルトのグレーの背景で表示されます。プレビューの背景のスタイルはカスタマイズできます。 詳しくは、以下の「カスタムスタイル」のセクションを参照してください。
true
callToActionText
任意の文字列です。最大110文字です。 指定すると、モーダルビューが最初に読み込まれたときに、このテキストがコールトゥアクションのテキストボックスでユーザーに表示されます。 このテキストボックスにアクセスすると、ペルソナとのセッションが開始されます。提供されていない場合は、行動喚起のテキストボックスなしでペルソナのプレビューが表示されます。
"こんにちは。私はソフィーです。あなたのアプリケーションについて何か質問はありますか？"
errorText
任意の文字列です。最大110文字です。 指定すると、ペルソナが利用できない場合に、このテキストがエラーテキストボックスでユーザーに表示されます。 指定しない場合、このシナリオではユーザーにエラー テキストは表示されません。また、このシナリオのUXを適切に管理するために、セッション状態のメッセージを監視することができます。
"申し訳ありません。現在、ご利用いただけません。時間をおいて再度アクセスしてみてください。"
playWelcome
オプションのboolean値です。 trueの場合、ユーザーがセッションを開始する際に、設定したウェルカムインテントを自動的に話すよう、ペルソナの会話プラットフォームに指示を送ります。 falseの場合は、ユーザーがセッションを開始したときに指示は送信されません。
true
customStyles
任意の文字列です。 指定された場合、デフォルトのインタラクション要素が指示に応じてスタイリングされます。詳細については、 以下のカスタムスタイリングのセクションを参照してください。指定されていない場合は、デフォルトのスタイリングが使用されます。
以下のカスタムスタイリングをご覧下さい

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

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

キーエレメント
詳細
#cta-text
Call-to-action テキストボックス
#error-text
Error テキストボックス
#session-loading
セッションローディングアニメーションボックス
#content
レスポンス用のサポーティングコンテンツエリア

例：

customStyles: "
        @import url('https: //fonts.googleapis.com/css2?family=Nunito&display=swap');
        h1 {
            font-family: 'Nunito', sans-serif;
}
        #cta-text {
            background-color: blue;
            color: white;
}
        #cta-text:after {
            border-left-color: blue;
}
        #content {
            background-color: light-grey;
}
        .cta-section .cta-preview-img {
    background: radial-gradient(50% 50% at 50% 50%,red 0,pink 100%) !important;
}
    "

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

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

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

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

uneeqAskメソッドは、デジタルヒューマンがエンドユーザーに語りかけるために、ユーザーのアクションやその他のトリガーに応じて、ペルソナの会話プラットフォームに意図を伝えることができます。この例では、基本的なハイパーリンクを使ってuneeqAskを起動しています。

例：

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

Copy

NLP等の会話プラットフォームは、このインテント（上記の例では「希望するインテント名」が送信されます）を照合し、このインテントに対して定義されたレスポンスを返し、それをデジタルヒューマンが話します。

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

補助コンテンツ | Supporting content

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

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

Copy

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>"
        }
    }
}

CTAテキストの更新 | Updating CTA text

uneeqSetCallToActionTextメソッドを使用して、ユーザーに新しいcall-to-actionテキストボックスを提示することができます。これは、ユーザーアクションに付随するコンテキスト固有のコールトゥアクションや、その他のトリガーを提供するのに便利です。

uneeqSetCallToActionText('このステップは難しいですね。お手伝いできることがあれば教えてください。')

セッションの終了 | 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フレームに渡して検証することができます。

サポートしているブラウザー| 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

画像やYouTubeをデジタルヒューマンのUIに表示する スプリット スクリーン ビュー