# u-chat の属性

> チャットルームを埋め込むu-chatタグの属性と、設置・削除のルールです。

`<u-chat>` タグ1つが1つのチャットルームです。このページでは、タグに使える属性と、タグを追加・削除・変更したときの動作をまとめます。設置コードそのものは[5分で設置](/ja/doc/1.2#install-code)を参照してください。

```html
<script async src="https://client.uchat.io/uchat.js"></script>
<u-chat room="my-room" lang="ko" style="display:inline-block; width:100%; max-width:400px; height:600px;"></u-chat>
```

## 属性一覧 {#attributes}

`style` と `wrap` を除くすべての属性が、チャットルームの設置オプションとして渡されます。値はすべて文字列です。

| 属性 | 形式 | 説明 |
| --- | --- | --- |
| `room` | チャットルームID | 必須。ない場合、タグは無視されます |
| `user_data` | 署名済み文字列 | 会員連携の接続情報。サーバーで作って入れます。形式は[会員連携の署名仕様](/ja/doc/3.7) |
| `user_data_url` | URL | 接続情報をスクリプトとして取得するURL。下の [user_data_url](#user-data-url) を参照 |
| `skin` | スキン名 | 使用するスキン。省略すると管理ページで選んだスキンを使います |
| `skin_arguments` | JSON文字列 | スキン設定をこのページでだけ上書きします。下の [skin_arguments](#skin-arguments) を参照 |
| `password` | 文字列 | 入室パスワード（または管理者パスワード）。パスワード付きのチャットルームに、入力を求められずに入室します |
| `lang` | 言語コード | チャットルームの画面言語。下の [lang](#lang) を参照 |
| `invite` | ニックネーム | 入室直後に、このニックネームの人を自分の個人チャンネルに招待します。`user_data_url` と一緒に使うと動作しません |

- 属性名はHTMLのルールどおり、大文字と小文字を区別しません。
- `user_data` と `user_data_url` を両方指定すると、`user_data` を使います。
- 会員連携をオンにしたチャットルームでは、`user_data` も `user_data_url` もなしで入室するとエラー203で拒否されます。
- `password` の値はページのソースにそのまま表示されます。誰でも見られるページなら、パスワードをかける意味はありません。

## サイズ {#size}

サイズは `style` で指定します。チャットルームのiframeは、タグのサイズに合わせて幅・高さ100%で表示されます。

```html
<u-chat room="my-room" style="display:inline-block; width:100%; height:70vh;"></u-chat>
```

`<u-chat>` はデフォルトでインライン要素なので、`display:inline-block`（または `block`）と高さを一緒に指定してください。高さが0だとチャットルームは表示されません。管理ページの設置コードは、1〜4桁の数字に `px`、`%`、`vh`、`vw`、`em`、`rem` の単位を付けた値を生成します。

## user_data_url {#user-data-url}

`user_data` をページに直接書けない場合（静的ページ、キャッシュされるページ）に使います。

1. チャットルームが `{user_data_url}?room={チャットルームID}` を `<script>` として読み込みます。
2. そのスクリプトは `window.Uchat_cache.token['チャットルームID']` に[署名済み文字列](/ja/doc/3.7)を入れる必要があります。
3. スクリプトが終わると、その値で入室します。

```js
// https://example.com/uchat-token.js?room=my-room のレスポンス（サーバーがログイン中の会員をもとに作る）
window.Uchat_cache.token['my-room'] = 'id user1|level 5|nick %ED%99%8D%EA%B8%B8%EB%8F%99|room my-room|time 1700000000|hash ...';
```

このレスポンスはスクリプトとして実行されます。自分のサイトと同じオリジンから返し、会員ごとに異なる値なので `Cache-Control: no-store` を付けてください。

## skin_arguments {#skin-arguments}

管理ページで決めたスキン設定の上に、このページだけで使う値を上書きします。マージされた値は、ページスクリプトで `room.skin.arguments` として読めます。

```html
<u-chat room="my-room" skin_arguments='{"lang":"en"}' style="display:inline-block; width:100%; max-width:400px; height:600px;"></u-chat>
```

JSONが不正な場合はエラーなしで `{}` として扱われ、何も変わりません。値が反映されないときは、まずJSONの文法（ダブルクォーテーション、カンマ）を確認してください。属性値をシングルクォーテーションで囲むと、JSON内のダブルクォーテーションをそのまま使えます。

## lang {#lang}

チャットルームの画面言語は、以下の順で最初に該当する値を使います。言語パックがある言語は `ko`、`en`、`ja` です。

1. `lang` 属性
2. 管理ページ（または `skin_arguments`）の `lang`
3. チャットルームを埋め込んだページの `<html lang>`
4. ブラウザの言語
5. 英語

`ko-KR`、`ja_JP` のように地域が付いた値は、前の部分だけを見ます。

## 設置・削除と属性の変更 {#lifecycle}

- uchat.jsは最初に読み込まれたときにページ内の `<u-chat>` をすべて設置し、その後はタグが文書に**追加されると設置し、削除されると破棄します**（MutationObserver）。
- **属性を変更しても再設置はされません。** `room`、`user_data` などを変えるには、タグを削除して新しいタグを入れてください。

```js
function replaceRoom(container, attrs) {
	container.querySelector('u-chat')?.remove();
	const tag = document.createElement('u-chat');
	for (const [name, value] of Object.entries(attrs)) tag.setAttribute(name, value);
	tag.style.cssText = 'display:inline-block; width:100%; max-width:400px; height:600px;';
	container.appendChild(tag);
}
```

- 同じ `room` 値のタグは、1ページに1つだけ設置されます。2つ目のタグは無視されます。
- タグを削除すると、そのチャットルームにだけ登録したイベント（`U.chat('my-room').on`、`room.on`）も一緒に削除されます。`U.chat('*')` で登録したイベントは残ります。

非同期読み込みやSPAでタグを扱う流れは、[非同期読み込みと複数のチャットルーム](/ja/doc/2.2)を参照してください。