リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ShiftMate - シフト表自動作成メーカー
シフト表のCSVエクスポート機能の追加
## 1. 目的
印刷・PNG出力に加え、生成したシフト表をCSV形式でダウンロードできるようにする。担当者がExcelやGoogleスプレッドシートに取り込んで給与計算・勤怠管理システムへの転記作業を効率化できる。
## 2. 具体的な仕様
### 2-1. 追加UI
- 既存の「印刷」「PNG保存」ボタンの隣に「CSVダウンロード」ボタンを追加する
- ボタンラベル: 📄 CSV保存
- デザインは既存ボタンと統一(同サイズ・同スタイル)
### 2-2. 出力CSVの構造
**ファイル名**: `shiftmate_YYYYMM.csv`(例: shiftmate_202506.csv)
**フォーマット(行列構成)**:
```
氏名, 1日(月), 2日(火), 3日(水), ... , 31日(日), 出勤日数
スタッフA, 早番, 休み, 中番, ... , 遅番, 20
スタッフB, 休み, 遅番, 休み, ... , 早番, 18
...
必要人数, 3, 3, 3, ..., 3,
実際人数, 3, 2, 3, ..., 3,
```
- 1行目: ヘッダー行(「氏名」+各日付+曜日+「出勤日数」)
- 2行目以降: スタッフ1名1行。各日セルには「早番」「中番」「遅番」「休み」を記載
- 末尾2行: 各日の「必要人数(設定値)」と「実際の割当人数」を集計行として出力
- 未割当セル(人数不足)は「未定」と記載
### 2-3. 文字コード・改行コード
- 文字コード: UTF-8(BOM付き)でExcelでの文字化けを防ぐ
- 改行コード: CRLF(\r\n)
### 2-4. 実装方法(JS側)
- 外部ライブラリ不要。純粋なJavaScriptで文字列を組み立てBlobを生成
- `Blob(['\uFEFF' + csvString], { type: 'text/csv;charset=utf-8;' })` でBOM付きUTF-8を生成
- `URL.createObjectURL` + `<a>` タグの `download` 属性でダウンロードを実行
- 既存のLocalStorageから読み込んだシフトデータをそのまま利用するため、データ構造の変更は不要
### 2-5. スマホ対応
- スマホでもボタンをタップしてダウンロード可能(ブラウザのダウンロード機能に委譲)
- ボタンはスマホ時も操作エリアに表示し、横スクロールに埋もれない位置(シフト表上部の操作バー)に配置
## 3. 既存機能との整合
- LocalStorageのデータ構造・既存のシフト生成ロジック・手動修正モード・印刷/PNG機能には一切手を加えない
- CSVはあくまで「現在画面に表示されている月のシフトデータ」を読み取って出力するだけの独立処理
- アラート表示・集計サマリーの動作にも影響しない
- シフト未生成(データなし)の状態でCSVボタンを押した場合は `alert('シフトを生成してからエクスポートしてください')` を表示して処理を中断する
印刷・PNG出力に加え、生成したシフト表をCSV形式でダウンロードできるようにする。担当者がExcelやGoogleスプレッドシートに取り込んで給与計算・勤怠管理システムへの転記作業を効率化できる。
## 2. 具体的な仕様
### 2-1. 追加UI
- 既存の「印刷」「PNG保存」ボタンの隣に「CSVダウンロード」ボタンを追加する
- ボタンラベル: 📄 CSV保存
- デザインは既存ボタンと統一(同サイズ・同スタイル)
### 2-2. 出力CSVの構造
**ファイル名**: `shiftmate_YYYYMM.csv`(例: shiftmate_202506.csv)
**フォーマット(行列構成)**:
```
氏名, 1日(月), 2日(火), 3日(水), ... , 31日(日), 出勤日数
スタッフA, 早番, 休み, 中番, ... , 遅番, 20
スタッフB, 休み, 遅番, 休み, ... , 早番, 18
...
必要人数, 3, 3, 3, ..., 3,
実際人数, 3, 2, 3, ..., 3,
```
- 1行目: ヘッダー行(「氏名」+各日付+曜日+「出勤日数」)
- 2行目以降: スタッフ1名1行。各日セルには「早番」「中番」「遅番」「休み」を記載
- 末尾2行: 各日の「必要人数(設定値)」と「実際の割当人数」を集計行として出力
- 未割当セル(人数不足)は「未定」と記載
### 2-3. 文字コード・改行コード
- 文字コード: UTF-8(BOM付き)でExcelでの文字化けを防ぐ
- 改行コード: CRLF(\r\n)
### 2-4. 実装方法(JS側)
- 外部ライブラリ不要。純粋なJavaScriptで文字列を組み立てBlobを生成
- `Blob(['\uFEFF' + csvString], { type: 'text/csv;charset=utf-8;' })` でBOM付きUTF-8を生成
- `URL.createObjectURL` + `<a>` タグの `download` 属性でダウンロードを実行
- 既存のLocalStorageから読み込んだシフトデータをそのまま利用するため、データ構造の変更は不要
### 2-5. スマホ対応
- スマホでもボタンをタップしてダウンロード可能(ブラウザのダウンロード機能に委譲)
- ボタンはスマホ時も操作エリアに表示し、横スクロールに埋もれない位置(シフト表上部の操作バー)に配置
## 3. 既存機能との整合
- LocalStorageのデータ構造・既存のシフト生成ロジック・手動修正モード・印刷/PNG機能には一切手を加えない
- CSVはあくまで「現在画面に表示されている月のシフトデータ」を読み取って出力するだけの独立処理
- アラート表示・集計サマリーの動作にも影響しない
- シフト未生成(データなし)の状態でCSVボタンを押した場合は `alert('シフトを生成してからエクスポートしてください')` を表示して処理を中断する
💬 返信 (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