> 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/quickstart/demo/quickstart-frontend.md).

# Webサイト / アプリ（フロントエンド）

ホステッドエクスペリエンス デモコンフィグレーターの使い方と設定方法です。

![デモ設定ページ画面](/files/VTIgsWqDJbXI9vekHIJE)

デモ設定ページ画面

## ホステッドエクスペリエンス デモコンフィグレーター

* お送りしたメールに記載の**デモURL**にPCブラウザやスマホでアクセスしてください。
* 設定変更はデモ設定ページ（/settings）から行います。
* デジタルヒューマンのフロントエンドを簡単に導入できる[ホステッドエクスペリエンス](https://docs.digitalhumans.jp/hosted-experience-overview)を使用します。今回はホステッドエクスペリエンス デモコンフィグレーターをご準備しました。
  * ホステッドエクスペリエンスは、デスクトップやラップトップ、スマートフォンでも表示、対話可能です。
  * デジタルサイネージ等は、Androidなどを搭載し、マイクとスピーカーの入出力が可能な端末であればほぼ利用できると思われます。必要スペック等は[デジタルヒューマンを快適に利用するためのシステム要件](https://docs.digitalhumans.jp/digitalhumans-system-requirements)をご確認ください。
* [ホステッドエクスペリエンス](https://docs.digitalhumans.jp/hosted-experience-overview)ページを参考にして、ご自身のドメインやWEBサイトに設置、機能を追加することが可能です。

## 話しかける方法と音声認識モードの違い

![フルビュー、エンハンスド・スピーチ・レコグニッションで動作中のUI画面（背景未設定）](/files/LDTJLXGabx7NTapzl8i6)

フルビュー、エンハンスド・スピーチ・レコグニッションで動作中のUI画面（背景未設定）

### エンハンスド・スピーチ・レコグニッション モード

* デフォルトではスピーチレコグニションモードに設定されています。ウェイクワードやウェイクアクションなしに、マイクに向かって話しかけてください。
* 発話が音声認識されない場合は、[こちら](https://docs.digitalhumans.jp/digitalhuman-not-hearing-voice)のページを参考に端末のマイク入力を確認してください。

### PTT（プッシュトゥートーク）モード

* 展示会などで背景音が多い場合は、`enableVad`を`false`にして擬似的なPTT（プッシュトゥートーク）モードをご利用ください。`enableVad`を`false` にすると、ユーザーはマイクボタンを押して話す必要があります。
* 録音中のアイコンになっているにもかかわらず、発話が音声認識されない場合は、[こちら](https://docs.digitalhumans.jp/digitalhuman-not-hearing-voice)のページを参考に端末のマイク入力を確認してください。

## デモページをカスタマイズするには？

* フロントエンドは、[ホステッドエクスペリエンス](https://docs.digitalhumans.jp/hosted-experience-overview)を使って簡単にデプロイ、調整、変更、ができる仕様になっています。
  * 今回は限られた時間内でより簡単に調整できるように、デモや開発期間中はホステッドエクスペリエンス デモコンフィグレーターをご提供しています。
* デモの表示設定変更はデモ設定ページ（/settings）から行います。
* キャラクターや背景画像の変更、音声合成の変更はDIPにて行えます。 <https://dip.digitalhumans.ne.jp/>
* 必要な認証情報はお送りしたメールに記載しております。
  * 初期パスワードは未設定なので、[**パスワードをお忘れですか？**](https://auth.digitalhumans.ne.jp/u/login/password-reset-start/Username-Password-Authentication?state=hKFo2SBNX085N2VaVFQ5NC1pSnNRbTAxY01LQ242cU9VSFNUMKFur3VuaXZlcnNhbC1sb2dpbqN0aWTZIE9HTGFSWUc3T0R5Z21tZnRnWUxkMEhUNTl3Y3hzN1hLo2NpZNkgOG8zck9icXNLa2Vxa0RnYTBnQm5lZXYycXViSkZ4d0Y)からパスワードを設定してください。
  * 認証アプリによる2段階認証が必須です。
* Embedテンプレートを選択すると、「Embed設定」の背景URLにiframeで外部サイトのURLまたは画像URLを設定できます。背景を活用することで、実際のサイトに設置したようなデモを体験できます。 ⚠️ iframeはオリジン間リソース共有 (CORS) によって制限されるため、表示できないURLがあります。
  * デジタルヒューマンの表示エリアの背景は差し替え可能です。DIPからご設定ください。

## DIP、Difyの管理画面を提供していない場合

デモの場合、環境の制限で提供していない場合があります。 やりたいことがある、質問への回答が適切ではない、喋らせたいことがある場合はサポートセンターまでお問い合わせください。 量や技術的可否によりますが、可能な限り対応いたします。

<https://support.digitalhumans.jp/_hcms/mem/login?redirect_url=https%3A%2F%2Fsupport.digitalhumans.jp%2Ftickets%2Fnew>

## ホステッドエクスペリエンス デモコンフィグレーターの使い方

デモの設定画面から、**ホステッドエクスペリエンスのカスタマイズできる範囲で**各環境設定を行えます。設定を反映すれば、リンクを共有した場合でも設定が反映されています。

### ページ構成

ホステッドエクスペリエンス デモコンフィグレーターは以下の2つのページで構成されています。

* デモページ（LP） デジタルヒューマンを公開・体験するページです。URLは`/{ワークスペース}/{デモ名}`の形式です。
* デモ設定ページ（/settings） デモページの各種設定を行えます。URLは`/{ワークスペース}/{デモ名}/settings`の形式です。

### パラメータ設定

![デモ設定ページ画面](/files/1OLOxW3axGkKDurscuEV)

デモ設定ページ画面

設定画面では、以下のパラメータを設定できます。

**LPテンプレート**

* デモページ（LP）のテンプレートとコンテンツ設定

  | 名称         | 説明                                                                                                                                           |
  | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
  | 背景URL      | Embedテンプレート選択時に「Embed設定」セクションに表示されます。デジタルヒューマン表示エリアの背後に表示する画像URLまたは外部サイトURL（iframe）を設定できます。iframeで設定する場合は、対象ドメインがiframeでの埋め込みを許可している必要があります。 |
  | ペルソナ名      | デモページ（LP）に表示されるペルソナ名を変更します。                                                                                                                  |
  | ドキュメントタイトル | デモページ（LP）のブラウザタブに表示されるタイトルを変更します。                                                                                                            |
  | デモHTML     | デモページ（LP）上の説明文エリアに表示するHTMLを変更します。                                                                                                            |
* デモページ（LP）のデザインテンプレートを選択できます。

  | テンプレート名     | 説明                |
  | ----------- | ----------------- |
  | Mist（デフォルト） | グラジエントメッシュ＋ガラスカード |
  | Trust       | 2カラム、企業向けクリーン     |
  | Ma          | 余白の美学、極限ミニマル      |
  | Classic     | 旧LP — 2カラム、企業感    |
  | Embed       | 既存サイトに重ねて疑似体験     |
* テンプレート選択後、以下の項目をカスタマイズできます。

  | 項目          | 説明                                    |
  | ----------- | ------------------------------------- |
  | LPコンテンツ     | 説明文エリアに表示するHTMLテキスト（デモHTML）           |
  | デザイン        | カラーテーマ（「デフォルトに戻す」で選択中テンプレートのデフォルト色に戻す |
  | プライバシーノーティス | 同意文の表示設定                              |
  | フッター        | フッターテキスト                              |
  | カスタムCSS     | 独自スタイルの追加                             |

**UneeQ Options**

設定パラメータの詳細はこちらからご参照ください。

<https://docs.digitalhumans.jp/hosted-experience-configuration-options>

**DHX Options**

設定パラメータの詳細はこちらをご参照ください。

<https://docs.digitalhumans.jp/hosted-experience-methods>

**画面下部ボタン**

| ボタン名            | 説明                                                                                          |
| --------------- | ------------------------------------------------------------------------------------------- |
| **リセット**        | 未保存の変更を破棄し、現在の保存済み設定に戻します。                                                                  |
| **ライブコンソールで確認** | <p>オプション設定を仮保存し、ライブコンソールで動作確認します。テンプレートのデザイン変更は反映されません。データベースには保存されないた<br>め、安全にテストできます。</p> |
| **全設定を公開デモに反映** | 入力された設定内容を公開デモ環境（LP）に反映します。                                                                 |

### 動作確認・設定の反映

![デモ設定ページ画面](/files/rOGXew0vTScqULA4JkAG)

デモ設定ページ画面

**動作確認をする**

設定内容を確認するには、ページ下部の「`ライブコンソールで確認`」ボタンから実際に起動して、動作をご確認ください。

**コードスニペットを取得する**

設定内容に基づき、独自環境にデジタルヒューマンを設置するためのコードスニペットが表示されます。

**デモページに環境設定を反映する**

「全設定を公開デモに反映」ボタンをクリックすると、設定内容が公開デモページに即時反映されます。

**設定を初期化する**

以前に設定した環境設定は、以下の方法で初期化できます。

* **フォームを保存前の状態に戻す**：設定ページ下部の「リセット」ボタンをクリックします。未保存の変更が破棄され、現在の保存済み設定に戻ります。
* **特定の項目をデフォルト値に戻す**：各項目右の「デフォルト」ボタンをクリックします。該当項目のみデフォルト値にリセットされます。

### デジタルヒューマン起動後のコントロール

![ライブコンソール画面](/files/1l5O5q64XjPZ3vGKpYw2)

ライブコンソール画面

ページ下部の「ライブコンソールで確認」ボタンを使用してデジタルヒューマンを起動すると、ライブコンソールが開き、動作を確認できます。

これはユーザへ見せる画面ではなく、一連の動作を確認するための画面です。このパネルから、デジタルヒューマンの各種メソッドを簡単に操作できます。

メソッドの一覧は[こちら](https://docs.digitalhumans.jp/hosted-experience-methods)からご確認ください。

### 音声認識・音声合成の調整

特別な指定がない限りデモ環境は下記の構成で設定しています。設定変更はDIPから行います。

* 音声認識（STT）- Google Speech-to-Textをベースに拡張しています
* 音声合成（TTS）- [Microsoft Azure Text to Speech](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support?tabs=stt#prebuilt-neural-voices) `ja-JP-NanamiNeural` (女性)

**よくある質問**

* SSMLを利用するには？（話速・ピッチ・読み方をカスタマイズできます。）

  <https://docs.digitalhumans.jp/speech-control-ssml>
* デジタルヒューマンで利用できる言語（聞き取り・発話）

  <https://docs.digitalhumans.jp/languages-and-speech-synthesis>

{% hint style="info" %}
フリートライアル以上の方は、「[会話AIの設定](/quickstart/free-trial/quickstart-conversation-ai.md) 」もご覧ください。
{% endhint %}