リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ChoirCraft - 声部パート練習メーカー
カスタム練習メモ&難所マーカー機能の追加
## 1. 目的
練習中に気づいた「ここが難しい」「この小節は注意」という情報を楽曲・小節単位でメモとして残せるようにする。次回練習時にすぐ難所へジャンプでき、練習効率を高める。既存の進捗トラッカーと連携し、「記録する」だけでなく「活かす」練習体験を提供する。
## 2. 具体的な仕様
### 2-1. 難所マーカーの追加
- ピアノロール表示エリアの各小節番号の上に「📌」アイコンボタンを表示する(幅16px程度の小さいボタン)。
- クリックするとその小節に「マーカー」が立ち、小節番号背景がオレンジ色にハイライトされる。再クリックで解除。
- マーカーが立っている小節はピアノロール上で常時視覚的に強調表示される。
### 2-2. 小節メモの入力
- マーカーボタンを長押し(500ms)またはダブルクリックすると、その小節に紐づく最大100文字のテキストメモを入力できるポップアップ(`<textarea>`)を表示する。
- 「保存」ボタンでメモを確定。メモがある小節のアイコンは「📝」に変わる。
- 既存メモがある場合は再度長押しで編集・削除が可能。
### 2-3. 難所ジャンプナビゲーション
- 再生コントロールエリアに「◀ 難所」「難所 ▶」の2つのボタンを追加する。
- クリックすると現在再生位置から前後の最寄りマーカー小節にシークし、その小節からループ再生を開始する。
- マーカーが1つも存在しない場合はボタンをグレーアウトして無効化する。
### 2-4. 難所一覧パネル
- 曲情報エリアに「難所一覧」の折りたたみセクション(`<details>`タグ)を追加する。
- 展開するとマーカーが立っている小節番号・メモテキスト・「ここへジャンプ」リンクの一覧をリスト表示する。
- 「すべてクリア」ボタンで当該楽曲のマーカーとメモを全削除できる。
### 2-5. データ保存
- データ構造はlocalStorageに以下のキーで保存する:
`choircraft_markers_{曲ID}` → JSON配列 `[{measure: 3, memo: "音程注意"}, ...]`
- 楽曲切替時は自動的に対象楽曲のマーカーデータを読み込む。
- データはブラウザのlocalStorageのみで完結し、外部通信は一切不要。
## 3. 既存機能との整合
- ピアノロールの描画ロジック(Canvas or DOM)に小節番号ボタン列を追加するのみで、既存の音源再生・ミュート・音量調整・テンポ・キー変更・ループ機能には一切手を加えない。
- 小節指定ループ機能の小節番号入力UIとは独立したUIとして実装し、競合しない。
- 既存の進捗トラッカー(練習記録)のlocalStorageキーとは異なるキー名を使用し、データの混在を防ぐ。
- スマートフォンでは長押し検出をtouchstartイベントで代替し、ポップアップはモーダル表示にしてタップ操作しやすいサイズ(入力欄・ボタンを44px以上)にする。
練習中に気づいた「ここが難しい」「この小節は注意」という情報を楽曲・小節単位でメモとして残せるようにする。次回練習時にすぐ難所へジャンプでき、練習効率を高める。既存の進捗トラッカーと連携し、「記録する」だけでなく「活かす」練習体験を提供する。
## 2. 具体的な仕様
### 2-1. 難所マーカーの追加
- ピアノロール表示エリアの各小節番号の上に「📌」アイコンボタンを表示する(幅16px程度の小さいボタン)。
- クリックするとその小節に「マーカー」が立ち、小節番号背景がオレンジ色にハイライトされる。再クリックで解除。
- マーカーが立っている小節はピアノロール上で常時視覚的に強調表示される。
### 2-2. 小節メモの入力
- マーカーボタンを長押し(500ms)またはダブルクリックすると、その小節に紐づく最大100文字のテキストメモを入力できるポップアップ(`<textarea>`)を表示する。
- 「保存」ボタンでメモを確定。メモがある小節のアイコンは「📝」に変わる。
- 既存メモがある場合は再度長押しで編集・削除が可能。
### 2-3. 難所ジャンプナビゲーション
- 再生コントロールエリアに「◀ 難所」「難所 ▶」の2つのボタンを追加する。
- クリックすると現在再生位置から前後の最寄りマーカー小節にシークし、その小節からループ再生を開始する。
- マーカーが1つも存在しない場合はボタンをグレーアウトして無効化する。
### 2-4. 難所一覧パネル
- 曲情報エリアに「難所一覧」の折りたたみセクション(`<details>`タグ)を追加する。
- 展開するとマーカーが立っている小節番号・メモテキスト・「ここへジャンプ」リンクの一覧をリスト表示する。
- 「すべてクリア」ボタンで当該楽曲のマーカーとメモを全削除できる。
### 2-5. データ保存
- データ構造はlocalStorageに以下のキーで保存する:
`choircraft_markers_{曲ID}` → JSON配列 `[{measure: 3, memo: "音程注意"}, ...]`
- 楽曲切替時は自動的に対象楽曲のマーカーデータを読み込む。
- データはブラウザのlocalStorageのみで完結し、外部通信は一切不要。
## 3. 既存機能との整合
- ピアノロールの描画ロジック(Canvas or DOM)に小節番号ボタン列を追加するのみで、既存の音源再生・ミュート・音量調整・テンポ・キー変更・ループ機能には一切手を加えない。
- 小節指定ループ機能の小節番号入力UIとは独立したUIとして実装し、競合しない。
- 既存の進捗トラッカー(練習記録)のlocalStorageキーとは異なるキー名を使用し、データの混在を防ぐ。
- スマートフォンでは長押し検出をtouchstartイベントで代替し、ポップアップはモーダル表示にしてタップ操作しやすいサイズ(入力欄・ボタンを44px以上)にする。
💬 返信 (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