N-PAS Attendance クラウド版
Google Apps Script（GAS）＋スプレッドシートで動いていた N-PAS 勤怠管理システムを、
Cloudflare Workers ＋ Cloudflare D1 に移したものです。
スタッフ用の画面は、今の見た目と操作をそのまま引き継いでいます（変わったのはログイン画面の PIN 入力欄の追加だけです）。
現在の状態
0. Vercel 版（本番・テスト環境）
本番環境で試して、終わったら記録を初期化する
https://npas-attendance.vercel.app/admin.html を開き、「初期設定」で最初の管理者を作る（合言葉は別途お伝えしたもの）。- 「スタッフ・PIN」→「スタッフを追加」でスタッフを登録する。または「データ移行・バックアップ」で旧スプレッドシートの名簿・記録を取り込む（5章）。
- スタッフ画面で、出勤・退勤・申請・一括申請・修正申請・削除申請などを自由に試す。管理画面で承認・集計・申請書を確認する。
- 試し終わったら、管理画面「データ移行・バックアップ」→「テスト記録の初期化」に「初期化」と入力してボタンを押す。
- 消えるもの：勤怠記録・修正/削除申請・出勤中の状態・操作履歴
- 残るもの：スタッフ名簿・管理者
- 消す前の状態は自動でバックアップされ、「保存されているバックアップ」→「この状態に戻す」で戻せます。
- 旧スプレッドシートから本物の記録を移す場合は、初期化のあとで「データ移行」を行います。
毎日の自動バックアップ
毎日 3:00（日本時間）にデータベース全体を自動保存します（30日分）。管理画面から一覧・ダウンロード・復元ができます。
テスト環境（試用版）
- テスト用アカウントは3章と同じです（スタッフ「テスト 一郎」を選ぶだけ／管理者
testadmin・test-password-1234）。
- 仕組み：画面と API は Cloudflare 版と同じプログラム。データベース（SQLite のファイル）だけを Vercel Blob（非公開）に保存しています（
platform/vercel/handler.mjs）。書き込みは「誰も更新していないときだけ保存」する条件付き書き込みで、同時に更新された場合は最新を読み直してやり直すため、取りこぼしや二重登録は起きません。
- GitHub の
main に送ると、自動で公開し直されます。
- アクセス制限（Vercel Authentication）が有効なので、開くには Vercel にログインしている必要があります。他の人にも試してもらう場合は、Vercel のプロジェクト設定 →「Deployment Protection」で「Vercel Authentication」をオフにしてください（テスト用データしか入っていません）。
- この保存方式は、30〜100人程度・同時操作が数人程度の規模を想定しています。大人数が同じ瞬間に操作すると、順番待ち（自動でやり直し）で少し遅くなることがあります。規模が大きくなったら Cloudflare 版（4章）への切り替えをおすすめします（同じプログラムです）。
ログイン方式
設定 AUTH_MODE で切り替えます。name＝名前を選ぶだけ（旧システムと同じ。現在の設定）、pin＝名前＋PIN。
名前を選ぶだけの方式は本人確認ではありません（誰でも他人の名前で打刻・申請できます）。操作はすべて操作履歴に残り、記録の変更・削除は管理者の承認が必要です。
勤怠記録の削除申請
スタッフ画面の「打刻修正」で記録を選び、「修正理由」に理由を書いて「この記録の削除を申請する」。管理者が「修正・削除申請」で承認すると削除され、削除前の内容は操作履歴に残ります。
目次
- 構成と、選んだ理由
- 今の仕組みから変わったこと
- すぐに動作確認する（パソコンだけで動く）
- Cloudflare への公開手順
- データ移行（スプレッドシート → 新システム）
- 普段の運用
- バックアップと復旧
- セキュリティ
- 速さ
- テスト
- 決めていただきたいこと・残っている課題
- フォルダ構成
1. 構成と、選んだ理由
| 部分 | 使う技術 | 役割 |
|---|
| 画面 | Workers の静的アセット（public/） | HTML・画像・JavaScript を世界中の拠点から配信 |
| サーバー処理 | Cloudflare Workers（src/） | 勤怠の保存・取得・認証などの API |
| データベース | Cloudflare D1（SQLite） | スタッフ・勤怠・申請・履歴を保存 |
選んだ理由（指示書の選定基準に沿って比較しました）
- 速さ：Workers は利用者に近い拠点で動き、待ち時間（コールドスタート）がほとんどありません。D1 は SQL のインデックスで「この人・この月」だけを読めるので、データが増えても遅くなりません。
- データの安全性・整合性：D1 は SQLite なので、トランザクション（全部成功か全部取り消し）と一意制約（重複を DB が拒否）が使えます。二重出勤・二重登録を DB のレベルで防げます。
- 同時アクセス：D1 は書き込みを1つずつ順番に処理するため、同時に押されても整合性が崩れません（自動テストで確認済み）。
- バックアップ：D1 には「Time Travel」という機能があり、過去の任意の時点に戻せます（無料プランで7日、有料プランで30日）。
- 費用：このシステムの規模（30〜100人程度）なら 無料プランで収まる見込みです（Workers 無料プランは 1日10万リクエストまで）。
- 初心者でも管理しやすい：サーバーの管理（OSの更新など）が不要です。外部パッケージを1つも使っていないので、部品の更新作業もありません。
検討して選ばなかったもの：スプレッドシートをそのまま DB として使い続ける（指示書で禁止・遅さの原因）、Supabase など別の DB サービス（Workers と組み合わせると設定と費用が増える）、Durable Objects（D1 で足りるため）。
2. 今の仕組みから変わったこと
画面（見た目は維持）
- スタッフ画面（
public/index.html）は、旧 Index.html を機械的に変換して作りました（変換スクリプト：tools/convert-original-html.py）。
- 旧版と新版を同じデータで表示してピクセル単位で比較した結果、ログイン画面以外の5画面（ホーム・勤怠申請・一括申請・勤務履歴・打刻修正）は完全に一致しました（差分0ピクセル）。退勤画面はピクセル比較はしていませんが、HTML・CSS は旧版から変更していません。
- ログイン画面だけ、名前の選択の下に「🔑 PINを入力してください」の欄を1つ追加しました（本人確認のため）。色・形は既存の入力欄と同じです。
- 埋め込まれていた画像（820KB）を別ファイルにしたので、2回目以降の表示はブラウザのキャッシュを使います。
サーバー処理
| 旧（GAS の関数） | 新（API） | 主な改善 |
|---|
listStaff | GET /api/staff | — |
| （なし） | POST /api/login | PIN による本人確認を追加 |
clockStatus | GET /api/clock/status | — |
clockIn | POST /api/clock/in | 二重出勤を DB の一意制約で防止 |
clockOut | POST /api/clock/out | 保存と出勤解除を1つのトランザクションで。再送しても二重登録しない |
saveAttendance | POST /api/attendance | 再送しても二重登録しない |
getHistory | GET /api/history | 全件読み込み → この人・この月だけをインデックスで取得 |
npasSaveBulkAttendance | POST /api/bulk | 重複チェックと登録を1つのSQL文で（同時実行でも重複しない） |
npasSubmitCorrection | POST /api/corrections | 「申請中は1記録1件」を DB が保証 |
npasUpdateSummaryNow など | （不要） | 集計表を保存せず、表示のたびに元データから計算（下記） |
| 月別集計シート・個人別シート | 管理画面 | 管理者用の新しい画面（もともと画面がなかったため新規） |
| 打刻修正の承認（シートを手で直す） | 管理画面の「承認」ボタン | 変更前・変更後を操作履歴に自動記録 |
月別集計の考え方：旧版は「保存 → 別の通信で集計シートを更新」でした。新版は集計表を持たず、表示するときに元の勤怠記録から計算します。インデックスのおかげで1か月・100人分でも数ミリ秒です。これで「保存は成功したが集計が古い」「集計の失敗で保存が失敗扱いになる」ということが起きなくなりました。画面側の集計更新の呼び出しは、通信せずに成功を返すようにしています（見た目と動きはそのまま）。
勤怠計算のルールは旧版と完全に同じです（日付・時刻の形式、翌日退勤、休憩 0〜1439分、小数第2位の丸め、手当の上限100万円、業務内容200文字、24時間以上の打刻は管理者へ連絡）。エラーメッセージも同じ文言です。
ただし 業務内容は必須 です（2026-10-29 変更）。スタッフの勤怠申請・一括申請・修正申請・退勤打刻で空欄だと「業務内容を入力してください」と表示して保存しません。管理者による記録の追加・修正と、旧データの移行では空欄も受け付けます。
3. すぐに動作確認する（パソコンだけで動く）
Cloudflare のアカウントがなくても、パソコン上で動かして確認できます（ローカル模擬環境。本物の Cloudflare ではありません）。
- Node.js の 22.5 以上（「LTS」と書かれた版）をインストールします。
- このフォルダでターミナル（Windows は「PowerShell」）を開き、次を入力します。
npm start
- ブラウザで次の URL を開きます。
テスト用アカウント（ローカルとテスト環境だけ。本番では使えません）
| 画面 | 入力するもの |
|---|
| スタッフ画面 | 学年「1年生」→ 名前「テスト 一郎」→ PIN 1234 |
| 管理画面 | ログインID testadmin ／ パスワード test-password-1234 |
データは .local/dev.sqlite に保存されます。最初からやり直したいときは、このファイルを削除してから npm start してください。止めるときはターミナルで Ctrl + C を押します。
This is the beginning of the README. Read the rest at the original. Read the full README ↗
