# マルチプル 表示
## マルチプル 表示
1つのブラウザタブ内で複数のデジタルヒューマンを実行できます。
1つのブラウザタブ内に2つのデジタルヒューマンを表示
## レイアウト
複数のデジタルヒューマンを表示する場合は、コンテインドレイアウトモードが最適です。HTMLで2つの異なるIDを指定し、それぞれのオプションのcontainedElementIdNameに渡す必要があります。デジタルヒューマンが互いに重ならないように、適切なCSSを使用してください。
### HTML
```html
```
### クラス
必要なオプションを指定して、Uneeqクラスのインスタンスを2つ作成します。
```jsx
let firstDigitalHumanOptions = {
connectionUrl: "",
personaId: "149f1f29-553e-46e5-a6cc-11dd58da854e",
layoutMode: "contained",
autoStart: true,
containedElementIdName: "firstDigitalHumanLayout"
};
const firstDigitalHuman = new Uneeq(firstDigitalHumanOptions);
let secondDigitalHumanOptions = {
connectionUrl: "",
personaId: "aa47905f-501a-4050-af68-d27b10a08b4a",
layoutMode: "contained",
autoStart: true,
containedElementIdName: "secondDigitalHumanLayout"
};
const secondDigitalHuman = new Uneeq(secondDigitalHumanOptions);
```
### メッセージ
複数のデジタルヒューマンでメッセージを取得する場合、一方のデジタルヒューマンが他方のメッセージを処理しないように、frameIdでフィルタリングする必要があります。
```jsx
// Uneeqメッセージを処理するイベントリスナー
window.addEventListener('UneeqMessage', (event) => {
const msg = event.detail;
// 最初のデジタルヒューマンからのメッセージかチェック
if (msg.frameId === firstDigitalHuman.frameId) {
console.log('First Digital Human:', msg)
}
// 2番目のデジタルヒューマンからのメッセージかチェック
if (msg.frameId === secondDigitalHuman.frameId) {
console.log('Second Digital Human:', msg)
}
});
```
### コードサンプル
```html
Multi Human Test
```
---
# 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-multiple-views.md?ask=
```
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.