📝 実装注記
1. 画面構成
左サイドバー(220px固定)+メインエリアの2カラムレイアウト、一覧・分析型テンプレートに準拠。メインは KPI(5枚)→フィルタパネル→タブ切替(クロス集計/一覧表示)の順。修了証は研修計画単位の指標のため、KPIと集計軸(列)で表示する(per講座の一覧明細には含めない)。クロス集計タブがデフォルト表示。フィルタの「集計軸(行)」×「集計軸(列)」で動的にクロス集計テーブルのヘッダーが変わる。法人管理者は全事業所横断、事業所管理者は自事業所+所属個人の範囲で表示。
2. 権限制御
法人管理者アカウント(F-CORP-004): 法人全体/全事業所/全個人/全講座を横断して集計可能。フィルタに「事業所」選択肢あり。事業所管理者アカウント(F-SITE-005): 自事業所+所属個人アカウントのみ。フィルタから「事業所」選択肢を非表示にし、自事業所データのみ表示。サイドバーも「法人管理」セクションを「事業所管理」に差し替え(「契約管理」は閲覧のみ)。F-AUTH-004(アカウント種別判定)で表示範囲を制御。
3. データ表示
KPIカードはAPI(/wp-json/lms/v1/history/summary)から取得。クロス集計テーブルはlms_viewing_logs+lms_certificates+lms_completion_recordsをJOINし集計軸に応じて動的生成。一覧表示はlms_viewing_logsを基本に各テーブルをLEFT JOINし、直近順でページネーション(8件/ページ)。事業所アカウントの受講履歴は「受講しました!」「証明書」が回数表示(「済×3」「2件」等)。ダミーデータは2026年度上半期(4月〜9月)実績を想定。
4. インタラクション
フィルタ「集計する」ボタンクリック→クロス集計テーブル・一覧・KPIを再描画。タブ切替→クロス集計/一覧表示を切替。一覧の受講者名クリック→該当ユーザーの登録情報確認(F-CORP-005/F-SITE-006)に遷移。講座名クリック→Web講義ページ(F-WEB-003)に遷移。「再集計」ボタン→キャッシュをバイパスし最新データで再集計。フィルタは折りたたみ可(デフォルト展開)。
5. レスポンシブ
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し1カラム表示。フィルタグリッドは4列→2列にブレイク。クロス集計テーブルは横スクロール対応(月別12列+合計列のため必須)。一覧テーブルも横スクロール。スマホ(480px以下)ではKPI4枚を2列×2行に変更。フィルタグリッドは1列化。タブは横スクロール可能にする。
6. パフォーマンス・セキュリティ
クロス集計は大量データ(法人配下の全事業所×全個人×全講座×最大3年間)を扱うため、日次バッチで集計テーブル(lms_history_aggregation)を更新しキャッシュ利用(TTL: 10分)。「再集計」ボタンでキャッシュバイパス可。一覧表示はサーバーサイドページネーション必須(クライアント側で全件取得しない)。法人管理者は自法人のデータのみ、事業所管理者は自事業所のデータのみアクセス可能(行レベルセキュリティ: WHERE corp_id = :current_corp_id / WHERE site_id = :current_site_id)。個人名等のPIIを含むため、APIレスポンスは認証済み+管理者ロール必須。
💡 本ワイヤーフレームはPC表示(1200px幅)を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。