> 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/installation-guide.md).
# 設置手順
デジタルヒューマンのプロジェクトは難しくありません。最高のプラットフォーム、AIバックエンド、ウェブフレンドリーで柔軟なフロントエンド、そして強力なインテグレーションにより、簡単に構築し、効率的に立ち上げ、価値を見出すことができます。
デジタルヒューマンが表示ができたら、ウェブサイト上でデジタルヒューマンの表示方法、ユーザーとの対話方法、表示したいコンテンツをカスタマイズできるようになります。
## 準備
最低限、下記を準備してください。
| 情報 | DIP(Digital Humans Identity Portal）にアクセスして、デジタルヒューマンの`personaId`と`personaIdentifier` を確認します。 |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| 環境 | httpsでアクセスできるWebサイトやWEBサーバー（S3でも可）。開発環境として例外的に [http://localhost:3000](http://localhost:3000/) や などでアクセスできる環境。 |
| 会話AI / チャットボット | [接続実績のある会話AI・チャットボット](/ops/chatbot-integration/compatible-chatbot-ai-list.md)で対応済と表示されているサービスならびに環境 |
| HTMLエディタ | [Visual Studio Code](https://code.visualstudio.com/)などのエディタ |
## 設置作業
DIPにアクセスして下記を設定します。
| **許可ドメイン** | セキュリティ保護に関する設定です。
httpsでアクセスできるWebサイトやWEBサーバーを設定します。登録するURLの末尾にスラッシュ（/）は不要です。
|
| ------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| **NLPアカウント** | `Parrot` |
### フロントエンド表示用のファイルを作成
VSCODE等をひらいてHTMLファイルを作成します。下記のindex.html サンプルをコピーして張りつけます。
その後、下記の2ヶ所を修正します。修正箇所は`personaId`と`personaIdentifier`の2ヶ所だけです。
```jsx
tml
ホステッドエクスペリエンス2.0 HTMLテンプレート
ホステッドエクスペリエンス2.0 HTMLテンプレート
```
### ファイルのアップロード
index.htmlをWEBサーバー等にファイルをアップロードし、アップロードしたWEBサーバーにブラウザからアクセスします。
アップロード先はホスティング企業やWEB担当に確認してください。AWS上のS3などのサービスでも利用可能です。
右下にCTAが表示されたら成功です！🙌 おめでとうございます！
下記の表示はデジタルヒューマンプラットフォーム上でドメインが許可されていない事が原因です。
```html
Error creating session: Domain not allowed (https://digitalhumans-demo.jp)
```
右下にCTAも何も表示されない場合は、JavaScriptコンソールを確認してください。
下記の表示はindex.html サンプルをそのままコピペされたことが原因です。`personaId` を正しい値に修正してください。
```html
UneeQ Hosted Experience could not be loaded, personaId not valid: DPIからpersonaIdコピー&ペーストする
```
下記の表示はindex.html サンプルをそのままコピペされたことが原因です。`Personaldentifier` を正しい値に修正してください。
```html
Personaldentifier: DPIからpersonaldentifierをコピー＆ペーストする is not found
```
下記の表示はDIP上で`許可ドメイン`に`設置ドメイン`が登録されていないことが原因です。DIPにアクセスして許可ドメインに登録してください。
正
```jsx
https://digitalhumans-demo.jp
```
誤
```jsx
https://digitalhumans-demo.jp/ # 最後の"/"が不要です。
https://digitalhumans-demo.jp/○○.html # ファイルパスは不要です。
http://digitalhumans-demo.jp/ # https でアクセス出来るようにしてください。
```
### 話しかけてみる
マイクとスピーカの設定が適切であれば、あなたが話しかけたことを認識してオウム返ししてくると思います。下記のような現象が出た場合は原因を特定してみましょう。
| 現象 | 原因の可能性 |
| ------------------------------------- | ----------------------------------------------------------------------------------------------- |
| 話しかけたが応答がない | マイクを認識していない可能性があります。 [こちら](/users/troubleshooting/digitalhuman-not-hearing-voice.md)を参考にしてください。 |
| テキストインプットにメッセージを入れると応答するが、話しかけても応答がない | マイクを認識していません。[こちら](/users/troubleshooting/digitalhuman-not-hearing-voice.md)を参考にしてください。 |
| デジタルヒューマンが喋っているように見えるが声がしない | スピーカの設定が誤っているかミュートになっていると思われます。 |
### 会話AIの設定を行う
ご準備いただいた会話AIの設定を行いましょう。下記のページを参考にして設定を行ってください。
[会話AIやチャットボットとの接続を変更する](/ops/chatbot-integration/change-chatbot-connection.md)
### カスタマイズする
下記のページを参考にしてindex.htmlを修正するだけで機能のOFF/ONや表示のカスタマイズが可能です。
[カスタマイズ](/quickstart/production/quickstart-custom-domain.md)
### マニュアル オーバーライド
デフォルトでは、提供されるJavaScriptのコードスニペットを追加するだけで、所有および管理する任意のウェブサイトにデジタルヒューマンを埋め込むことができます。ユーザーが特定のアクションを起こすまでinit()関数の実行を遅延させるなど、JavaScriptの実行を手動で制御したい場合は、コード内でこの関数（例: `window.uneeqInstance.init()` またはUneqクラスをインスタンス化する方法）を呼び出すだけで済みます。
init()\` を手動で呼び出す場合、関数が呼び出される**順序**に特に注意してください。イベントリスナーは初期化の前に作成する必要があります。 {% endhint %}
```jsx
console.log('Setting up UneeQ Event Listeners');
eventManager.addHandler('UneeqMessage', async (event) => {
await handleUneeqMessage(event); // 特定のイベントにリスナーをバインドする
});
await initializeUneeq(); // デジタルヒューマンを起動する
console.log('UneeQ initialized');
```
### 既存サイトに組み込む
既存サイトにコードスニペットを挿入してください。この時、ドメインを許可ドメインにいれることを忘れないでください。
オーバーレイモードやコンテインドレイアウトモードなどを活用すると導入がスムーズです。
## トラブルシューティング
デジタルヒューマンの設置時によくある症状と対処です。
### 「Domain not found」エラー（ドメインが許可されていない）
コードスニペットを設置したドメインが許可ドメインに登録されていない場合に発生します。許可ドメインは、第三者のサイトでコードスニペットが不正に利用されるのを防ぐためのセキュリティ機能です。
**対処:** 設置先のドメインを許可ドメインに追加してください。詳細は [セキュリティ保護](/dev/hosted-experience/hosted-experience-security.md) を参照してください。
### スピナーが回り続けて接続できない
読み込みインジケーター（スピナー）が回り続けて先に進まない場合、ネットワーク接続の問題が考えられます。
**対処:** ネットワーク接続と、必要なポートが開放されているかを確認してください。必要なネットワーク要件は [ファイアウォール要件](/dev/overview/firewall-requirements.md) を参照してください。
### 起動するがセッションがすぐ終了する
デジタルヒューマンは表示されるのにセッションがすぐ終了する場合、設定の問題が考えられます。
**よくある原因:**
* **音声合成（TTS）の設定:** DIP のペルソナ設定で TTS が正しく設定されているか確認してください（[利用できる言語と音声認識・音声合成](/ops/persona-dip/languages-and-speech-synthesis.md)）。
* **会話AI（チャットボット）連携:** 会話エンドポイントが正しく応答し、有効なレスポンスを返しているか確認してください。