勤怠管理アプリを自作して、iPadを打刻端末にした話 — サーバーなし、月額0円 — matsutomo.dev

小さな職場の勤怠管理、どうしてる？

数名規模の事業所にとって、勤怠管理はちょうど「困る」サイズの問題です。

タイムカード機を置けば本体とカードの費用がかかり、集計は結局手作業。勤怠SaaSを契約すれば集計は楽になりますが、月額課金で、シフト管理・給与連携・ワークフロー承認といった、数名の職場には過剰な機能がついてきます。欲しいのは本当にシンプルで、

出勤・退勤・休憩を記録する
月ごとに実働時間と残業を集計する
有給の付与と残日数を管理する

この3つだけです。

それなら作ってしまおう、ということで作ったのが勤怠管理ツール「刻 KIZAMI」です。HTMLファイル1枚。サーバーなし、インストールなし、月額0円。この記事では、ツールの紹介と、それをVercelに載せてiPadを打刻端末にするまでの手順（ハマりどころ込み）をまとめます。

作ったもの：刻 KIZAMI

（▼ ダッシュボードのスクリーンショット）

ブラウザで開くだけで動く勤怠管理システムです。主な機能：

打刻：画面タップで出勤・退勤・休憩。従業員を選んでワンタップ
QR打刻：従業員ごとの個人QRを発行し、カメラにかざすだけで自動打刻
勤怠記録・月次集計：日次の打刻一覧と修正、月ごとの実働・残業・深夜・遅刻早退の集計
有給・休暇管理：勤続年数と週所定労働日数に応じた年次有給休暇の自動付与、残日数・取得管理
本日のタイムライン：誰がいつからいつまで働いているかを、ガントチャート風に一望

技術的にはバニラJSの単一HTMLで、フレームワークもビルドツールも使っていません。データはlocalStorageとIndexedDBの二重保存で、すべて端末の中だけに保存されます。外部にデータを送信する処理は一切ありません。勤怠という個人情報を扱うツールなので、「そもそもデータを外に出せない構造」にしてあります。

デザインの話：「白の計器盤」

今回、デザインを白基調に全面刷新しました。コンセプトは**「白の計器盤」**です。

（▼ タイムライン部分のスクリーンショット）

KIZAMIは「刻む」から取った名前です。時を刻む、記録を刻む。そこから**目盛り（tick）**をデザインの署名にしました。ロゴの下、時計の下、見出しの頭、カードの縁——画面のあちこちに細かい目盛りが走っています。装飾ではなく、「これは時間を測る道具だ」という機能の表明のつもりです。

時刻の数字はすべてモノスペースフォント（IBM Plex Mono）にしました。桁が揃って縦に流し読みできるのは実用上の理由ですが、それ以上に、等幅の数字には計測器の佇まいがあります。デジタル時計、ストップウォッチ、計器盤。勤怠管理の数字は「読む」より「確認する」ものなので、この佇まいが合っています。

お気に入りは、ダッシュボードの「本日のタイムライン」です。従業員ごとの勤務をバーで表示し、確定した実働は藍色、いま勤務中の人は緑のライブバー、休憩は真鍮色のストライプ。そして現在時刻の位置に赤い針が立っていて、1分ごとに静かに進みます。画面を開いた瞬間に「いま職場で何が起きているか」が分かる、この一覧性が作りたかったものでした。

Vercelに載せて、iPadを打刻端末にする

単一HTMLはファイルを開くだけでも動きますが、職場で常用するなら**ホスティングして「ホーム画面に追加」**するのが正解です。理由は3つ：

アプリのようにフルスクリーンで起動できる
HTTPSになるのでQR打刻のカメラが使える（カメラはHTTPS必須）
iPadを1台「打刻端末」として固定運用できる

ホスティング先はVercelを使いました。無料枠で十分、HTTPS自動です。手順は次の通り：

npm i -g vercel
vercel login
mkdir ~/kizami
cd ~/kizami        # ここに index.html を置く
vercel --prod

対話で聞かれる質問は、プロジェクト名を答える以外は基本Enterで進めばOKです。最後に https://〇〇.vercel.app のURLが発行されます。

ハマりどころ（実体験）

実際にやってみてつまずいた点を2つ共有します。

その1：ホームディレクトリでvercelを実行しない。 cd を忘れたまま vercel を打つと「You are deploying your home directory. Continue?」と聞かれます。ここは必ずN。ホームフォルダ全体をアップロードしかけるので、専用フォルダを作ってそこで実行してください。

その2：macOSの「ダウンロード」フォルダ問題。 ターミナルから mv ~/Downloads/index.html ... すると Operation not permitted で弾かれることがあります。macOSのプライバシー保護です。Finderでドラッグして移動するか、システム設定→プライバシーとセキュリティ→ファイルとフォルダでターミナルに権限を付与すれば解決します。

iPad側の設定

発行されたURLをiPadのSafariで開き、共有 → ホーム画面に追加。これで打刻アプリの完成です。横置きならサイドバー付きのフル画面、縦置きならモバイルレイアウトに自動で切り替わります。

運用上の注意と、あえての割り切り

このツールにはクラウド同期がありません。データは端末ごとに独立していて、iPadとPCで記録は共有されません。

これは欠点ではなく設計です。同期を入れた瞬間にサーバーが必要になり、個人情報を預かる責任とコストが発生します。数名の職場なら「打刻用iPadを1台に固定する」だけで運用は成立しますし、データがどこにも出ていかない安心感のほうが価値があると考えました。

運用のコツは3つだけです。

打刻端末は1台に固定する
月次の締めでCSV出力や印刷をしてバックアップを残す
長期休暇の前にもバックアップを取っておく

おわりに

タイムカード機より安く（無料）、勤怠SaaSよりシンプルに。HTMLファイル1枚でも、数名規模の勤怠管理は十分に回ります。

「自分の職場のサイズに合った道具を、自分で刻む」。そんな選択肢の一例として、どなたかの参考になれば嬉しいです。