以下の要件で、ブラウザだけで動作する単一HTMLファイルの完成版アプリを作成してください。
【重要】
途中説明不要
設計説明不要
解説不要
完成したHTMLファイルのみ出力すること。
HTML・CSS・JavaScriptを1ファイルへ完全統合すること。
コードの途中省略禁止。
「以下省略」「一部抜粋」禁止。
実際に保存してそのまま動作する完成版を出力すること。
試作版は禁止。
簡易版は禁止。
ダミー処理は禁止。
未実装は禁止。
実運用可能な完成版として作成すること。
━━━━━━━━━━━━━━━━━━━━━
■ 目的
━━━━━━━━━━━━━━━━━━━━━
紙の日報を廃止し、
転記作業と転記ミスをなくしたい。
━━━━━━━━━━━━━━━━━━━━━
■ 動作条件
━━━━━━━━━━━━━━━━━━━━━
・インターネット不要
・サーバー不要
・インストール不要
・ブラウザでHTMLを開くだけで動作
・単一HTMLファイル
・データ保存はIndexedDB
・ブラウザ再起動後も保持
・Chrome/Edgeで動作
━━━━━━━━━━━━━━━━━━━━━
■ 入力項目
━━━━━━━━━━━━━━━━━━━━━
1. 日付
2. 担当者（プルダウン）
・山田
・佐藤
・鈴木
3. 作業区分（プルダウン）
・製造
・検査
・段取り
・事務
・その他
4. 作業内容
5. 開始時刻
6. 終了時刻
━━━━━━━━━━━━━━━━━━━━━
■ 入力チェック
━━━━━━━━━━━━━━━━━━━━━
すべて必須入力
未入力禁止
終了時刻は開始時刻より後でなければならない
エラー時は赤文字でメッセージ表示
━━━━━━━━━━━━━━━━━━━━━
■ 登録処理
━━━━━━━━━━━━━━━━━━━━━
登録ボタン押下時
・作業時間を自動計算
・時間単位で保存
・一覧へ即反映
・IndexedDB保存
作業時間計算
終了時刻－開始時刻
小数点第2位まで表示
登録成功後
・作業内容クリア
・開始時刻クリア
・終了時刻クリア
・担当者クリア
・作業区分クリア
日付は維持
成功メッセージ表示
━━━━━━━━━━━━━━━━━━━━━
■ 作業記録一覧
━━━━━━━━━━━━━━━━━━━━━
表示項目
・日付
・担当者
・作業区分
・作業内容
・開始時刻
・終了時刻
・作業時間
不要な空列禁止
新しいデータが上に表示されること
━━━━━━━━━━━━━━━━━━━━━
■ 月次集計
━━━━━━━━━━━━━━━━━━━━━
月選択はプルダウン(select)を使用
使用禁止
input type="month"
使用必須
━━━━━━━━━━━━━━━━━━━━━
■ 月次集計 月選択プルダウン仕様
━━━━━━━━━━━━━━━━━━━━━
IndexedDB records内の全データを対象とする
日付項目から年月を抽出する
例
2026-10-01 → 2026-10
2026-10-15 → 2026-10
2026-11-03 → 2026-11
抽出後
・重複除去
・年月昇順ソート
・プルダウン生成
を行うこと
━━━━━━━━━━━━━━━━━━━━━
■ 月プルダウン表示形式
━━━━━━━━━━━━━━━━━━━━━
value
2026-10
画面表示
2026年10月
例
━━━━━━━━━━━━━━━━━━━━━
■ 月プルダウン初期表示
━━━━━━━━━━━━━━━━━━━━━
登録月が存在する場合
最新月を自動選択
例
2026-08
2026-09
2026-10
↓
2026-10を選択状態
━━━━━━━━━━━━━━━━━━━━━
■ データ未登録時
━━━━━━━━━━━━━━━━━━━━━
プルダウン内容
を表示
月次集計表は全セル0.00表示
━━━━━━━━━━━━━━━━━━━━━
■ 月一覧再生成タイミング
━━━━━━━━━━━━━━━━━━━━━
以下のタイミングで必ず再生成
① 初期表示時
② 登録成功時
③ CSV読込完了時
④ IndexedDB復元時
⑤ 集計対象変更時
常にDB内容と一致していること
━━━━━━━━━━━━━━━━━━━━━
■ 月選択変更時
━━━━━━━━━━━━━━━━━━━━━
changeイベントで即時再集計
summaryMonth変更
↓
月次集計再計算
↓
集計表再描画
ページ再読み込み不要
━━━━━━━━━━━━━━━━━━━━━
■ 月削除時の挙動
━━━━━━━━━━━━━━━━━━━━━
CSV読込等で
現在選択中の月が存在しなくなった場合
自動的に最新月を選択
例
現在選択
2026-10
CSV読込後
2026-08
2026-09
のみ存在
↓
2026-09を自動選択
━━━━━━━━━━━━━━━━━━━━━
■ 月次集計表
━━━━━━━━━━━━━━━━━━━━━
対象月のみ集計
行
・山田
・佐藤
・鈴木
列
・製造
・検査
・段取り
・事務
・その他
・合計
担当者ごとの作業時間合計を表示
小数点第2位まで表示
選択月
2026-10
の場合
日付が
2026-10-01
2026-10-15
2026-10-31
のみ集計対象
以下は対象外
2026-09-30
2026-11-01
━━━━━━━━━━━━━━━━━━━━━
■ CSV書出し
━━━━━━━━━━━━━━━━━━━━━
全データをCSV出力
UTF-8 BOM付き
ファイル名
作業日報データ.csv
出力項目
日付
担当者
作業区分
作業内容
開始時刻
終了時刻
作業時間
━━━━━━━━━━━━━━━━━━━━━
■ CSV読込
━━━━━━━━━━━━━━━━━━━━━
CSVファイルから復元
UTF-8 BOM対応
同形式CSVを読込可能
読込後は一覧更新
読込完了メッセージ表示
読込後は月プルダウンを自動更新すること
━━━━━━━━━━━━━━━━━━━━━
■ データ管理
━━━━━━━━━━━━━━━━━━━━━
表示ボタン
・CSV書出し
・CSV読込
不要なボタンは禁止
削除ボタン不要
サンプルデータボタン不要
テストボタン不要
━━━━━━━━━━━━━━━━━━━━━
■ 画面構成
━━━━━━━━━━━━━━━━━━━━━
1. 作業入力
2. 作業記録一覧
3. 月次集計表
4. データ管理
この順序で配置すること
━━━━━━━━━━━━━━━━━━━━━
■ UIデザイン要件
━━━━━━━━━━━━━━━━━━━━━
業務システム風デザイン
スマホアプリ風禁止
背景色
#f5f6f8
文字色
#000000
━━━━━━━━━━━━━━━━━━━━━
■ ヘッダー
━━━━━━━━━━━━━━━━━━━━━
画面上部に固定しないヘッダー
背景
#2d3e50
文字色
#ffffff
タイトル
作業日報システム
━━━━━━━━━━━━━━━━━━━━━
■ レイアウト
━━━━━━━━━━━━━━━━━━━━━
中央寄せ
最大横幅
1400px
.container{
max-width:1400px;
margin:auto;
}
━━━━━━━━━━━━━━━━━━━━━
■ カードデザイン
━━━━━━━━━━━━━━━━━━━━━
各機能はカード表示
.card{
background:#fff;
border:1px solid #dcdcdc;
border-radius:6px;
padding:20px;
margin-bottom:20px;
}
━━━━━━━━━━━━━━━━━━━━━
■ 見出し
━━━━━━━━━━━━━━━━━━━━━
h2{
border-bottom:2px solid #d0d0d0;
padding-bottom:8px;
margin-bottom:15px;
}
━━━━━━━━━━━━━━━━━━━━━
■ 入力欄
━━━━━━━━━━━━━━━━━━━━━
input
select
textarea
背景
#ffffff
文字
#000000
枠線
#aaaaaa
角丸4px
入力しやすいサイズ
━━━━━━━━━━━━━━━━━━━━━
■ フォームレイアウト
━━━━━━━━━━━━━━━━━━━━━
CSS Grid使用
整然と表示
PC画面向け最適化
━━━━━━━━━━━━━━━━━━━━━
■ ボタンデザイン
━━━━━━━━━━━━━━━━━━━━━
共通
button{
border:none;
border-radius:4px;
padding:10px 20px;
cursor:pointer;
color:#fff;
font-size:14px;
transition:0.2s;
}
button:hover{
opacity:0.9;
}
登録ボタン
background:#0078d4;
CSV書出し
background:#198754;
CSV読込
background:#fd7e14;
ボタンは横並び
適切な余白を持つこと
━━━━━━━━━━━━━━━━━━━━━
■ テーブル
━━━━━━━━━━━━━━━━━━━━━
table{
width:100%;
border-collapse:collapse;
}
th,
td{
border:1px solid #cfcfcf;
padding:8px;
}
th{
background:#e9eef5;
text-align:center;
}
td{
background:#fff;
}
横スクロール対応
━━━━━━━━━━━━━━━━━━━━━
■ 月次集計表
━━━━━━━━━━━━━━━━━━━━━
先頭列
薄いグレー背景
.summary-table td:first-child,
.summary-table th:first-child{
background:#f3f3f3;
font-weight:bold;
}
━━━━━━━━━━━━━━━━━━━━━
■ メッセージ表示
━━━━━━━━━━━━━━━━━━━━━
エラー
赤文字
成功
緑文字
━━━━━━━━━━━━━━━━━━━━━
■ IndexedDB
━━━━━━━━━━━━━━━━━━━━━
データベース名
WorkDiaryDB
オブジェクトストア
records
自動採番ID
ブラウザ再起動後も保持
━━━━━━━━━━━━━━━━━━━━━
■ 品質要求
━━━━━━━━━━━━━━━━━━━━━
登録ボタンが確実に動作すること
CSV書出しが確実に動作すること
CSV読込が確実に動作すること
月次集計が正しく動作すること
月プルダウンが正しく生成されること
登録済み月のみ表示すること
最新月を自動選択すること
CSV読込後に月一覧が更新されること
IndexedDB復元時に月一覧が更新されること
同じ月を重複表示しないこと
空optionを生成しないこと
存在しない年月を選択できないこと
ブラウザ依存の月入力UIを使用しないこと
不要列を作らないこと
JavaScriptエラー禁止
試作版禁止
未実装禁止
ダミー処理禁止
実際に業務利用できる完成版にすること
━━━━━━━━━━━━━━━━━━━━━
■ 出力指示
━━━━━━━━━━━━━━━━━━━━━
完成HTMLのみ出力
説明不要
解説不要
コード省略禁止
HTMLファイルとして保存可能な完全なソースを最後まで出力すること