すべてのカテゴリ
開発・設置
設置手順

設置手順

デジタルヒューマンのプロジェクトは難しくありません。最高のプラットフォーム、AIバックエンド、ウェブフレンドリーで柔軟なフロントエンド、そして強力なインテグレーションにより、簡単に構築し、効率的に立ち上げ、価値を見出すことができます。

デジタルヒューマンが表示ができたら、ウェブサイト上でデジタルヒューマンの表示方法、ユーザーとの対話方法、表示したいコンテンツをカスタマイズできるようになります。

 

準備

最低限、下記を準備してください。

情報
DIP(Digital Humans Identity Portal）にアクセスして、デジタルヒューマンのpersonaIdとpersonaIdentifier を確認します。
環境
httpsでアクセスできるWebサイトやWEBサーバー（S3でも可）。開発環境として例外的に http://localhost:3000 やhttp://127.0.0.1:8001/ などでアクセスできる環境。
会話AI / チャットボット
接続実績のある会話AI・チャットボットで対応済と表示されているサービスならびに環境
HTMLエディタ
Visual Studio Codeなどのエディタ
 

設置作業

DIPにアクセスして下記を設定します。

許可ドメイン
セキュリティ保護に関する設定です。 httpsでアクセスできるWebサイトやWEBサーバーを設定します。登録するURLの末尾にスラッシュ（/）は不要です。 現時点では、DIP以外に設定する必要があり、デジタルヒューマン株式会社にて行います。お手数ですがサポートセンターからご連絡ください。
NLPアカウント
Parrot
 

フロントエンド表示用のファイルを作成

VSCODE等をひらいてHTMLファイルを作成します。下記のindex.html サンプルをコピーして張りつけます。

その後、下記の2ヶ所を修正します。修正箇所はpersonaIdとpersonaIdentifierの2ヶ所だけです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホステッドエクスペリエンス2.0 HTMLテンプレート</title>
    <link rel="stylesheet" href="https://hosted-experience.jp/css/dhx.css">
    <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>
    <script>
        let uneeqOptions = {
            "connectionUrl": "https://api.uneeq.io",
            "personaId": "DPIからpersonaIdコピー&ペーストする",
            "displayCallToAction": true,
            "renderContent": true,
            // "ctaThumbnailUrl": "https://your-cta-image.com",
            // "customStyles": "h1 { font-size: 150%; }",
            "welcomePrompt": "こんにちは。自己紹介してください。",
            "mobileViewWidthBreakpoint": 900,
            "layoutMode": "fullScreen", // overlay fullScreen
            "cameraAnchorHorizontal": "center", // left right center
            "cameraAnchorDistance": "tight_medium_shot", // close_up loose_close_up tight_medium_shot medium_shot medium_full_shot full_shot
            "logLevel": "info", // error warn info debug trace
            "enableMicrophone": true,
            "showUserInputInterface": true,
            "enableVad": true,
            "enableInterruptBySpeech": true,
            "autoStart": false,
            "containedAutoLayout": true,
            "showClosedCaptions": false,
            "captionsPosition": "bottom-right", // bottom-left bottom-right bottom top-left top-right top
            "languageStrings": {
                "ja": {
                    "callToActionText": "👋 こんにちは！P2デジタルヒューマンです",
                    "errorText": "エラーが発生しました。",
                    "textInputPlaceholder": "こちらにメッセージを入力...",
                    "showContentToolTip": "コンテンツを表示",
                    "sendQuestionButtonToolTip": "メッセージを送信",
                    "startRecordingButtonToolTip": "録音開始",
                    "unmuteMicrophoneToolTip": "ミュート解除",
                    "muteMicrophoneToolTip": "ミュート",
                    "microphonePermissionNotAllowedButtonToolTip": "マイクの使用が許可されていません",
                    "microphoneEnabledHintTitle": "マイクが有効です",
                    "microphoneEnabledHintText": "お話しください。お聞きしております。",
                    "microphoneEnabledHintTitleOverlay": "マイク ON",
                    "microphoneNotAllowedMessage": "マイクの使用が許可されていません。ブラウザの設定でマイクへのアクセスを許可してから、もう一度お試しください。",
                    "recordingTapToStart": "タップして録音開始、もう一度タップして送信",
                    "recordingSpeakNowPrompt": "お話しください",
                    "recordingTapStopWhenDone": "終了したらタップして停止",
                    "recordingStopButtonToolTip": "録音停止",
                    "recordingRequestingMicrophonePrompt": "マイクにアクセス中",
                    "settingsExitButton": "終了",
                    "confirmExitDescription": "本当に終了しますか？",
                    "confirmExitStayButton": "続ける",
                    "confirmExitEndButton": "終了する",
                    "hideContentButton": "コンテンツを非表示",
                    "hideDigitalHumanButton": "デジタルヒューマンを非表示"
                },
                "default": {
                    "callToActionText": "Hi! Click here to start a conversation.",
                    "textInputPlaceholder": "Type here..."
                }
            },
            "customMetadata": {},
            "speechRecognitionLocales": "ja-JP",
            "speechRecognitionHintPhrases": "",
            "speechRecognitionHintPhrasesBoost": 0
        }
        const uneeq = new Uneeq(uneeqOptions);

        window.dhxOptions = {
            "personaIdentifier": 'DPIからpersonaIdentifierをコピー&ペーストする',
            "uneeq": uneeq,
            "showCaption": true,
            "showWaitingSpinner": true,
            "useDhxCustomEvent": true,
            "cameraAnchorDuration": 2000,
        }
    </script>
</head>
<body>
    <h1>ホステッドエクスペリエンス2.0 HTMLテンプレート</h1>
    <script src="https://hosted-experience.jp/js/dhx.js"></script>
</body>
</html>

ファイルのアップロード

index.htmlをWEBサーバー等にファイルをアップロードし、アップロードしたWEBサーバーにブラウザからアクセスします。

アップロード先はホスティング企業やWEB担当に確認してください。AWS上のS3などのサービスでも利用可能です。

Notion image

右下にCTAが表示されたら成功です！🙌 おめでとうございます！

 
Notion image

下記の表示はデジタルヒューマンプラットフォーム上でドメインが許可されていない事が原因です。

現時点では、DIP以外に設定する必要があり、デジタルヒューマン株式会社にて行います。お手数ですがサポートセンターからご連絡ください。

 
Error creating session: Domain not allowed (https://digitalhumans-demo.jp)
 
 
Notion image
 

右下にCTAも何も表示されない場合は、JavaScriptコンソールを確認してください。

下記の表示はindex.html サンプルをそのままコピペされたことが原因です。personaId を正しい値に修正してください。

UneeQ Hosted Experience could not be loaded, personaId not valid:  DPIからpersonaIdコピー&ペーストする
 
Notion image

下記の表示はindex.html サンプルをそのままコピペされたことが原因です。Personaldentifier を正しい値に修正してください。

Personaldentifier: DPIからpersonaldentifierをコピー＆ペーストする is not found
 
Notion image

下記の表示はDIP上で許可ドメインに設置ドメインが登録されていないことが原因です。DIPにアクセスして許可ドメインに登録してください。

正

https://digitalhumans-demo.jp
 

誤

https://digitalhumans-demo.jp/ ## 最後の”/”が不要です。
https://digitalhumans-demo.jp/○○.html ## ファイルパスは不要です。
http://digitalhumans-demo.jp/ ## https でアクセス出来るようにしてください。
 
 

話しかけてみる

マイクとスピーカの設定が適切であれば、あなたが話しかけたことを認識してオウム返ししてくると思います。下記のような現象が出た場合は原因を特定してみましょう。

現象
原因の可能性
話しかけたが応答がない
マイクを認識していない可能性があります。　こちらを参考にしてください。
テキストインプットにメッセージを入れると応答するが、話しかけても応答がない
マイクを認識していません。こちらを参考にしてください。
デジタルヒューマンが喋っているように見えるが声がしない
スピーカの設定が誤っているかミュートになっていると思われます。
 

会話AIの設定を行う

ご準備いただいた会話AIの設定を行いましょう。下記のページを参考にして設定を行ってください。

 

カスタマイズする

下記のページを参考にしてindex.htmlを修正するだけで機能のOFF/ONや表示のカスタマイズが可能です。

 

マニュアル オーバーライド

デフォルトでは、提供されるJavaScriptのコードスニペットを追加するだけで、所有および管理する任意のウェブサイトにデジタルヒューマンを埋め込むことができます。ユーザーが特定のアクションを起こすまでinit()関数の実行を遅延させるなど、JavaScriptの実行を手動で制御したい場合は、コード内でこの関数（例: window.uneeqInstance.init() またはUneqクラスをインスタンス化する方法）を呼び出すだけで済みます。

init() を手動で呼び出す場合、関数が呼び出される順序に特に注意してください。イベントリスナーは初期化の前に作成する必要があります。

console.log('Setting up UneeQ Event Listeners');
    eventManager.addHandler('UneeqMessage', async (event) => {
      await handleUneeqMessage(event); // 特定のイベントにリスナーをバインドする
    });

    await initializeUneeq(); // デジタルヒューマンを起動する
    console.log('UneeQ initialized');
 

既存サイトに組み込む

既存サイトにコードスニペットを挿入してください。この時、ドメインを許可ドメインにいれることを忘れないでください。

オーバーレイモードやコンテインドレイアウトモードなどを活用すると導入がスムーズです。

お役に立ちましたか？
😞
😐
🤩

最終更新日 April 9, 2025

ビューの種類 設定オプション