# 5分で設置

> チャットルームを作成し、設置コードを貼り付けて自分のサイトにチャットルームを表示します。フレームワーク・CMS・チャンネルのチャットルームへの設置と、表示されないときの確認点も扱います。

チャットルームを1つ作成し、2行の設置コードをページに貼り付けると、その場所にチャットルームが開きます。このページの例では、チャットルームID `my-room` を使います。

## チャットルームを作成する {#create-room}

[マイチャットルーム](/manage)で**チャットルームを作成**を押し、ID・名前・管理者パスワードを決めます。IDは英字・数字・`_`・`-` の4〜20文字で、あとから変更できません。IDが設置コードの `room` の値になります。

作成すると設置コードの画面に移動します。あとから管理ページの**設置コード**メニューでもう一度確認できます。

## 設置コード {#install-code}

会員連携を使わないチャットルームの設置コードです。チャットルームを表示したい場所に貼り付けてください。

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

- `<script>` はページに一度だけ入れます。`async` で読み込むので、ページの表示を妨げません。
- `<u-chat>` タグ1つがチャットルーム1つです。IDの異なる `<u-chat>` を複数置くと、1ページに複数のチャットルームが開きます。同じIDはページに1つしか置けません。
- JavaScriptで `<u-chat>` をあとから追加・削除しても、それに合わせてチャットルームが開閉します。詳しい動作は[非同期読み込みと複数のチャットルーム](/ja/doc/2.2)にあります。
- `<u-chat>` に指定できるほかの属性(会員連携、スキン、入室パスワード、言語など)は[u-chat の属性](/ja/doc/3.1)にあります。

## サイズ {#size}

チャットルームは `<u-chat>` タグのサイズに従います。`style` の `width` と `height` で指定してください。`<u-chat>` はデフォルトでインライン要素なので、`display:inline-block` または `display:block` も一緒に指定しないとサイズが反映されません。

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

設置コード画面の幅・高さの欄には、1〜4桁の数字に単位 `px`、`%`、`vh`、`vw`、`em`、`rem` のいずれかを付けた値(`500px`、`100%`、`70vh` など)だけを入力できます。コードを直接編集する場合は、CSSの値を自由に使えます。小さすぎると入力欄やユーザー一覧が正しく表示されません。

設置コード画面の **読み込み表示** で、チャットルームが表示されるまでその場所に出す形(チャットルームの骨組み、回る円、ロゴ)を選べます。コードには短い `<style>` と `<u-chat>` のクラスとして入り、JavaScript を使わず CSS だけで描きます。チャット画面が描かれるとその上を覆って消えます。画面右のプレビューで選んだ形をすぐに確認できます。

画面右下のボタンで開閉するチャットウィンドウが必要な場合は、[フローティングウィジェット](/ja/doc/2.2#widget)を使ってください。

## React・Vue・Svelte {#frameworks}

設置コード画面の**サイトに貼り付ける**でHTML、React · Next.js、Vue · Nuxt、Svelte · SvelteKitのタブを選ぶと、その方式に合ったコードが表示されます。どれも `uchat.js` を一度だけ読み込み、`<u-chat>` タグを置く方式です。

React · Next.js:

```jsx
'use client'; // Next.js App Routerでのみ必要

import { useEffect } from 'react';

export default function ChatRoom() {
	useEffect(() => {
		if (!document.querySelector('script[data-uchat]')) {
			const s = document.createElement('script');
			s.src = 'https://client.uchat.io/uchat.js';
			s.async = true;
			s.dataset.uchat = '';
			document.head.appendChild(s);
		}
	}, []);
	return <u-chat room="my-room" style={{ display: 'inline-block', width: '100%', maxWidth: '500px', height: '500px' }} />;
}
```

Vue · Nuxtでは、`u-chat` をカスタム要素として登録しないと警告が出ます(`vite.config` の `vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'u-chat' } } })`)。

Svelte · SvelteKit:

```svelte
<svelte:head>
	<script async src="https://client.uchat.io/uchat.js"></script>
</svelte:head>

<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
```

npm パッケージで設置することもできます。`@u-chat/react`・`@u-chat/vue`・`@u-chat/svelte` の `UchatRoom` は `<u-chat>` を描き、`uchat.js` を一度だけ読み込み、コンポーネントがなくなるとチャットルームも閉じます。サイズは `width`・`height`(数字は px)、会員連携は `userData`、独立サーバーは `src` で渡します。Vue は `isCustomElement` の設定なしで使えます。

```jsx
// npm install @u-chat/react
import { UchatRoom } from '@u-chat/react';

export default function Chat() {
	return <UchatRoom room="my-room" width="100%" height={500} />;
}
```

画面遷移のときにチャットルームを付け外ししたり、イベントを登録・解除したりする方法は[非同期読み込みと複数のチャットルーム](/ja/doc/2.2)を参照してください。

チャットルームをページ右下のボタンで表示するには[フローティングウィジェット](/ja/doc/2.2#widget)を使います。設置コード画面の **フローティングウィジェット** タブ(会員連携のルームは **設置の形 → フローティングウィジェット**)でコードを作れます。形(丸いボタン・下部バー・右サイドバー)、ボタンの文字・色・画像、ウィンドウのタイトル、言語、位置・サイズなどのウィジェット設定もその画面で選べます。React・Vue・Svelte は npm パッケージ `@u-chat/react`・`@u-chat/vue`・`@u-chat/svelte` で設置します。

## CMSへの設置 {#cms}

管理ページの**会員連携**をオンにすると、設置コード画面で**サイトの種類**を選べます。選んだ種類に合わせて、会員情報で入室するコードや設置ファイルが提供されます。

| サイトの種類 | 受け取るもの | 設置方法 |
| --- | --- | --- |
| GnuBoard 4/5 | PHPコード | チャットルームを表示するファイルに貼り付けます。ログイン中の会員のニックネーム・ID・レベル・管理者かどうかと会員アイコンが入ります。 |
| GnuBoard 7 | `uchat-chat-gnuboard7.zip`(設置コード画面でこのサイトの種類を選んで**コードを作成**を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます) | GnuBoard 7の管理画面 → プラグイン管理 → 手動インストールでアップロードして有効化したあと、プラグイン設定にチャットルームIDとトークンを入力し、表示位置を選びます(GnuBoard 7 7.0.10以上)。 |
| XpressEngine | `uchat2.zip`(設置コード画面でこのサイトの種類を選んで**コードを作成**を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます) | XEのウィジェットフォルダにアップロードしてから、ウィジェットとして追加します。 |
| Rhymix | XpressEngineと同じ `uchat2.zip` | Rhymixの `widgets` フォルダにアップロードしてから、管理画面 → 高度な設定 → インストールされたウィジェットでUChat2ウィジェットの**コード生成**を使ってコードを作り、ページやレイアウトに入れます。ログインした会員はニックネーム・ID・レベル・管理者かどうかで入室します。 |
| WordPress | `uchat-wordpress.zip`(設置コード画面でこのサイトの種類を選んで**コードを作成**を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます) | プラグイン → 新規追加 → アップロードでインストールし、**設定 → 유챗**にチャットルームIDとトークンを入力してから、チャットルームを表示する投稿・固定ページ・テンプレートに `[uchat]` を入れます(ブロックテーマは「ショートコード」ブロック、サイズは `[uchat height="600px"]` のように指定)。ウィジェットエリアのあるテーマは유챗ウィジェットで入れても構いません。署名は訪問者のブラウザーがページを開くたびに新しく取得するため、ページキャッシュプラグインと一緒に使えます。ログインした会員は表示名(ニックネーム)・メールアドレス(ID)・ユーザーレベルで、サイト管理者はチャットルームの管理者として、ログインしていない訪問者はゲストとして入室します。 |
| その他のサイト | PHP・Node.js・Python・Javaのコード | 会員情報の変数だけを自分のサイトに合わせて書き換えます。→ [会員連携](/ja/doc/2.1) |

GnuBoard7・XpressEngine・Rhymix・WordPress の設置ファイルはいつも同じで、**設置の形**(ページ内に設置 または [フローティングウィジェット](/ja/doc/2.2#widget))、**読み込み表示**、ウィジェットの形・ボタン・サイズは各プラグインの設定で選びます(WordPress は 設定 → 유챗、XE・Rhymix はウィジェット設定、GnuBoard7 はプラグイン設定)。変えるときにファイルをダウンロードし直す必要はありません。

設置ファイルやコードには、チャットルームのトークンが含まれるか、トークンを入力するようになっています。トークンはサーバーにだけ置いてください。

## チャンネルのチャットルーム {#channel-rooms}

会員登録なしで使えるチャンネルのチャットルームは、`https://uchat.ch/room-name` のアドレスで開きます。自分のサイトにはiframeで設置します。

```html
<iframe src="https://uchat.ch/room-name" style="display:inline-block; width:100%; max-width:500px; height:500px;" frameborder=0></iframe>
```

チャンネルのチャットルームはiframeで設置するため、`U.chat()` のページスクリプトとスキンUI APIは自分のページで使えません。拡張機能が必要な場合は、[マイチャットルーム](/manage)でチャットルームを作成し、`<u-chat>` で設置してください。

## 表示されないときの確認 {#not-showing}

| 症状 | 確認すること |
| --- | --- |
| 何も表示されない | `uchat.js` の `<script>` がページにあるか、`<u-chat>` に `display` と `width`・`height` を指定したかを確認します。 |
| 2つ目のチャットルームが開かない | 同じ `room` IDの `<u-chat>` がすでにページにあります。同じIDは最初のものだけが開きます。 |
| 属性を変えたのに変わらない | `<u-chat>` の属性の変更は検知しません。タグを削除して入れ直してください。→ [非同期読み込みと複数のチャットルーム](/ja/doc/2.2) |
| 「トークンがありません。」のようなエラー | 会員連携がオンのチャットルームに、連携コードなしで入室しました。→ [会員連携](/ja/doc/2.1#troubleshooting) |
| 入室パスワードを求められる | 管理ページで入室パスワードが設定されています。[u-chat の属性](/ja/doc/3.1)の `password` であらかじめ渡せます。 |

原因がわからない場合は、ページのアドレスに `?uchatdebug=1` を付けて開き、ブラウザのコンソールのログを確認してください。