TRACE

TRACE（Time Recording App for Clients and Efficiency）は、個人向けの作業時間記録Webアプリケーションである。スマートフォンのホーム画面からPWAとしてアクセスし、クライアント・プロジェクト・作業種別のタグを選択してワンタップで作業記録を開始できる。データはすべてJSONファイルとしてサーバー上に保存され、データベースは使用しない。

TRACEでは「リアルタイム記録」と「手動入力」の2つの記録方式をサポートしている。リアルタイム記録では「開始」ボタンを押すだけで前の作業が自動終了し、新しい作業の計測が即座に開始される。手動入力では開始時刻・終了時刻を直接指定して、過去の記録の追加や修正を行うことができる。さらに、新しい日にアプリへ初めてアクセスした際に、前日分の作業サマリーをCSV添付のメールで自動送信する日次レポート機能を備えている。

概要

TRACEは、フリーランスや個人事業主が日々の作業時間をクライアント・プロジェクト単位で正確に記録し、効率的に管理するために設計されたWebアプリケーションである。バックエンドにPHP、データ保存にJSONファイルを採用することで、データベースの構築・運用コストを排除し、サーバーなどの一般的なレンタルサーバー上で即座に稼働できる構成となっている。

フロントエンドはPWA（Progressive Web App）に対応しており、スマートフォンのホーム画面にアイコンを追加すれば、ネイティブアプリのように起動してワンタップで作業記録を開始できる。認証にはPINコード方式を採用し、IDの入力を不要にすることでログインの手間を最小限にしている。

特徴

• ワンタップ記録 — タグを選択して「開始」を押すだけ。前の作業は自動的に終了し、シームレスに次の作業へ移行できる
• 3階層タグ体系 — クライアント → プロジェクト → 作業種別の3階層で作業を分類。プロジェクトはクライアントに紐づくため、選択UIが自動的にフィルタされる
• リアルタイム＋手動入力 — リアルタイム計測と手動入力の2方式を併用可能。記録し忘れた作業も後から追加できる
• 日次レポート自動送信 — 翌日の初回アクセス時に前日分の作業サマリーをCSV添付でメール送信。手動でのレポート作成が不要
• PWA対応 — ホーム画面から起動可能。Service Workerによるアプリシェルのキャッシュでオフライン時も最低限の表示が可能
• データベース不要 — すべてのデータをJSONファイルで管理。レンタルサーバーの標準環境のみで動作する
• PINコード認証 — 数字のみのPINで簡単ログイン。セッションは3時間有効で、頻繁な再ログインを防止
• タグ即時登録 — 選択肢にないクライアント・プロジェクト・作業種別は、その場で新規入力すると自動的にタグマスタに登録される
• 論理削除 — タグの削除はactiveフラグによる論理削除。過去の記録の整合性を維持しつつ、使用しないタグを非表示にできる

技術構成

TRACEは、フロントエンドとバックエンドを分離したSPA（Single Page Application）風の構成を採用している。フロントエンドのapp.jsがAPI経由でバックエンドのPHPと通信し、JSONファイルの読み書きを行う。

認証

TRACEでは、個人利用を前提としたシンプルなPINコード認証を採用している。ユーザーIDの入力は不要であり、数字のみのPINコードを入力するだけでログインできる。

PINコード入力

アプリにアクセスすると、まずPIN入力画面が表示される。PINコード入力フィールドと送信ボタンのみのシンプルな構成であり、正しいPINを入力するとメイン画面に遷移する。PINコードはconfig.jsonにハッシュ化された状態で保存されており、入力されたPINのハッシュ値と照合して認証を行う。

セッション管理

データ構造

TRACEのすべてのデータは、サーバー上のdata/ディレクトリにJSONファイルとして保存される。データベースを使用しないことで、環境構築の手間を省き、ファイルのバックアップやリストアも容易になっている。

タグマスタ（tags.json）

作業の分類に使用する3つのカテゴリ（クライアント、プロジェクト、作業種別）のタグを管理するマスタファイルである。プロジェクトはclient_idでクライアントに紐づき、クライアント選択時に該当プロジェクトのみが表示される。activeフラグにより論理削除を行い、過去の記録との整合性を維持する。

{
  "clients": [
    { "id": "c001", "name": "A社", "active": true },
    { "id": "c002", "name": "B社", "active": true }
  ],
  "projects": [
    { "id": "p001", "name": "Webサイトリニューアル", "client_id": "c001", "active": true },
    { "id": "p002", "name": "業務システム開発", "client_id": "c002", "active": true }
  ],
  "task_types": [
    { "id": "t001", "name": "コーディング", "active": true },
    { "id": "t002", "name": "ミーティング", "active": true },
    { "id": "t003", "name": "資料作成", "active": true }
  ]
}

作業記録（日別ファイル：records/yyyymmdd.json）

作業記録は日付ごとに個別のJSONファイルとして保存される。ファイル名はyyyymmdd.json形式（例：20260212.json）とし、日別にファイルが分かれることでデータの管理・バックアップが容易になっている。

{
  "date": "2026-02-12",
  "records": [
    {
      "id": "r001",
      "client_id": "c001",
      "project_id": "p001",
      "task_type_id": "t001",
      "detail": "トップページのレスポンシブ対応",
      "start_time": "2026-02-12 09:00:00",
      "end_time": "2026-02-12 10:30:00",
      "duration_minutes": 90,
      "input_type": "realtime"
    },
    {
      "id": "r002",
      "client_id": "c002",
      "project_id": "p002",
      "task_type_id": "t002",
      "detail": "",
      "start_time": "2026-02-12 10:30:00",
      "end_time": null,
      "duration_minutes": null,
      "input_type": "realtime"
    }
  ]
}

設定ファイル（config.json）

アプリ全体の設定を管理するファイルである。PINコード（ハッシュ化済み）、メール送信先アドレス、日次レポートの送信状況を保持する。

{
  "pin_code": "$2y$10$...(ハッシュ化されたPIN)",
  "email": "user@example.com",
  "last_daily_report_date": "2026-02-11"
}

現在の作業状態（current.json）

進行中の作業を素早く参照するためのファイルである。日別の作業記録ファイルを毎回走査する必要がなく、現在の作業状態を即座に取得できる。

{
  "is_active": true,
  "record_date": "2026-02-12",
  "record_id": "r002"
}

画面構成

TRACEは3つの画面で構成される。PIN入力画面、メイン画面（トラッキング画面）、管理画面である。すべての画面はレスポンシブ対応で、スマートフォンからPC まで快適に操作できる。

PIN入力画面

アプリへのアクセス時に最初に表示される画面である。PINコード入力フィールドと送信ボタンのみのシンプルな構成で、正しいPINを入力するとメイン画面に遷移する。セッションが有効な場合（3時間以内の再アクセス）はこの画面をスキップし、直接メイン画面に遷移する。

メイン画面（トラッキング画面）

メイン画面は、現在の作業状況表示、リアルタイム記録、手動入力の3つのエリアで構成されるTRACEの中核画面である。

管理画面

タグの管理とアプリ設定の変更を行う画面である。メイン画面のヘッダーまたはメニューからアクセスする。詳細は「8. 管理画面」セクションを参照。

リアルタイム記録

リアルタイム記録は、TRACEの主要な作業記録方式である。タグを選択して「開始」ボタンを押すだけで、作業時間の計測が自動的に開始される。

操作手順

1. メイン画面のリアルタイム記録エリアでクライアントを選択する
2. 選択したクライアントに紐づくプロジェクトを選択する
3. 作業種別を選択する（コーディング、ミーティング、資料作成 等）
4. 必要に応じて詳細を入力する（任意）
5. 「開始」ボタンをタップする
6. 現在の作業状況表示エリアに作業情報と経過時間がリアルタイムで表示される
7. 作業が終わったら「終了」ボタンで明示的に終了するか、次の作業の「開始」で自動終了させる

前の作業の自動終了

「開始」ボタンを押すと、進行中の作業がある場合は自動的に終了処理が行われる。前の作業のend_timeに現在時刻が記録され、duration_minutesが自動計算される。この仕組みにより、作業の切り替え時に「終了」→「開始」の2ステップが不要となり、ワンタップで次の作業に移行できる。

新規タグの即時登録

クライアント、プロジェクト、作業種別のいずれの選択肢にも該当するものがない場合、その場で新しい名前を入力できる。入力された新しいタグは自動的にtags.jsonに登録され、以降の選択肢として表示される。新規プロジェクトを入力した場合は、現在選択中のクライアントに自動的に紐づけられる。

手動入力

手動入力は、リアルタイム記録では対応できない過去の作業記録の追加や、既存記録の修正に使用する記録方式である。リアルタイム記録と同じタグ選択UIに加え、開始時刻と終了時刻を直接指定するフィールドが追加されている。

操作手順

1. メイン画面の手動入力エリアを開く
2. クライアント・プロジェクト・作業種別を選択する（リアルタイム記録と同じUI）
3. 必要に応じて詳細を入力する（任意）
4. 開始時刻を入力する（日付と時刻）
5. 終了時刻を入力する（日付と時刻）
6. 「登録」ボタンをタップする
7. duration_minutesは開始・終了時刻から自動計算される

手動入力で登録されたレコードはinput_typeが"manual"として保存され、リアルタイム記録（"realtime"）と区別できる。

想定される利用場面

• リアルタイム記録を開始し忘れた作業を、後から記録する
• 終了ボタンを押し忘れたため、正しい終了時刻を手動で設定する
• 外出先でアプリにアクセスできなかった時間帯の作業を記録する
• 前日以前の作業を遡って記録する

管理画面

管理画面では、タグの管理とアプリの設定変更を行う。メイン画面のヘッダーまたはメニューからアクセスする。

タグ管理

クライアント・プロジェクト・作業種別の3カテゴリについて、以下の操作を行うことができる。

設定変更

日次レポートメール

TRACEは、前日の作業サマリーを自動的にメールで送信する日次レポート機能を備えている。手動でのレポート作成が不要になり、日々の作業実績を自動的にアーカイブできる。

送信トリガー

新しい日にアプリへ初めてアクセスした際に、前日分のレポートが自動的にメールで送信される。config.jsonのlast_daily_report_dateと現在の日付を照合し、未送信の場合のみ送信処理を実行する。これにより、同じ日のレポートが二重送信されることを防止している。

メール内容

CSV形式

添付されるCSVファイルは以下の形式で出力される。ヘッダー行に続いて、各作業記録が1行ずつ記載される。

開始時刻,終了時刻,時間（分）,クライアント,プロジェクト,作業種別,詳細
2026-02-11 09:00,2026-02-11 10:30,90,A社,Webサイトリニューアル,コーディング,トップページのレスポンシブ対応
2026-02-11 10:30,2026-02-11 12:00,90,B社,業務システム開発,ミーティング,

PWA対応

TRACEはPWA（Progressive Web App）に対応しており、スマートフォンのホーム画面にアイコンを追加してネイティブアプリのように使用できる。

ファイル・ディレクトリ構成

TRACEのファイル・ディレクトリ構成は以下の通りである。data/ディレクトリは.htaccessによりWebからの直接アクセスが禁止されている。

セキュリティ考慮事項

TRACEは個人利用を前提としたアプリケーションであるが、サーバー上で動作するため、以下のセキュリティ対策を実施している。

Order deny,allow
Deny from all

トラブルシューティング

PINを入力してもログインできない

• PINコードが正しいか確認する（数字のみ）
• Caps LockやNum Lockの状態を確認する
• PINを忘れた場合は、サーバー上のdata/config.jsonのpin_codeフィールドを直接リセットする必要がある

作業の経過時間が表示されない

• ブラウザのJavaScriptが有効になっているか確認する
• ページを再読み込みして、current.jsonの状態を再取得する
• 進行中の作業がない場合は「作業なし」と表示されるのが正常な動作である

「開始」を押しても記録が開始されない

• クライアント、プロジェクト、作業種別がすべて選択されているか確認する
• ネットワーク接続を確認する。APIリクエストがサーバーに到達している必要がある
• ブラウザのコンソールにエラーが表示されていないか確認する

日次レポートメールが届かない

• config.jsonのemailに正しいメールアドレスが設定されているか確認する
• 迷惑メールフォルダを確認する
• サーバーのmail()関数が正しく動作しているか確認する（サーバーの管理画面でメール送信の設定を確認）
• last_daily_report_dateが前日の日付になっていないか確認する（すでに送信済みの場合はスキップされる）

プロジェクトの選択肢が表示されない

• クライアントが先に選択されているか確認する。プロジェクトは選択したクライアントに紐づくもののみ表示される
• 該当クライアントに紐づくプロジェクトがtags.jsonに登録されているか確認する
• プロジェクトのactiveフラグがtrueであるか確認する

PWAとしてインストールできない

• HTTPS環境でアクセスしているか確認する（PWAにはHTTPSが必須）
• manifest.jsonがルートディレクトリに正しく配置されているか確認する
• Service Worker（sw.js）が正しく登録されているか、ブラウザの開発者ツールで確認する

JSONファイルの書き込みエラーが発生する

• data/ディレクトリおよびその中のファイルにPHPからの書き込み権限があるか確認する
• ディスク容量が不足していないか確認する
• ファイルのパーミッション設定を確認する（推奨：ディレクトリ755、ファイル644）

注意事項