リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ShiftMate - シフト表自動作成メーカー
スタッフ別・月間シフト集計サマリーの表示
## 1. 目的
自動生成したシフト表を確認する際、各スタッフが「今月何日出勤予定か」「早番・中番・遅番それぞれ何回か」を一目で把握できるサマリーパネルを追加する。シフト担当者が労働時間の偏りや希望勤務日数とのズレをすぐに発見できるようにし、手動修正の判断を助けることが目的。
## 2. 具体的な仕様
### 2-1. 表示場所・タイミング
- シフト表(カレンダーグリッド)の直下に「📊 シフト集計サマリー」セクションを追加する。
- シフト表が生成・更新(手動修正含む)されるたびに自動で再計算・再描画する。
- 折りたたみ式(デフォルト展開)とし、見出しクリックで表示/非表示を切り替えられる。
### 2-2. テーブル構成
以下の列を持つHTMLテーブルを描画する。
| 列名 | 内容 |
|------|------|
| スタッフ名 | 登録名 + 雇用区分バッジ(例: [社員]) |
| 合計出勤日数 | 当月の出勤予定コマ数(実数) |
| 希望日数 | スタッフ登録時に設定した希望勤務日数 |
| 差分 | 合計出勤日数 − 希望日数(±表示、0が理想) |
| 早番 | 早番シフトの割り当て回数 |
| 中番 | 中番シフトの割り当て回数 |
| 遅番 | 遅番シフトの割り当て回数 |
- テーブルはスタッフ登録順に表示する。
- 差分が +2以上の行は薄い赤背景、−2以下の行は薄い黄背景でハイライトし、偏りを視覚的に伝える。差分が±1以内の行は白背景。
- テーブル最下行に「合計」行を追加し、全スタッフの出勤コマ数・各シフト帯回数の合計を表示する。
### 2-3. スマホ対応
- スマホ幅(〜767px)ではテーブルを横スクロール可能なラッパー(`overflow-x: auto`)で囲む。
- 1週間ずつ表示切替モードでも、サマリーは**月全体の集計**を常に表示する(週ごとの絞り込みはしない)。
### 2-4. 印刷・PNG出力への対応
- ブラウザ印刷時はサマリーテーブルをシフト表の後ページに含める(`@media print`でページ区切りを追加)。
- PNG出力対象の要素(既存の`#shift-table`等)にサマリーセクションを含めるよう、html2canvas等の既存キャプチャ処理の対象範囲を拡張する。
### 2-5. データ処理
- 集計はLocalStorageに保存済みのシフトデータをそのまま走査するだけで算出できる。新たなデータ構造の変更は不要。
- 手動修正でセルが変更されるたびに`updateSummary()`関数を呼び出し、サマリーをリアルタイム更新する。
## 3. 既存機能との整合(壊さない点)
- シフト自動割り当てロジック・手動修正モード・アラート表示には一切手を加えない。
- サマリーは読み取り専用の表示のみで、シフトデータの書き換えは行わない。
- LocalStorageのデータ構造は変更しないため、既存の保存データはそのまま利用できる。
- 既存のシフト帯カラー(水色・黄緑・オレンジ)をサマリーの早番・中番・遅番セルの背景色に流用し、UIの一貫性を保つ。
自動生成したシフト表を確認する際、各スタッフが「今月何日出勤予定か」「早番・中番・遅番それぞれ何回か」を一目で把握できるサマリーパネルを追加する。シフト担当者が労働時間の偏りや希望勤務日数とのズレをすぐに発見できるようにし、手動修正の判断を助けることが目的。
## 2. 具体的な仕様
### 2-1. 表示場所・タイミング
- シフト表(カレンダーグリッド)の直下に「📊 シフト集計サマリー」セクションを追加する。
- シフト表が生成・更新(手動修正含む)されるたびに自動で再計算・再描画する。
- 折りたたみ式(デフォルト展開)とし、見出しクリックで表示/非表示を切り替えられる。
### 2-2. テーブル構成
以下の列を持つHTMLテーブルを描画する。
| 列名 | 内容 |
|------|------|
| スタッフ名 | 登録名 + 雇用区分バッジ(例: [社員]) |
| 合計出勤日数 | 当月の出勤予定コマ数(実数) |
| 希望日数 | スタッフ登録時に設定した希望勤務日数 |
| 差分 | 合計出勤日数 − 希望日数(±表示、0が理想) |
| 早番 | 早番シフトの割り当て回数 |
| 中番 | 中番シフトの割り当て回数 |
| 遅番 | 遅番シフトの割り当て回数 |
- テーブルはスタッフ登録順に表示する。
- 差分が +2以上の行は薄い赤背景、−2以下の行は薄い黄背景でハイライトし、偏りを視覚的に伝える。差分が±1以内の行は白背景。
- テーブル最下行に「合計」行を追加し、全スタッフの出勤コマ数・各シフト帯回数の合計を表示する。
### 2-3. スマホ対応
- スマホ幅(〜767px)ではテーブルを横スクロール可能なラッパー(`overflow-x: auto`)で囲む。
- 1週間ずつ表示切替モードでも、サマリーは**月全体の集計**を常に表示する(週ごとの絞り込みはしない)。
### 2-4. 印刷・PNG出力への対応
- ブラウザ印刷時はサマリーテーブルをシフト表の後ページに含める(`@media print`でページ区切りを追加)。
- PNG出力対象の要素(既存の`#shift-table`等)にサマリーセクションを含めるよう、html2canvas等の既存キャプチャ処理の対象範囲を拡張する。
### 2-5. データ処理
- 集計はLocalStorageに保存済みのシフトデータをそのまま走査するだけで算出できる。新たなデータ構造の変更は不要。
- 手動修正でセルが変更されるたびに`updateSummary()`関数を呼び出し、サマリーをリアルタイム更新する。
## 3. 既存機能との整合(壊さない点)
- シフト自動割り当てロジック・手動修正モード・アラート表示には一切手を加えない。
- サマリーは読み取り専用の表示のみで、シフトデータの書き換えは行わない。
- LocalStorageのデータ構造は変更しないため、既存の保存データはそのまま利用できる。
- 既存のシフト帯カラー(水色・黄緑・オレンジ)をサマリーの早番・中番・遅番セルの背景色に流用し、UIの一貫性を保つ。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (shiftmate))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ShiftMate - シフト表自動作成メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=shiftmate
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/shiftmate/
ご利用ありがとうございます!
ご要望いただいた「ShiftMate - シフト表自動作成メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=shiftmate
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/shiftmate/
ご利用ありがとうございます!
Echo
Iris