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

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

* コードをコピーしてindex.htmlで保存し、`https` でリクエストできる場所やURLに設置してください。てください。
* パラメータ、値については、[設定オプション](/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>ホステッドエクスペリエンス2.0 HTMLテンプレート</title>
    
    <!-- ホステッドエクスペリエンスのメインスクリプト -->
    <!-- デジタルヒューマンを表示するための基本機能を提供します -->
    <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>

    <!-- DHXのスタイルシート -->
    <!-- デジタルヒューマンの追加機能（字幕、ボタンなど）のデザインを提供します -->
    <link rel="stylesheet" href="https://hosted-experience.jp/css/dhx.css">
        
    <script>
        // ========================================
        // ホステッドエクスペリエンスの表示と動作に関する設定
        // ========================================
        let uneeqOptions = {
            // 【必須】UneeQ APIへの接続URL
            "connectionUrl": "https://api.uneeq.io",
            
            // 【必須】デジタルヒューマンのID
            // ※デジタルヒューマン株式会社から提供される値に置き換えてください
            "personaId": "デジタルヒューマン株式会社から提供",
            
            // コールトゥアクション（CTA）の表示設定
            // true: 「こんにちは！」などの吹き出しを表示
            // false: 非表示（独自のUIを実装する場合）
            "displayCallToAction": true,
            
            // デジタルヒューマンからのHTMLコンテンツ表示
            // true: フレーム内にコンテンツを表示
            // false: 非表示（独自実装する場合）
            "renderContent": true,
            
            // CTAのサムネイル画像URL（オプション）
            // 140px正方形の画像を指定可能
            // "ctaThumbnailUrl": "https://your-cta-image.com",
            
            // カスタムCSS（オプション）
            // フレーム内の要素のスタイルを上書き
            // "customStyles": "h1 { font-size: 150%; }",
            
            // セッション開始時の初回プロンプト
            // デジタルヒューマンへの最初の質問/指示
            "welcomePrompt": "こんにちは。自己紹介してください。",
            
            // モバイル表示の切り替え幅（ピクセル）
            // モバイル表示したくない場合は1px等にする
            "mobileViewWidthBreakpoint": 900,
            
            // レイアウトモード
            // "fullScreen": 全画面表示
            // "overlay": 右下に小さく表示
            // "contained": 指定したdiv要素内に表示
            "layoutMode": "fullScreen",
            
            // カメラの水平位置
            // "left": 左寄せ、"center": 中央、"right": 右寄せ
            "cameraAnchorHorizontal": "center",
            
            // カメラの距離（ズームレベル）
            // close_up: クローズアップ
            // loose_close_up: ゆるめのクローズアップ
            // tight_medium_shot: タイトなミディアムショット
            // medium_shot: ミディアムショット
            // medium_full_shot: ミディアムフルショット
            // full_shot: フルショット
            "cameraAnchorDistance": "loose_close_up",
            
            // ログレベル（デバッグ用）
            // error < warn < info < debug < trace
            "logLevel": "info",
            
            // マイクの使用許可
            // true: セッション開始時にマイク許可を要求
            "enableMicrophone": true,
            
            // ユーザー入力インターフェースの表示
            // true: テキスト入力欄とマイクボタンを表示
            "showUserInputInterface": true,
            
            // 音声アクティビティ検出（VAD）
            // true: 話し始めと終わりを自動検出
            // false: プッシュトゥトーク（ボタンを押して話す）
            "enableVad": true,
            
            // 音声による割り込み機能
            // true: デジタルヒューマンが話している最中でも割り込み可能
            "enableInterruptBySpeech": true,
            
            // 自動開始設定
            // true: ページ読み込み時に自動的にセッション開始
            // false: ユーザーのクリックでセッション開始
            "autoStart": false,
            
            // コンテナレイアウトの自動調整
            "containedAutoLayout": true,
            
            // 字幕表示（UneeQ標準）
            // ※DHXのshowCaptionとは別機能
            // ※プロファイルによっては表示されない場合があります
            "showClosedCaptions": false,
            
            // 字幕の表示位置
            // bottom-left, bottom-right, bottom, top-left, top-right, top
            "captionsPosition": "top-left",
            
            // UI表示テキストの多言語対応
            "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": "デジタルヒューマンを非表示",
                    "sessionEndedDueToInactivity": "デジタルヒューマンとの会話が非アクティブのため終了しました。",
                    "sessionEndedByUser": "デジタルヒューマンとの会話が終了しました。",
                    "sessionEndedDueToConnectionLoss": "接続の問題により、デジタルヒューマンとの会話が終了しました。",
                    "sessionEndedUnexpectedly": "予期せぬ理由により、デジタルヒューマンとの会話が終了しました。",
                    "sessionTransferred": "デジタルヒューマンとの会話が引き継がれました。",
                    "reconnectingText": "再接続中..."
                },
                // デフォルト言語（英語）設定
                "default": {
                    "callToActionText": "Hi! Click here to start a conversation.",
                    "textInputPlaceholder": "Type here..."
                }
            },
            
            // カスタムメタデータ
            // 会話AIに送信される追加情報
            "customMetadata": {
                "company": "デジタルヒューマン株式会社",
                "customerId": "ABC-123",
                "name": "田中太郎"
            },
            
            // 音声認識の対応言語（最大4言語）
            // コロン区切りで指定、最初が主要言語
            "speechRecognitionLocales": "ja-JP:en-US:ko-KR:th-TH",
            
            // 音声認識のヒントフレーズ
            // 専門用語や固有名詞の認識精度向上に使用
            "speechRecognitionHintPhrases": "決定事項, 議題, 課題, 宿題, 持ち帰り, 確認事項, 参加者, 欠席者, 開始時間, 終了時間",
            
            // ヒントフレーズの重み付け（0-20）
            "speechRecognitionHintPhrasesBoost": 0
        }
        
        // Uneeqインスタンスの作成
        const uneeq = new Uneeq(uneeqOptions);

        // ========================================
        // DHX（拡張機能）設定
        // 追加の機能やUI要素に関する設定
        // ========================================
        window.dhxOptions = {
            // 【必須】DHX利用のための識別子
            // ※デジタルヒューマン株式会社から提供される値に置き換えてください
            "personaIdentifier": 'デジタルヒューマン株式会社から提供',
            
            // 【必須】Uneeqインスタンスの参照
            "uneeq": uneeq,
            
            // オーケストレーションサービスのURL
            // 通常はデフォルト値を使用
            "connectionBaseUrl": "https://ai-orch-001.digitalhumans.ne.jp",
            
            // カメラ移動のアニメーション時間（ミリ秒）
            "cameraAnchorDuration": 2000,
            
            // カスタムCSS（DHX要素用）
            "dhxCustomStyles": "",
            
            // **メンテナンス時間中のデジタルヒューマンの起動を制限しメンテナンスメッセージを表示する**
            // DHKK/UneeQの計画メンテナンスならびに、下記のお客様独自のメンテナンス日の場合も表示されます。
            "enableMaintenanceMessage":true,
            
            // お客様独自のメンテナンススケジュールを定義したJSONファイルのURLを指定
            "customerMaintenanceJsonUrl":"https://your-domain.com/maintenance/maintenance.json",
            
            // DHX字幕表示
            // SpeakAPIの発話も字幕表示可能
            "showCaption": true,
            
            // セッション終了ボタンの表示
            "showEndSession": true,
            
            // ミュート/アンミュートボタンの表示
            "showMute": true,
            
            // 起動時のローディングスピナー表示
            "showStartupSpinner": false,
            
            // 発話停止ボタンの表示
            "showStopSpeaking": true,
            
            // 接続待ちメッセージの表示
            "showWaitingMessage": true,
            
            // 応答待ちスピナーの表示
            "showWaitingSpinner": true,
            
            // 詳細な時間計測情報をコンソールに出力
            "timeDetail": true,
            
            // DHXカスタムイベント（カメラ制御など）の使用
            "useDhxCustomEvent": true,
            
            // 接続待ちメッセージのテキスト
            // {position}は順番待ちの番号に置換されます
            "waitingMessageText": "順番に接続しますので、お待ちください。<br>ただ今、他の方の対応をしております。{position}番目にお繋ぎいたします。",
            
            // ========================================
            // アイドル時の自動発話設定（展示会やエントランス設置向け）
            // コメントアウトを外して使用してください
            // ========================================
            
            // アイドル時に発話する文章のリスト
            // "idleSpeak": [
            //     "ご覧いただきありがとうございます。何かご質問はございますか？",
            //     "デジタルヒューマンについて、詳しくご説明いたしましょうか？",
            //     "こちらの展示にご興味をお持ちいただけましたか？お気軽にお声がけください。",
            //     "私たちのソリューションについて、ご不明な点がございましたらお尋ねください。",
            //     "お立ち寄りいただきありがとうございます。デモンストレーションをご覧になりますか？"
            // ],
            
            // 発話文章の選択方法
            // "sequential": 順番に発話
            // "random": ランダムに選択（デフォルト）
            // "idleSpeakSelectMode": "sequential",
            
            // 最後の発話から何秒後に自動発話するか
            // "idleSpeakTime": 180,
            
            // ========================================
            // BYO/Custom STT
            // 別途DIPでのSTTアカウント設定が必要です。
            // コメントアウトを外して使用してください
            // ========================================
            
            // 標準以外のSTTを使用する
            // "customStt": true,
						
						// ========================================
            // 有料オプション
            // ユーザーのWebカメラで毎秒静止画をバックエンドに送信
            // 送信された画像を実際に利用するためには、独自の NLP 実装（画像を処理する仕組み）が必要となります。
            // コメントアウトを外して使用してください
            // ========================================
            
            // ユーザーのWebカメラで毎秒静止画をバックエンドに送信する
            // "stillcam": true,
            
            // ユーザーのWebカメラ状態を表示するワイプを表示
            // "showStillcamWipe": true
            

        }
        
    </script>
</head>
<body>
    <h1>ホステッドエクスペリエンス2.0 HTMLテンプレート</h1>
    
    <!-- DHXスクリプトの読み込み -->
    <!-- 必ずページの最後に配置してください -->
    <script src="https://hosted-experience.jp/js/dhx.js"></script>
</body>
</html>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalhumans.jp/dev/hosted-experience/hosted-experience-code-samples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
