u-chat の属性

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

<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>

属性一覧

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

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

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

サイズ

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

<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 をページに直接書けない場合（静的ページ、キャッシュされるページ）に使います。

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

// 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

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

<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

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

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

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

設置・削除と属性の変更

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

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でタグを扱う流れは、非同期読み込みと複数のチャットルームを参照してください。