> For the complete documentation index, see [llms.txt](https://docs.digitalhumans.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalhumans.jp/dev/hosted-experience/hosted-experience-code-samples.md).

# コードスニペットサンプル

以下のコードブロックには、ホステッドエクスペリエンスで使用できる標準的なコードスニペットが含まれています。

* コードをコピーして `index.html` として保存し、`https` でアクセスできる場所に設置してください。
* 各パラメータの詳細は [設定オプション](/dev/hosted-experience/hosted-experience-configuration-options.md) を参照してください。

### サンプル

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デジタルコンパニオン</title>

    <!-- ホステッドエクスペリエンス本体 -->
    <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>

    <!-- DHX スタイルシート（字幕・ボタンなど拡張 UI のデザイン） -->
    <link rel="stylesheet" href="https://hosted-experience.jp/css/dhx.css">

    <script>
    // =============================================
    // ホステッドエクスペリエンス設定
    // =============================================
    let uneeqOptions = {

        // --- コア必須 ---

        // 【必須】接続エンドポイント URL
        // エンタープライズリージョン: "https://api.enterprise.uneeq.io"
        "connectionUrl": "https://api.uneeq.io",

        // 【必須】デジタルヒューマンの ID（DIP のペルソナページから取得）
        "personaId": "デジタルヒューマン株式会社から提供",

        // セッション解像度（省略するとペルソナの設定値が使用される）
        // 指定可能な値: "480p" / "720p" / "1080p" / "1440p" / "4k"
        // "resolution": "1080p",

        // --- セッション管理 ---

        // 前回のセッションを自動復元するか（24時間以内）
        "allowResumeSession": false,

        // ページ読み込み時にセッションを自動開始するか
        "autoStart": false,

        // ページ読み込み時にフレームを初期化するか
        // false にした場合は uneeq.init() を手動で呼び出す
        "initLoadHandler": true,

        // セッション開始時に会話 AI に送信される最初のプロンプト
        "welcomePrompt": "こんにちは",

        // --- 表示・レイアウト ---

        // レイアウトモード: "fullScreen" / "overlay" / "contained"
        "layoutMode": "fullScreen",

        // コールトゥアクション（吹き出し）の表示
        "displayCallToAction": true,

        // CTA サムネイル画像 URL（140px 正方形、省略可）
        "ctaThumbnailUrl": "",

        // フレーム内に HTML コンテンツを表示するか
        "renderContent": true,

        // モバイルレイアウトに切り替えるブレークポイント（px）
        // モバイル表示を無効にする場合は 1 など小さい値を設定
        "mobileViewWidthBreakpoint": 900,

        // contained モード時のコンテナ div の id（デフォルト: "uneeqContainedLayout"）
        // layoutMode が "contained" の場合は対応する <div id="..."> が必要
        // "containedElementIdName": "uneeqContainedLayout",

        // contained モード時にコンテナに合わせてレイアウトを自動調整するか
        "containedAutoLayout": true,

        // フレーム内要素へのカスタム CSS（変更は自己責任）
        "customStyles": "",

        // --- カメラ制御 ---

        // カメラの水平位置: "left" / "center" / "right"
        "cameraAnchorHorizontal": "center",

        // カメラの距離（ズーム）
        // "close_up" / "loose_close_up" / "tight_medium_shot" / "medium_shot" / "medium_full_shot" / "full_shot"
        "cameraAnchorDistance": "loose_close_up",

        // --- 字幕・アクセシビリティ ---

        // UneeQ 標準字幕の表示（DHX の showCaptions とは別機能）
        "showClosedCaptions": false,

        // 字幕の表示位置
        // "bottom-left" / "bottom-right" / "bottom" / "top-left" / "top-right" / "top"
        "captionsPosition": "bottom-right",

        // テキスト入力欄とマイクボタンの表示
        "showUserInputInterface": true,

        // --- 音声・音声認識 ---

        // セッション開始時にマイク許可を要求するか
        "enableMicrophone": true,

        // 音声アクティビティ検出（VAD）
        // true: 話し始め/終わりを自動検出（ハンズフリー）
        // false: プッシュトゥトーク（ボタンを押して話す）
        "enableVad": true,

        // デジタルヒューマン発話中にユーザー音声で割り込みを許可するか
        "enableInterruptBySpeech": false,

        // 特定のマイクデバイスを指定する場合（省略するとデフォルトマイク）
        // "microphoneDeviceId": "デバイスID",

        // 特定のスピーカーデバイスを指定する場合（省略するとデフォルトスピーカー）
        // "speakerDeviceId": "デバイスID",

        // 音声認識プロバイダー: "google"（デフォルト）/ "deepgram"
        // Deepgram を使用する場合は下部の sttDeepgram* オプションを設定し
        // speechRecognitionLocales は不要（sttDeepgramLanguage を使用）
        "speechRecognitionProvider": "google",

        // Google STT: 認識言語（BCP-47、コロン区切り・最大4言語、最初が主要言語）
        "speechRecognitionLocales": "ja-JP:en-US",

        // 認識精度を上げたい語句をカンマ区切りで指定（固有名詞・専門用語）
        "speechRecognitionHintPhrases": "",

        // ヒントフレーズの重み付け（0〜20）
        "speechRecognitionHintPhrasesBoost": 0,

        // --- Deepgram 固有（speechRecognitionProvider: "deepgram" の場合に有効）---

        // 使用する Deepgram モデル
        "sttDeepgramModel": "nova-3",

        // 認識言語（BCP-47 簡易コード: "ja" / "en" など）
        "sttDeepgramLanguage": "ja",

        // 発話終了判定の無音時間（ミリ秒）
        "sttDeepgramUtteranceEndMs": 1500,

        // 句読点・大文字化を自動追加するか
        "sttDeepgramSmartFormat": true,

        // 話している間に部分的な書き起こしを提供するか
        "sttDeepgramInterimResults": true,

        // デジタルヒューマン発話中の割り込みに必要な最小単語数（999 で実質無効化）
        "sttDeepgramInterruptionWordThreshold": 3,

        // フィラーワード（um・uh など）を書き起こしに含めるか
        "sttDeepgramFillerWords": false,

        // 無音検出のしきい値（ミリ秒）
        "sttDeepgramEndpointing": 500,

        // 認識精度を高めたいキーターム（カンマ区切り、固有名詞・製品名など）
        "sttDeepgramKeyterms": "",

        // トランスクリプト配信の人工的な遅延を除去して低レイテンシ化するか
        "sttDeepgramNoDelay": false,

        // --- ローカライズ ---

        // UI テキストの多言語対応
        "languageStrings": {
            "ja": {
                "callToActionText": "会話を始めるには、ここをクリックしてください。",
                "confirmExitDescription": "本当に終了しますか？",
                "confirmExitEndButton": "終了",
                "confirmExitStayButton": "戻る",
                "errorText": "エラーが発生しました",
                "hideContentButton": "コンテンツを非表示",
                "hideDigitalHumanButton": "デジタルヒューマンを非表示",
                "microphoneEnabledHintText": "マイクに向かって話しかけてください。",
                "microphoneEnabledHintTitle": "マイクが有効になりました",
                "microphoneEnabledHintTitleOverlay": "マイク有効",
                "microphoneNotAllowedMessage": "マイクの許可が許可されませんでした。ブラウザの設定からマイクへのアクセスを許可して再度お試しください。",
                "microphonePermissionBlockedButtonToolTip": "マイクの使用を許可してください",
                "muteMicrophoneToolTip": "ミュート",
                "recordingRequestingMicrophonePrompt": "マイクを要求する",
                "recordingSpeakNowPrompt": "今すぐ話す",
                "recordingStopButtonToolTip": "ストップ レコーディング",
                "recordingTapStopWhenDone": "完了したら停止をタップ",
                "recordingTapToStart": "タップして録音、もう一度タップして送信",
                "sendQuestionButtonToolTip": "メッセージの送信",
                "sessionEndedDueToInactivity": "デジタルヒューマンとの会話が非アクティブのため終了しました。",
                "sessionEndedByUser": "デジタルヒューマンとの会話が終了しました。",
                "sessionEndedDueToConnectionLoss": "接続の問題により、デジタルヒューマンとの会話が終了しました。",
                "sessionEndedUnexpectedly": "予期せぬ理由により、デジタルヒューマンとの会話が終了しました。",
                "sessionTransferred": "デジタルヒューマンとの会話が引き継がれました。",
                "settingsExitButton": "終了",
                "startRecordingButtonToolTip": "スタート レコーディング",
                "textInputPlaceholder": "ここに入力...",
                "unmuteMicrophoneToolTip": "ミュート解除",
                "reconnectingText": "再接続しています・・・",
                "showContentToolTip": "コンテンツを表示",
                "muteDigitalHumanToolTip": "デジタルヒューマンの音声をミュート",
                "unmuteDigitalHumanToolTip": "デジタルヒューマンの音声のミュートを解除",
                "microphonePermissionNotAllowedButtonToolTip": "マイクの使用が許可されていません",
                "sessionEndedDueToVideoPlaybackError": "動画再生エラーのため、デジタルヒューマンとの会話が終了しました。",
                "sessionEndedDueToPermissionsError": "権限エラーのため、デジタルヒューマンとの会話が終了しました。ブラウザの設定をご確認ください。",
                "sessionEndedDueToRendererError": "設定エラーのため、デジタルヒューマンとの会話が終了しました。サポート担当者にお問い合わせください。",
                "errorDigitalHumanResponse": "申し訳ございません、問題が発生しました。しばらくしてから再度お試しください。(16001)",
                "videoAutoplayBlockedText": "クリックしてデジタルヒューマンを再開してください。",
                "networkUnstableText": "ネットワークが不安定です。映像が一時停止する場合があります。Wi-Fiルーターに近づくか、通信環境をご確認ください。",
                "networkReconnectingText": "再接続しています・・・接続が切断されました。",
                "tryAgainError": "問題が発生しました。もう一度お試しください。"
            }
        },

        // --- カスタマイズ ---

        // 会話 AI に毎回送信される追加情報（JSON）
        "customMetadata": {},

        // --- ログ ---

        // ログレベル: "error" / "warn" / "info" / "debug" / "trace"
        "logLevel": "info",

        // --- ネットワーク品質 ---

        // ネットワーク品質インジケーターの設定（省略すると非表示）
        // "networkIndicator": {
        //     "visibility": "when-degraded",  // "always" / "when-degraded" / "hidden"
        //     "position": "top-right",         // "top-left" / "top-right" / "bottom-left" / "bottom-right"
        //     "popupTrigger": "click"          // "click" / "hover" / "none"
        // },
    };

    const uneeq = new Uneeq(uneeqOptions);

    // =============================================
    // DHX（機能拡張）設定
    // =============================================
    window.dhxOptions = {

        // 【必須】DHX 利用のための識別子（デジタルヒューマン株式会社から提供）
        "personaIdentifier": "デジタルヒューマン株式会社から提供",

        // 【必須】Uneeq インスタンスの参照
        "uneeq": uneeq,

        // オーケストレーションサービスの URL（専用エンドポイントが提供された場合は変更）
        "connectionBaseUrl": "https://ai-orch-001.digitalhumans.ne.jp",

        // --- 字幕 ---

        // DHX 字幕の表示（SpeakAPI 経由の発話も表示可能）
        "showCaptions": true,

        // --- UI 制御ボタン ---

        // デジタルヒューマンのミュート/アンミュートボタンを表示するか
        "showMute": true,

        // デジタルヒューマンの発話を強制停止するボタンを表示するか
        "showStopSpeaking": true,

        // セッション終了ボタンを表示するか
        "showEndSession": true,

        // --- ローディング・スピナー ---

        // 起動処理中のローディングスピナーを表示するか
        "showStartupSpinner": false,

        // ユーザー発話後の応答待ちスピナーを表示するか
        "showWaitingSpinner": true,

        // スピナーの種類: "Default" / "growCircle" / "aquaCircles" / "screenGrow"
        "waitingSpinnerType": "Default",

        // --- 待機・キュー表示 ---

        // 接続待ちメッセージを表示するか
        "showWaitingMessage": false,

        // 接続待ちメッセージのテキスト（{position} が順番待ち番号に置換される）
        "waitingMessageText": "順番に接続しますので、お待ちください。<br>ただ今、他の方の対応をしております。{position}番目にお繋ぎいたします。",

        // --- メンテナンス制御 ---

        // メンテナンス時間中の起動制限とメッセージ表示を有効にするか
        "enableMaintenanceMessage": true,

        // お客様独自のメンテナンススケジュール JSON ファイルの URL（省略可）
        "customerMaintenanceJsonUrl": "",

        // --- アイドル発話（展示会・エントランス設置向け）---

        // 最後の発話から idleSpeakTime 秒後に自動発話する文章のリスト
        // 使用する場合はコメントアウトを解除して設定してください
        "idleSpeak": [],
        // "idleSpeak": [
        //     { "content": "何かご質問はありますか？" },
        //     { "content": "デジタルヒューマンについてご説明いたしましょうか？" }
        // ],

        // アイドル発話までの待機秒数（デフォルト: 180秒）
        "idleSpeakTime": 180,

        // 発話選択方法: "random"（ランダム）/ "sequential"（順番）
        "idleSpeakSelectMode": "random",

        // --- カスタム STT（別途 DIP でのSTTアカウント設定が必要）---

        // 独自の STT を使用するか
        "customStt": false,

        // customStt 使用時のマイクデバイス ID（省略するとデフォルトマイク）
        // "micDeviceId": "デバイスID",

        // customStt 使用時にマイク選択 UI を表示するか
        // "selectMic": false,

        // --- 静止画キャプチャ VISION（有料オプション・DHKK 側での利用許可が必要）---

        // Web カメラで毎秒静止画をバックエンドに送信するか
        "stillcam": false,

        // stillcam 使用時のカメラデバイス ID（省略するとデフォルトカメラ）
        // "cameraDeviceId": "デバイスID",

        // stillcam 使用時にカメラ選択 UI を表示するか
        // "selectCamera": false,

        // stillcam 使用時に Web カメラ映像のワイプを表示するか
        "showStillcamWipe": true,

        // --- デバッグ・カスタマイズ・その他 ---

        // カメラ移動のアニメーション時間（ミリ秒）
        "cameraAnchorDuration": 2000,

        // DHX が提供するカスタムイベント（カメラ制御など）を使用するか
        "useDhxCustomEvent": true,

        // DHX 要素へのカスタム CSS
        "dhxCustomStyles": "",

        // 各処理の時間詳細をブラウザコンソールに出力するか（デバッグ用）
        "timeDetail": false,
    };
    </script>
</head>
<body>
    <!-- DHX スクリプト（必ずページ末尾に配置）-->
    <script src="https://hosted-experience.jp/js/dhx.js"></script>
</body>
</html>
```
