uchatで何が作れるか

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

出発点: 設置コード

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

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

3つの拡張方法

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

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

チャンネル: リアルタイムデータ

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

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

送信の上限と保存サイズはチャンネルAPIと上限にあります。

どれを選ぶか

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

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

次のステップ

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

公開する前にセキュリティチェックリストを確認してください。