時間管理アプリの作り方：タイマー、タイムシート、レポート

時間管理アプリは、誰が、何の作業を、どれだけの時間行い、その時間を請求できるかを記録します。作るには、時間を記録する対象のクライアントとプロジェクト、ブラウザを閉じても残るタイマー、手で追加・修正できる入力、週単位のタイムシート、そして生のデータを合計に変えるレポートが必要です。AIアプリビルダーなら、明確な指示一つで動く最初のバージョンを作れます。決めるべき重要なことはルールです。丸め、誰が何を編集できるか、いつ週を締めるか、何を請求可能とするかです。

何のために時間を記録するのかを決める

同じアプリでも、その目的によって形が変わります。

• クライアントへの請求。 クライアントごとの時間、人やプロジェクトごとの単価、請求書用のきれいなエクスポート。正確さと監査の記録が最も重要です。
• 時給制スタッフの給与。 出勤と退勤、休憩、残業のルール、マネージャーの承認。地域の労働ルールが適用されるため、どの記録を保持する義務があるかを確認してください。
• 時間の使い方の把握。 個人やチームの洞察、見積もりと実績の比較。承認フローよりも、入力のすばやさが重要です。

最初のバージョンで主な目的を一つ選んでください。フリーランスの請求用トラッカーと、倉庫の出勤打刻は、タイマーとわずかな機能しか共有しません。

アプリに必要なもの

データ

すべての記録には開始時刻と終了時刻を保存し、そこから所要時間を導き出してください。「2時間15分」のように時刻なしで手入力される記録は、所要時間だけを保存しても構いませんが、日付は必ず保存してください。

ページ

• タイマーと今日の画面： 大きな開始／停止ボタン、プロジェクトの選択、その下に今日の記録。
• 週表示： プロジェクトを行、月曜から日曜を列にした表で、ここに直接時間を入力できます。タイマーより好む人も多い形です。
• レポート： 日付範囲を指定して、顧客、プロジェクト、人ごとの時間を、請求可能と不可の内訳付きで表示し、CSVをエクスポートできます。
• 管理画面： クライアント、プロジェクト、担当者、単価の管理。

権限

作る前に、誰が何をできるかを書き出してください。

• 人は自分の記録だけを見て編集できる。
• マネージャーはチームの記録を見て、週を承認する。
• 単価を変更できるのは管理者だけで、理想を言えば、単価を見られるのも管理者だけ。
• 承認済みまたは請求済みの記録は、管理者が再度開かない限り、誰も編集できない。

最後のルールが、レポートを信頼できるものにします。ログインの仕組みはアプリにログインを追加する方法で、役割についてはロールベースのアクセス制御の方法で扱っています。

判断とトレードオフ

タイマー、手入力、またはその両方

タイマーは、人が開始するのを覚えている場合には正確ですが、いつも覚えているとは限りません。手入力は、週末にまとめて入力する人には速いです。多くのチームには両方が必要で、タイマーの記録を後から編集する手段も必要です。一つしか作らないなら、週のグリッドを作ってください。よりシンプルで、「開始し忘れた」場合もカバーできます。

実行中のタイマーをどこに置くか

ブラウザの中だけで時間を数えるタイマーは、タブを閉じると全部失われます。開始ボタンを押した時点で開始時刻をデータベースに保存し、経過時間は現在時刻からその値を引いて表示してください。そうすれば、タイマーは再読み込み、ノートパソコン、スマホをまたいで動き続けます。一人が同時に二つのタイマーを動かせるかどうかも決めてください。通常は不可です。新しいタイマーを始めると、古いものが止まるようにします。

丸め

よくあるルールは、各記録を6分、15分、30分単位で切り上げることです。正確な時刻はデータベースに保存し、丸めはレポートと請求書でのみ適用してください。レポートでは両方の数字を表示し、誰も驚かないようにしましょう。

締めと承認

締める仕組みがないと、請求済みの時間が、請求書を送った後に変わってしまいます。単純なモデルは次のとおりです。人が週を提出し、マネージャーが承認し、承認された記録は読み取り専用になります。アプリから請求する場合は、記録に「請求済み」の印を付け、二重に請求されないようにしてください。

タイムゾーンと深夜

時刻はUTCで保存し、本人のタイムゾーンで表示してください。23:00から翌01:00までの記録が、どの日に属するかも決めます。一般的な答えは、開始した日です。

最初に効くプロンプトの例

6人のデザインスタジオのための時間管理アプリを作ってください。データは次のとおりです。クライアント（名前、時給）、プロジェクト（クライアント、名前、予算時間）、時間の記録（担当者、プロジェクト、開始、終了、メモ、請求可能かどうか、ステータスは下書き／提出済み／承認済み）。ページは次のとおりです。「今日」ページは、開始／停止のタイマーとプロジェクト選択を備え、開始時刻をデータベースに保存して再読み込みしても残るようにしてください。「週」ページは、行がプロジェクト、列が月曜から日曜で、直接時間を入力できるようにしてください。「レポート」ページは、日付範囲を指定して、顧客、プロジェクト、人ごとの時間を、請求可能と不可に分けて表示し、CSVをエクスポートできるようにしてください。「管理」ページでは、顧客、プロジェクト、担当者を管理できるようにしてください。一人が同時に動かせるタイマーは1つだけにし、承認された記録は編集できないようにしてください。時刻はUTCで保存し、ユーザーのタイムゾーンで表示してください。きれいで、速く、キーボードでも操作しやすいデザインにしてください。

このプロンプトは、テーブル、ページ、タイマーの動作、ロックのルールを明記しています。AIが推測してしまいがちな部分です。

構築の手順

1. プロジェクトと手入力を先に作る。 クライアント、プロジェクト、記録の入力フォーム、一覧。合計が正しく足し合わさることを確認します。
2. タイマー。 開始、停止、一人につき一つだけのタイマー、保存された開始時刻。タイマーを開始し、タブを閉じ、開き直して確かめます。
3. 週のグリッド。 セルに時間を入力すると、記録が作成または更新されること。
4. ログインと役割。 実際の人が使う前に追加し、誰も単価や他人の記録を誤って見ないようにします。
5. 提出と承認。 週単位の提出、マネージャーによる承認、承認後は読み取り専用。
6. レポートとエクスポート。 日付範囲、グループ化、請求可能の内訳、CSV。
7. 単価と請求の連携。 顧客に請求するなら。請求書の作成は別の手順やアプリに分けてください。請求書アプリの作り方を参照してください。
8. エッジケースをテストする。 深夜をまたぐ記録、夏時間の切り替わる週、二台の端末から同時に始めた二つのタイマー、承認済みの記録を編集しようとすること。

よくある間違い

• 時間をブラウザの中だけで数える。 デモでは動きますが、実際の利用では時間を失います。
• 保存された値を丸める。 正確な時刻は二度と取り戻せません。
• 承認された週にロックがない。 レポートが請求書と一致しなくなります。
• 全員が全員の単価を見られる。 役割によって単価を隠すことを、初日から行ってください。
• 必須項目が多すぎる。 時間の記録に数秒以上かかると、人は記録しなくなり、データは作り話になります。作業内容とメモは、最初は任意にしてください。
• トラッカーの中に本格的なプロジェクト管理を作る。 プロジェクトは単純なラベルとして保ってください。タスク、ボード、締切が必要なら、それはプロジェクト管理ツールの作り方という別の作業です。

既成のトラッカーの方が良い場合

チームに必要なのがタイマー、週表示、レポートだけなら、専用の時間管理製品がすでにそれをうまくこなします。また、自分で作るには相当な手間がかかる機能も備えています。デスクトップアプリとスマホアプリ、アイドル状態の検出、カレンダーやツールとの連携、タイムシートの入力忘れを知らせるリマインダーです。時給制の給与計算なら、休憩、残業、記録の保持を、専用に作られたツールの方が安全に扱えます。

自作を選ぶのは、既成のルールが合わない場合、時間を既に保存しているデータ（仕事の指示、作業オーダー、継続契約、請求書）に紐づけたい場合、大規模なチームで座席単位の料金が積み重なる場合、あるいは時間管理が、より大きな社内ツールの一部である場合です。ソフトウェアを作るか買うかでトレードオフを解説しています。時間が今、共有のスプレッドシートにあるなら、スプレッドシートをアプリにする方法を参照してください。

Mythexで作る

Mythexでは、トラッカーをチャットで説明すると、エージェントがライブプレビューの中で作ってくれます。記録を保存する必要がある場合は、専用のPostgresデータベースを追加します。直接頼むこともできますし、/database と入力することもできます。ドキュメントの社内ツールのユースケースでは、バージョン1では痛みの大きい一つの工程を選ぶことを勧めています。ここでは、記録と週のグリッドから始め、次にタイマーや承認を追加するのがそれに当たります。

チームのためのサインインは、自分で選んだ認証の方法で追加します（ログインを追加するレシピ）。Mythexのアカウントは、アプリを使う人ではなく、作る人のためのものです。中核の流れが動いたら、/test を使うと、エージェントがプレビューの中で操作を実行し（タイマーを開始する、記録を追加する、レポートを出す）、壊れている箇所を報告してくれます。見た目の出発点を探すなら、アプリのテンプレートを見てください。

よくある質問