ワークショップタイマーアプリケーション

概要

このリポジトリは、ワークショップやグループワーク、共同作業のために特別に設計されたタイマーアプリケーションです。実用的な時間管理と魅力的な音声・視覚フィードバックを組み合わせることで、楽しく効果的な時間管理を実現します。

主な機能

• 柔軟なタイマー設定: プリセット時間（1分、3分、5分、10分、15分、20分）またはカスタム時間（分・秒）を設定可能
• 直感的な操作: スタート、一時停止、リセット機能を備えたシンプルなコントロール
• 音声フィードバック: タイマー完了時に楽しいサウンドを再生（音量調整・ミュート機能付き）
• 視覚的な演出: タイマー完了時に紙吹雪エフェクトを表示し、達成感を演出
• 進捗表示: 残り時間を大きく表示し、プログレスバーで進捗を視覚化
• 状態インジケーター: タイマーの状態（実行中、完了など）をバッジで表示
• カラーコーディング: 残り時間に応じて表示色が変化（通常→警告→緊急）
• レスポンシブデザイン: モバイル・PC両対応
• キーボードショートカット: スペースキーでスタート/一時停止、Rキーでリセット

簡単な使用方法（推奨）

最も簡単な方法: timer.html をダブルクリックしてブラウザで開くだけです！

1. リポジトリのダウンロード

   • 緑色の「Code」ボタンをクリック
   • 「Download ZIP」を選択
   • ZIPファイルを解凍

2. タイマーを開く

   • timer.html ファイルをダブルクリック
   • ブラウザで自動的に開きます

3. 使用開始

   • プリセットボタンで時間を選択、またはカスタム時間を入力
   • 「スタート」ボタンをクリック
   • タイマーが完了すると音と紙吹雪エフェクトが表示されます

特徴:

• インストール不要
• サーバー不要
• オフラインで動作
• すべての機能が1つのHTMLファイルに含まれています

開発者向け情報

このリポジトリには、React + Vite を使用した開発版のソースコードも含まれています。

必要な環境

• Node.js (バージョン 18 以上を推奨)
• npm (Node.js に付属)

セットアップ手順

1. リポジトリのクローン

   git clone https://github.com/MamoruKuroda/workshop-timer-app.git
   cd workshop-timer-app

2. 依存パッケージのインストール

   npm install

3. 開発サーバーの起動

   npm run dev

   ブラウザで http://localhost:5173 (または表示されたURL) にアクセスすると、アプリケーションが表示されます。

4. ビルド（本番環境用）

   npm run build

   ビルドされたファイルは dist フォルダに出力されます。

5. プレビュー（ビルド後の確認）

   npm run preview

その他のコマンド

• コードの品質チェック: npm run lint
• 最適化: npm run optimize

ファイル構成の説明

workshop-timer-app/
├── timer.html                    # スタンドアロン版タイマー（推奨）
│                                 # ダブルクリックで起動できる完全版
│
├── src/                          # 開発版ソースコード（React + Vite）
│   ├── App.tsx                   # メインアプリケーションコンポーネント
│   ├── main.tsx                  # エントリーポイント
│   ├── components/               # Reactコンポーネント
│   │   ├── Timer.tsx             # タイマーメインコンポーネント
│   │   └── ui/                   # UIコンポーネントライブラリ
│   ├── lib/                      # ユーティリティとヘルパー関数
│   │   ├── confetti.ts           # 紙吹雪エフェクト機能
│   │   └── sound.ts              # サウンド管理機能
│   ├── assets/                   # アセット
│   │   └── audio/                # 音声ファイル
│   │       └── Pafupafu.mp3      # タイマー完了音
│   └── ...
│
├── index.html                    # 開発版HTMLエントリーポイント
├── package.json                  # プロジェクト設定と依存関係
├── vite.config.ts                # Vite設定ファイル
├── tsconfig.json                 # TypeScript設定ファイル
├── PRD.md                        # プロダクト要件定義書
├── README.md                     # このファイル
├── LICENSE                       # ライセンス情報
└── SECURITY.md                   # セキュリティポリシー

主要ファイルの詳細

• timer.html: すぐに使えるスタンドアロン版タイマー（音声データ、スタイル、スクリプトすべて含む）
• src/components/Timer.tsx: React版のタイマーメインコンポーネント
• src/lib/confetti.ts: タイマー完了時の紙吹雪アニメーション機能
• src/lib/sound.ts: 音声再生を管理するSoundManagerクラス
• src/assets/audio/Pafupafu.mp3: タイマー完了時に再生される音声ファイル（7秒間）
• PRD.md: 製品の設計思想、機能要件、デザイン方針を詳細に記載

技術スタック

• フレームワーク: React 19.0
• 言語: TypeScript
• ビルドツール: Vite 6.x
• スタイリング: Tailwind CSS 4.x
• UIコンポーネント: Radix UI
• アイコン: Phosphor Icons、Lucide React
• アニメーション: Framer Motion

ライセンス

このプロジェクトのSpark Templateリソースは、MIT License の下でライセンスされています。Copyright GitHub, Inc.

詳細は LICENSE ファイルをご確認ください。