Classroom Check-in

オンライン講座の入退室管理システム

🖥 システム構成

システムがどのように動いているかを図解で説明します

マルチテナント構成

Classroom Check-inはマルチテナント対応のシステムです。 組織・学校ごとに独立したテナントを持ち、データは完全に分離されています。

flowchart TB subgraph テナントA["テナントA（○○学校）"] A1[管理者A] A2[受講者A1] A3[受講者A2] DA[(データA
講座・セッション)] end subgraph テナントB["テナントB（△△塾）"] B1[管理者B] B2[受講者B1] B3[受講者B2] DB[(データB
講座・セッション)] end subgraph 共通基盤["共通基盤"] API[APIサービス] WEB[Webアプリ] NTF[通知サービス] end A1 --> WEB A2 --> WEB A3 --> WEB B1 --> WEB B2 --> WEB B3 --> WEB WEB --> API API --> DA API --> DB NTF --> DA NTF --> DB

🏢 テナント分離

各テナントのデータは完全に分離されており、他のテナントからアクセスすることはできません。

🔗 専用URL

各テナントには専用のURL（/tenant-id/admin）が発行されます。

システム全体像

Classroom Check-inは、複数のサービスが連携して動作しています。 下の図は、システム全体の構成を示しています。

flowchart TB subgraph ユーザー["👤 ユーザー"] A[受講者] B[管理者] end subgraph フロントエンド["💻 Webアプリケーション"] C[受講者画面
講座選択・IN/OUT] D[管理者画面
講座・受講者・セッション管理] R[テナント登録画面] end subgraph バックエンド["⚙ バックエンドサービス"] E[APIサービス
データの読み書き] F[通知サービス
退室忘れ通知] end subgraph データベース["🗃 データ保存"] G[(Firestore
テナント・講座・セッション等)] end subgraph 外部サービス["🌐 外部サービス"] H[Google Classroom] I[Gmail
通知メール送信] J[Firebase Auth
認証] end subgraph 監視["📊 監視"] M[Uptime Check] N[アラート通知] end A --> C B --> D B --> R C --> E D --> E R --> E E --> G F --> G F --> I C -.->|遷移| H E --> J M --> E M --> C M --> F M -.->|障害検知| N

💻 Webアプリケーション

ユーザーが直接操作する画面です。受講者用、管理者用、テナント登録用があります。

⚙ バックエンドサービス

裏側で動作するプログラムです。データの保存や通知の送信を行います。

🗃 データベース

テナント、講座、セッション記録など、すべてのデータを保存する場所です。

🌐 外部サービス

Google Classroom、Gmail、Firebase Authなど、連携している外部のサービスです。

📊 監視

システムの稼働状況を監視し、障害時にアラートを送信します。

データの流れ

IN 入室時の処理

sequenceDiagram participant U as 受講者 participant W as Webアプリ participant A as APIサービス participant D as データベース participant C as Classroom U->>W: INボタンをクリック W->>A: 入室リクエスト送信 A->>D: セッション作成 D-->>A: 作成完了 A-->>W: 成功レスポンス W->>C: Classroomへ自動遷移 Note over U,C: 受講者はClassroomで講座を受講
  1. 1. 受講者がINボタンをクリック
  2. 2. システムが入室時刻を記録（セッション作成）
  3. 3. 自動的にGoogle Classroomの講座ページへ移動

OUT 退室時の処理

sequenceDiagram participant U as 受講者 participant W as Webアプリ participant A as APIサービス participant D as データベース U->>W: OUTボタンをクリック W->>A: 退室リクエスト送信 A->>D: セッション更新
(退室時刻を記録) D-->>A: 更新完了 A-->>W: 滞在時間を返却 W->>U: 完了メッセージ表示
  1. 1. 受講者がOUTボタンをクリック
  2. 2. システムが退室時刻を記録
  3. 3. 滞在時間が自動計算されて保存

🔔 退室忘れ通知の処理

sequenceDiagram participant S as スケジューラ participant N as 通知サービス participant D as データベース participant G as Gmail participant U as 受講者 S->>N: 定期実行（毎時） N->>D: 未退室セッションを検索 D-->>N: 該当セッション一覧 loop 各セッション N->>D: 通知ポリシーを確認 alt 通知条件に該当 N->>G: メール送信依頼 G->>U: 通知メール end end
  1. 1. システムが1時間ごとに自動チェック
  2. 2. 入室中のまま一定時間が経過したセッションを検出
  3. 3. 通知ポリシーに従って受講者にメール送信

保存されるデータ

システムは以下のデータを保存・管理しています。すべてのデータはテナントごとに分離されています。

🏢 テナントデータ
  • テナントID
  • 組織名
  • オーナー（管理者）
  • 作成日時
📚 講座データ
  • 講座名
  • 説明文
  • Classroom URL
  • 必要視聴時間（分）
  • 表示設定
👤 受講者データ
  • メールアドレス
  • 表示名
  • 役割（受講者/管理者）
  • 割当講座
📋 セッションデータ
  • 受講者ID
  • 講座ID
  • 入室時刻
  • 退室時刻
  • 状態（入室中/完了）
🔔 通知ポリシーデータ
  • 対象範囲
  • 通知タイミング
  • 有効/無効

運用監視

システムの安定稼働のため、24時間体制で監視を行っています。

📊 Uptime Check

5分間隔でサービスの稼働状況を確認

  • ・APIサービス
  • ・Webアプリケーション
  • ・通知サービス
🔔 アラート通知

障害検知時にメール通知

  • ・サービス停止検知
  • ・レスポンス遅延検知
  • ・エラー率上昇検知
🕑 定期テスト

毎日自動でスモークテストを実行

  • ・ヘルスチェック
  • ・API疎通確認
  • ・GitHub Actions連携

使用している技術

このシステムは以下の技術を使用して構築されています。

⚡

Google Cloud

サーバー・データベース

🛠

Next.js

Webアプリケーション

🚀

Cloud Run

サービス実行環境

🔒

Firebase Auth

ユーザー認証

詳細な技術情報

より詳細な技術情報については、 GitHubリポジトリ をご覧ください。