リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ChoirCraft - 声部パート練習メーカー
練習記録・進捗トラッカー機能の追加
## 1. 目的
ユーザーが「どの曲のどのパートを何分練習したか」をブラウザのlocalStorageに自動記録し、練習の継続モチベーションを高める。外部APIやサーバーサイド保存は不要で、PHP/MySQLも使わずJS+localStorageのみで完結する軽量実装。
## 2. 具体的な仕様
### 2-1. 自動記録トリガー
- 再生ボタン押下時にタイマー開始、停止/曲変更/ページ離脱時にタイマー停止
- 1セッション最小10秒以上の再生のみ記録対象(誤操作除外)
- 記録する項目: 曲ID・曲名・練習パート(ミュート状態から判定)・練習秒数・日付(YYYY-MM-DD)
### 2-2. localStorageスキーマ
```json
{
"choircraft_log": [
{
"date": "2025-06-01",
"songId": "ode_to_joy",
"songName": "歓喜の歌",
"targetPart": "S",
"seconds": 240
}
]
}
```
- 最大保存件数500件(超過時は古いものから自動削除)
### 2-3. 練習記録ダイアログ
- ヘッダーに「📊 練習記録」ボタンを追加(既存ボタン群の右端)
- クリックでモーダルダイアログを表示。タブ2枚構成:
- **[サマリー]タブ**: 今週の練習日数・累計練習時間・最も練習した曲TOP3・パート別練習割合を円グラフ(Canvas APIで描画、外部ライブラリ不要)で表示
- **[履歴]タブ**: 直近30件を日付・曲名・パート・時間の表形式で一覧表示。右上に「CSVダウンロード」ボタンを設置しBlob経由でエクスポート可能
- モーダルはESCキー・背景クリックで閉じられる
### 2-4. 練習カレンダー(サマリータブ内)
- 当月のカレンダーをHTML tableで描画
- 練習した日はパートカラー(S=赤/A=緑/T=青/B=茶)でセル背景を着色(複数パートは混色せず最も練習時間の長いパート色を優先)
- 練習0分の日はグレー、未来日は無色
### 2-5. 達成バッジ(サマリータブ内)
- 以下の条件を満たすと絵文字バッジを表示(条件未達はグレーアウト)
- 🎵 初練習: 初回記録あり
- 🔥 3日連続練習
- ⭐ 累計1時間達成
- 🏆 全4パート各1回以上練習
## 3. 既存機能との整合
- 既存の再生・ミュート・テンポ・ループ等のロジックには一切手を加えない
- 記録処理は既存の`playback`イベントにフック関数を追加するのみ(既存関数を上書きしない)
- localStorageキーは`choircraft_log`の専用キーを使用し既存キーと衝突しない
- モーダルのCSSは既存スタイルに`.practice-modal`名前空間を付けてスコープを限定
- 記録機能はオプション扱い: モーダル内に「記録を無効化する」トグルを設け、OFFにすると以後記録しない(プライバシー配慮)
ユーザーが「どの曲のどのパートを何分練習したか」をブラウザのlocalStorageに自動記録し、練習の継続モチベーションを高める。外部APIやサーバーサイド保存は不要で、PHP/MySQLも使わずJS+localStorageのみで完結する軽量実装。
## 2. 具体的な仕様
### 2-1. 自動記録トリガー
- 再生ボタン押下時にタイマー開始、停止/曲変更/ページ離脱時にタイマー停止
- 1セッション最小10秒以上の再生のみ記録対象(誤操作除外)
- 記録する項目: 曲ID・曲名・練習パート(ミュート状態から判定)・練習秒数・日付(YYYY-MM-DD)
### 2-2. localStorageスキーマ
```json
{
"choircraft_log": [
{
"date": "2025-06-01",
"songId": "ode_to_joy",
"songName": "歓喜の歌",
"targetPart": "S",
"seconds": 240
}
]
}
```
- 最大保存件数500件(超過時は古いものから自動削除)
### 2-3. 練習記録ダイアログ
- ヘッダーに「📊 練習記録」ボタンを追加(既存ボタン群の右端)
- クリックでモーダルダイアログを表示。タブ2枚構成:
- **[サマリー]タブ**: 今週の練習日数・累計練習時間・最も練習した曲TOP3・パート別練習割合を円グラフ(Canvas APIで描画、外部ライブラリ不要)で表示
- **[履歴]タブ**: 直近30件を日付・曲名・パート・時間の表形式で一覧表示。右上に「CSVダウンロード」ボタンを設置しBlob経由でエクスポート可能
- モーダルはESCキー・背景クリックで閉じられる
### 2-4. 練習カレンダー(サマリータブ内)
- 当月のカレンダーをHTML tableで描画
- 練習した日はパートカラー(S=赤/A=緑/T=青/B=茶)でセル背景を着色(複数パートは混色せず最も練習時間の長いパート色を優先)
- 練習0分の日はグレー、未来日は無色
### 2-5. 達成バッジ(サマリータブ内)
- 以下の条件を満たすと絵文字バッジを表示(条件未達はグレーアウト)
- 🎵 初練習: 初回記録あり
- 🔥 3日連続練習
- ⭐ 累計1時間達成
- 🏆 全4パート各1回以上練習
## 3. 既存機能との整合
- 既存の再生・ミュート・テンポ・ループ等のロジックには一切手を加えない
- 記録処理は既存の`playback`イベントにフック関数を追加するのみ(既存関数を上書きしない)
- localStorageキーは`choircraft_log`の専用キーを使用し既存キーと衝突しない
- モーダルのCSSは既存スタイルに`.practice-modal`名前空間を付けてスコープを限定
- 記録機能はオプション扱い: モーダル内に「記録を無効化する」トグルを設け、OFFにすると以後記録しない(プライバシー配慮)
💬 返信 (3)
🛠 開発を開始しました (機能追加 choircraft)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ChoirCraft - 声部パート練習メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=choircraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/choircraft/
ご利用ありがとうございます!
ご要望いただいた「ChoirCraft - 声部パート練習メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=choircraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/choircraft/
ご利用ありがとうございます!
Echo
Iris