社内チームチャット
社内チームチャット 機能説明書
📱 概要
TeamChatは、社内コミュニケーション用のリアルタイムチャットアプリケーションです。データーベースを利用して、複数人でリアルタイムにメッセージのやり取りができます。
🚀 初期設定
プロフィール設定
アプリを初めて開くと、プロフィール設定画面が表示されます。
| 設定項目 | 説明 |
|---|---|
| 名前 | チャットで表示される名前(最大20文字) |
| アイコン | プロフィール画像として使用される絵文字 |
| カラー | アイコンの背景色(8色から選択) |
選択可能なアイコン
人物系(12種類) 👤 👨 👩 👦 👧 🧑 👨💼 👩💼 👨💻 👩💻 🧔 👴
動物系(18種類) 🐱 🐶 🐰 🦊 🐻 🐼 🐨 🦁 🐯 🐮 🐷 🐸 🐵 🐔 🐧 🦉 🦋 🐢
選択可能なカラー
| カラー | コード |
|---|---|
| 🟢 グリーン | #06c755 |
| 🔵 ブルー | #5865f2 |
| 🩷 ピンク | #eb459e |
| 🟡 イエロー | #fee75c |
| 🔴 レッド | #ed4245 |
| 💚 ライトグリーン | #57f287 |
| 🩵 スカイブルー | #5bc0eb |
| 🟠 オレンジ | #f97316 |
💬 チャット機能
トークルーム
3つのトークルームが用意されています。
| ルーム名 | アイコン | 用途 |
|---|---|---|
| 一般 | 💬 | 全体的なコミュニケーション |
| 仕事 | 💼 | 業務連絡・仕事関連の話題 |
| 雑談 | ☕ | 自由な雑談・プライベートな話題 |
メッセージ送信
- テキスト入力欄にメッセージを入力
- 送信ボタン(または Enter キー)で送信
- Shift + Enter で改行
メッセージ表示
各メッセージには以下の情報が表示されます。
┌─────────────────────┐
│ メッセージ本文 │
└─────────────────────┘
投稿者名 午後2:30 編集済み
| 表示項目 | 説明 |
|---|---|
| アイコン | 投稿者のプロフィールアイコン(他者のメッセージのみ) |
| 本文 | メッセージ内容 |
| 投稿者名 | 設定した名前(バッジ形式) |
| 時刻 | 午前/午後○:○○形式 |
| 編集済み | 編集されたメッセージに表示 |
日付表示
メッセージは日付ごとに区切られて表示されます。
| 表示形式 | 条件 |
|---|---|
| 今日 | 当日のメッセージ |
| 昨日 | 前日のメッセージ |
| ○月○日(曜日) | 今年のメッセージ |
| ○年○月○日(曜日) | 昨年以前のメッセージ |
✏️ メッセージ操作
操作方法
メッセージにマウスを乗せると、アクションボタンが表示されます。
利用可能な操作
| 操作 | アイコン | 説明 | 対象 |
|---|---|---|---|
| 返信 | ↩️ | 特定のメッセージに返信 | 全メッセージ |
| リアクション | 😊 | 絵文字でリアクション | 全メッセージ |
| 編集 | ✏️ | メッセージ内容を編集 | 自分のメッセージのみ |
| 送信取り消し | 🗑️ | メッセージを完全削除 | 自分のメッセージのみ |
返信機能
- 返信したいメッセージの返信ボタンをクリック
- 入力欄の上に返信プレビューが表示される
- メッセージを入力して送信
- キャンセルする場合は✕ボタンをクリック
返信メッセージには、元のメッセージが引用表示されます。
リアクション機能
選択可能なリアクション(6種類):
👍 ❤️ 😂 😮 😢 🎉
- 同じリアクションを再度クリックで取り消し
- 複数人が同じリアクションを付けると数字でカウント表示
- 自分が付けたリアクションはハイライト表示
編集機能
- 編集ボタンをクリック
- 入力欄が編集モード(黄色枠)に変化
- 内容を修正して送信
- キャンセルする場合は✕ボタンまたはEscキー
編集されたメッセージには「編集済み」と表示されます。
送信取り消し機能
- 送信取り消しボタンをクリック
- 確認ダイアログが表示される
- 「取り消す」をクリックで完全削除
注意: 取り消したメッセージは復元できません。他のユーザーの画面からも即座に消えます。
👥 オンライン機能
オンラインユーザー表示
サイドバーの「メンバー」セクションに、現在オンラインのユーザーが表示されます。
| 表示内容 | 説明 |
|---|---|
| アイコン | ユーザーのプロフィールアイコン |
| 名前 | ユーザー名 |
| オンラインマーク | 緑色の丸印 |
| 人数 | オンラインユーザーの合計人数 |
入力中表示(タイピングインジケーター)
他のユーザーがメッセージを入力中の場合、チャット画面下部に表示されます。
... ○○さんが入力中...
複数人が入力中の場合:
... 3人が入力中...
🔔 通知機能
新着メッセージ通知
スクロール位置が最新メッセージより上にある状態で新しいメッセージが届くと、画面下部に通知バナーが表示されます。
↓ 新しいメッセージ
バナーをクリックすると、最新メッセージまで自動スクロールします。
未読表示
別のルームに新着メッセージがある場合、サイドバーのルーム名の横に赤い点が表示されます。
⚙️ プロフィール編集
編集方法
- サイドバー上部の自分のプロフィール欄をクリック
- プロフィール編集モーダルが開く
- 名前・アイコン・カラーを変更
- 「保存」をクリック
変更は即座に反映され、以降のメッセージに適用されます。
注意: 過去のメッセージの投稿者名・アイコンは変更されません。
📱 モバイル対応
レスポンシブデザイン
画面幅768px以下の端末では、モバイル向けレイアウトに自動切り替えされます。
| 機能 | 説明 |
|---|---|
| サイドバー | 左からスライドして表示 |
| メニューボタン | ヘッダー左側に表示 |
| オーバーレイ | サイドバー表示中は背景を暗く |
操作方法
- ヘッダー左側の ☰ ボタンでサイドバーを開く
- サイドバー外をタップで閉じる
- ルーム選択でも自動的に閉じる
🌐 接続状態
ステータス表示
ヘッダー右側に接続状態が表示されます。
| 状態 | 表示 | 色 |
|---|---|---|
| 接続中 | 接続中 | 緑 |
| 接続試行中 | 接続中… | 黄 |
| 未接続 | 未接続 | 赤 |
自動再接続
ネットワーク切断後、接続が回復すると自動的に再接続されます。
⌨️ キーボードショートカット
| キー | 動作 |
|---|---|
| Enter | メッセージ送信 |
| Shift + Enter | 改行 |
| Escape | 編集/返信キャンセル |
💾 データ保存
ローカルストレージ
以下のデータがブラウザに保存されます。
| データ | 説明 |
|---|---|
| ユーザーID | 一意の識別子(自動生成) |
| プロフィール | 名前・アイコン・カラー |
データーベース
以下のデータがデーターベースに保存されます。
| データ | 説明 |
|---|---|
| メッセージ | 各ルームの全メッセージ |
| リアクション | メッセージへのリアクション |
| オンライン状態 | 接続中ユーザーの情報 |
| 入力中状態 | タイピング中ユーザーの情報 |
❓ トラブルシューティング
| 問題 | 解決方法 |
|---|---|
| メッセージが送れない | 接続状態を確認、ページを再読み込み |
| 名前が表示されない | プロフィール設定を確認 |
| 他の人が見えない | 相手がオンラインか確認 |
| 過去のメッセージが消えた | 最新100件のみ表示される仕様 |
📋 仕様一覧
| 項目 | 仕様 |
|---|---|
| 最大表示メッセージ数 | 100件/ルーム |
| 名前の最大文字数 | 20文字 |
| 対応ブラウザ | Chrome, Safari, Firefox, Edge(最新版) |
| モバイル対応 | iOS Safari, Android Chrome |
