Task Timer & Tracker

Task Timer & Tracker は、日々のタスクにかかる時間を計測し、記録・集計するためのアプリケーションです。

アプリの起動方法

このアプリは Electron で作成されています。ソースコードからアプリを起動するには、Node.js の環境を利用します。

1. 環境の確認: お使いのパソコンに Node.js がインストールされていることを確認してください。
2. 依存関係のインストール: ターミナル（またはコマンドプロンプトやPowerShell）でこのアプリのフォルダ階層に移動し、以下のコマンドを実行します。

   npm install

3. アプリの起動: インストールが完了したら、続いて以下のコマンドを実行するとアプリが立ち上がります。

   npm start

実行ファイル（.exe）を作成して起動する方法

毎回コマンドを入力せずに、ダブルクリックで起動できる「実行ファイル（.exe）」を作成することもできます。他の人に配布したい場合や、手軽に起動したい場合におすすめです。

1. コマンドプロンプトやターミナルでアプリのフォルダを開き、以下のコマンドを実行してビルドします。

   npm run build

2. ビルドが完了すると、フォルダ内に release-builds/Task Timer-win32-x64 という新しいフォルダが作成されます。
3. その中に入っている Task Timer.exe をダブルクリックすると、アプリを直接起動できます。

何度も使う場合は、この .exe ファイルを右クリックして「ショートカットの作成」を行い、デスクトップなどに置いておくと便利です。

主な機能

• タイマー機能: カテゴリとタスク名を入力し、指定した時間（分・秒）でタイマーを開始・管理できます。
• 履歴・集計:
  • 単日集計: 1日のタスクごとの合計時間を確認できます。
  • 月間集計: 月ごとのタスク時間を集計し、CSVとして出力可能です。
  • 履歴一覧: 過去のタスク履歴をリスト形式で振り返ることができます。
• カテゴリ管理: 自分のワークフローに合わせてタスクのカテゴリを自由にカスタマイズ可能です。

使い方

1. タスクの準備: タスクカテゴリを選択し、現在のタスクにタスク名を入力します。
2. 時間の設定: 分・秒を入力し、「設定」ボタンを押します。
3. 計測の開始: Startボタンでタイマーがスタートします。途中で一時停止したい場合はPause、リセットしたい場合はResetを利用してください。
4. 完了時の通知: タイマーがゼロになるとアラーム音が鳴ります。画面上の「OK（音を止める）」を押して完了します。
5. 振り返り: 下部のタブ（単日集計・月間集計・履歴一覧）から、記録されたデータを確認・出力します。

🏷️ タスクカテゴリの編集・管理

自分の行っているタスクや作業内容に合わせて、カテゴリを自由に追加・削除することができます。

• 管理画面を開く: タスクカテゴリのラベルの右側にある歯車アイコン（⚙️）ボタンをクリックします。
• カテゴリの追加: 「新しいカテゴリ名」の入力欄に追加したいカテゴリ名を入力し、追加（⬇️）ボタンを押すと新しくリストに追加されます。
• カテゴリの削除: すでにあるカテゴリを削除したい場合は、リスト内にあるカテゴリ名の横の削除ボタンを押すことで消去できます。

カスタマイズ方法

🎵 アラーム音（サウンド）の変更

タイマー終了時に鳴るアラーム音は、以下の方法で好きな音源に変更できます。

方法1: HTMLファイルを編集する

1. 使用したい音声ファイル（.mp3 や .wav など）を用意し、プロジェクトフォルダ内に配置します。
2. index.html をテキストエディタで開き、最下部付近（187行目以降）にある <audio> タグの src 属性を、用意したファイル名に変更します。

<!-- 例: custom-sound.mp3 に変更する場合 -->
<audio id="alarm-audio" loop preload="auto">
    <source src="custom-sound.mp3" type="audio/mpeg">
</audio>

方法2: ファイル名で上書きする 既存の alarm.mp3 または alarm.wav と同じファイル名に設定した新しい音声ファイルをフォルダ内に配置し、既存ファイルを上書きすることでも変更可能です。

🎨 見た目（UI・デザイン）の変更

アプリのデザインやテーマカラーは、スタイルシート（style.css）を編集することで変更できます。

• カラーテーマの変更: style.css 内の最初の方で定義されている :root 内のカラー変数（例：背景色、テキスト色、メインカラーなど）を変更すると、全体のテーマカラーを一括で調整できます。
• レイアウトや形の変更: タイマーの大きさや配置、ボタンの形などを変えたい場合は、index.html の構造や、style.css の対象クラスのスタイルを直接編集してください。

開発について

本アプリケーションは、AIコーディングアシスタント Antigravity を用いて開発されました。