音符カードアプリを修正

  1. トップページから「スタート」
  2. 音符カードがランダムに表示(26音符)
  3. 読めない時はカードをタップ → 裏返って音名を確認
  4. 読めたら赤いボタン「読めたらタップ!」を押す
  5. 残り枚数が減っていき、0枚で完了
  6. 何度でも繰り返し練習可能
Screenshot

ところがある方から、貴重なご指摘を受けました

ある方から裏面が表示されていると
「新しいカードに切り替わるが、裏面の状態(音名表示)のまま表示される」

現在の動作:

カードをタップ → 裏面(音名)表示
その状態で「次のカード」or「読めたらタップ!」を押す
新しいカードに切り替わる が、裏面のまま表示される
手動でもう一度カードをタップして表面に戻す必要がある

期待される動作:

「次のカード」or「読めたらタップ!」を押したら、自動的に新しいカードが表面(音符)の状態で表示される

目次

この問題を修正する必要を感じ、修正

解決方法:FlipCard の key を動的に変更して、カードが切り替わるたびに新しいインスタンスとして扱い、常に表面(front)から表示されるようになりました。

これは割と簡単に解決できました!

せっかくなので、前から気になっていたことをさらに改善しよう

  1. 「よめたらタップ」というのが自分判断である、という点。
     できればあらかじめ、
    「ドレミファソラシ」の7つのボタンが用意されていて
    それをユーザーはタップして
    正解 → 正解表示 + 残り枚数を減らす + 自動で次へ
    不正解 → カードを裏返して正解表示 + 自動で次へ。
  2. カードの音をすべて用意するのでカードが切り替わるたびに音がなる。

仕様:

正解 → 緑丸+チェック表示 → 2秒後に削除して次へ
不正解 → 赤丸+X表示+カード裏返し → 2秒後にシャッフルして次へ(カードは残る)
マークは次に同じカードが出てきても残る
7つのボタンの配置2行に分けて配置(ド・レ・ミ・ファ / ソ・ラ・シ)

主な変更点:

CardStatus enum を追加

none, correct, incorrect の3状態を管理

Flashcard クラスに status フィールド追加

各カードの正解/不正解履歴を保持

音名ボタン機能を追加

_buildNoteButtons(): ド・レ・ミ・ファ / ソ・ラ・シ の2行配置
_onNoteButtonPressed(): ユーザーが選択した音名を判定

正解/不正解の処理

正解: 緑丸+チェック表示 → 2秒後にカード削除
不正解: 赤丸+X表示+カード裏返し → 2秒後にシャッフル(再出題)

ステータスマーカー表示

_buildStatusMarker(): カード左上に丸いマーカーを重ねて表示
カードが再度出てきてもマークは残る

AIに助けてもらいながコードをほぼ入れ替えに近いくらいの大手術となりました。

音(mp3)の作成

ミューズスコアで作成したが、音の余韻の部分が長い。試しにスコアメーカーで作成。
それでも作っても音の余韻の部分が長い

そこで下記のアプリを使い1秒ちょっとにカット&フェードアウト
26個の音符に対応するmp3ファイル(0.mp3 〜 25.mp3 )を作成して今日は終わりとしました。



目次