アルファベットまで広げる。
Hiragana Trace、Katakana Trace に続いて、英字を練習する Alphabet Trace を作った。文字を選び、お手本を1画ずつなぞり、読み方を聞く。同じLEARNの中で、ひらがな・カタカナ・アルファベットを一貫した操作で練習できるようにした。
A〜Zとa〜zを選ぶ。
対象は大文字26字と小文字26字、合計52字形。「ABC」と「abc」で切り替え、並んだ文字ボタンから練習したい文字を選ぶ。最初は大文字のAを表示する。
「前の文字」「次の文字」で順に進むこともできる。大小文字を切り替えても選択位置は保ち、Yからならyへ切り替わる。文字を変更したときは筆跡と進捗をリセットし、新しいお手本の最初の画から始める。
52字形のガイドを持つ。
文字データは src/data/alphabet.ts に分けた。大文字と小文字それぞれにSVGのパスを配列で持ち、ひとつのパスを連続した1画として扱う。座標はかなの練習領域と同じ1024 × 1024。小文字のaとgには手書き用の字形を使っている。
getAlphabet() は、文字、並び順、読み上げ用の文字名、画のパスを組み合わせて返す。かなの外部由来SVGを読み込む部分を、ページ内でこのパスからお手本を組み立てる方式に置き換えた。フォントの輪郭をそのままなぞるのではなく、線の中心を追うガイドになっている。
かなの仕組みを再利用する。
表示はSVGのお手本にCanvasの筆跡を重ねる構成。Pointer Eventsでマウス・タッチ・ペンの入力を受け、始点の近くから書き始めたか、経路上のチェックポイントを順に通ったかを調べる。
最後のチェックポイントまで進み、お手本から外れた入力点の割合が35%以下なら、その画を完了にする。途中で止まったり、線から離れすぎたりした場合は、その画をやり直す。書けた画の筆跡は残し、次の画へ進む。
全部の画が終わると「できた！」と、選んだ文字に合わせた「『A』が かけたね」という案内を表示する。「もういちど」で筆跡と進捗を消し、同じ文字を最初から練習できる。
英語の読み方を聞く。
音声にはブラウザのSpeech Synthesisを使う。発話の言語は en-US にし、利用できる声のうち言語コードが en で始まるものがあれば選ぶ。小文字でも読み上げ用データは大文字の文字名を使う。
読み上げは音声ボタンを押したときだけ。ページを開いたとき、文字を選んだとき、書き終えたときには自動再生しない。Speech Synthesisが使えない環境では音声ボタンを無効にし、なぞり書きは続けられる。実際の声や通信の有無はブラウザ・OSの音声機能に依存する。
小さい画面でも使う。
文字選択と練習領域は、画面幅800px以下で縦に並ぶ。520px以下では文字ボタンの余白と間隔を調整する。描画面では touch-action: none を指定し、なぞっている間のスクロールを抑えている。
test/alphabet-browser.html には、52字形をpen・touch・mouseの合成入力でなぞり、完成、リセット、大小文字切替、読み上げの呼び出しを確認するテストがある。画面幅を指定でき、横方向のはみ出しと文字ボタンの大きさもチェックする構成にした。音声はモックに置き換えるため、実際の発音や実機の指・ペン操作は別の確認になる。
Learnで公開する。
Alphabet Trace は、Hiragana Trace、Katakana Traceに続く3種類目のなぞり書きツール。2026年9月10日の追加コミットで、ページ、文字データ、ブラウザテストとLearnの導線をまとめた。文字を選んですぐ書き始められる形を、英字まで広げている。