# uchatで何が作れるか

> 自分のサイトに設置したuchatのチャットルームに機能を追加する3つの方法と、どの用途にどの方法を選べばよいかを説明します。

uchatのチャットルームは2行の設置コードで自分のサイトに設置でき、その上にページスクリプト・スキンUI API・サーバーAPIで機能を追加できます。このページでは、3つの方法がそれぞれ何をするのか、いつどれを選ぶのかをまとめます。

## 出発点: 設置コード {#install}

すべての機能は、チャットルームをページに設置するところから始まります。`uchat.js` を一度読み込み、`<u-chat room="my-room">` タグを置くと、その場所にチャットルームが開きます。→ [5分で設置](/ja/doc/1.2)

自分のサイトの会員のニックネームや権限をそのままチャットルームで使うには、会員連携を追加します。→ [会員連携](/ja/doc/2.1)

## 3つの拡張方法 {#three-ways}

| 方法 | 実行場所 | できること | 正式な資料 |
| --- | --- | --- | --- |
| ページスクリプト | 自分のページのJavaScript | `U.chat()` でチャットルームオブジェクト(`room`)を受け取り、入室やメッセージなどのイベントに反応したり、メッセージ送信・コマンド実行・案内行の表示を行ったりします | [U.chat() と room オブジェクト](/ja/doc/3.2), [イベント](/ja/doc/3.3) |
| スキンUI API | 自分のページのJavaScript(基本スキンの中に描画) | 基本スキン(`basic-v2`)にメニューボタン、ニックネームメニューの項目、ダイアログ、会話の上下の領域、重ねて表示する領域、ニックネーム・メッセージの装飾を追加します | [スキンUI API](/ja/doc/3.4) |
| サーバーAPI | 自分のサーバー | RESTリクエストでチャットルームの接続者統計を読み取ったり、チャットルームのチャンネルにデータを送ったりします | [サーバーREST API](/ja/doc/3.6) |

ページスクリプトとスキンUI APIは同じ `room` オブジェクトから始まります。スキンUI APIは `room.skin` に入っているので、ページスクリプトが書ければそのまま続けて使えます。

## チャンネル: リアルタイムデータ {#channels}

チャンネルは、同じチャットルームにいる人同士、または自分のサーバーとチャットルームの間で、チャットメッセージ以外のデータをやり取りする通り道です。ページスクリプトでは `room.plugin.add('channel-name')` で開き、サーバーではサーバーAPIで同じチャンネルに送ります。

- ユーザー同士: 一緒に視聴、ゲーム、投票のように全員の画面をそろえる必要があるとき → [リアルタイムデータの送受信](/ja/doc/2.4)
- サーバーからチャットルームへ: 決済・注文・配信開始などサイトでの出来事をチャットルームに知らせるとき → [サーバーからチャットルームに通知を送る](/ja/doc/2.5)

送信の上限と保存サイズは[チャンネルAPIと上限](/ja/doc/3.5)にあります。

## どれを選ぶか {#choose}

| やりたいこと | 選ぶ方法 | 最初に読む資料 |
| --- | --- | --- |
| 入室した人にあいさつする、特定の単語が来たらページで反応する | ページスクリプト(イベント) | [はじめてのスクリプト](/ja/doc/1.3) |
| 送るメッセージを書き換える・止める | ページスクリプト(`before.` イベント) | [イベント](/ja/doc/3.3) |
| 1ページに複数のチャットルーム、SPAでの付け外し | ページスクリプト | [非同期読み込みと複数のチャットルーム](/ja/doc/2.2) |
| チャットルーム内にボタン・入力欄・バナーを入れる | スキンUI API | [スキンUIを拡張する](/ja/doc/2.3) |
| 管理者のニックネームを強調、特定メッセージの背景色 | スキンUI API(resolver) | [ニックネームとメッセージの装飾](/ja/doc/4.3) |
| 接続者同士で同じ動画やゲームの状態をそろえる | チャンネル | [リアルタイムデータの送受信](/ja/doc/2.4) |
| サイトで起きたことをチャットルームに知らせる | サーバーAPI + チャンネル | [サーバーからチャットルームに通知を送る](/ja/doc/2.5) |
| サイトに現在の接続者数を表示する | サーバーAPI | [サーバーREST API](/ja/doc/3.6) |

複数の方法を組み合わせて使うことがよくあります。たとえば[決済完了の通知](/ja/doc/4.4)は、サーバーAPIで送り、ページスクリプトのチャンネルで受け取ってチャットルームに表示します。

## 次のステップ {#next}

1. [5分で設置](/ja/doc/1.2)でチャットルームを設置します。
2. [はじめてのスクリプト](/ja/doc/1.3)でイベントを受け取ってみます。
3. 作りたい機能に合ったガイドを読み、細かい値はリファレンスで調べます。完成したコードは[サンプル](/ja/doc/4.1)にあります。

公開する前に[セキュリティチェックリスト](/ja/doc/2.6)を確認してください。