コードスニペットサン
以下のコードブロックには、ホステッドエクスペリエンス2.0で使用することができる、標準的なコードスニペットが含まれています。
- コードをコピーしてindex.htmlで保存し、
httpsでリクエストできる場所やURLに設置してください。てください。
- パラメータ、値については、設定オプションを参照してください。
サンプル
<!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": "",
// 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,
}
</script>
</head>
<body>
<h1>ホステッドエクスペリエンス2.0 HTMLテンプレート</h1>
<!-- DHXスクリプトの読み込み -->
<!-- 必ずページの最後に配置してください -->
<script src="https://hosted-experience.jp/js/dhx.js"></script>
</body>
</html>
お役に立ちましたか？
😞
😐
🤩
最終更新日 May 15, 2025