カタカナ46文字を練習する。
基本カタカナ46文字のなぞり書き・書き順練習ツール、Katakana Trace を作った。7okenm.com/learn/katakana/ で公開している。
五十音表から文字を選ぶと、書き始めの位置と進む方向を示すガイドが出る。指やペン、マウスで1画ずつなぞり、音声で読み方も確かめられる。「前の文字」「次の文字」で順番に練習することもできる。
五十音表の形で選ぶ。
文字選択は五十音順に並べ、ア行・カ行などの行見出しを付けた。ヤ行とワ行には空きマスを残し、母音の列に沿って文字を置いている。
PCでは文字選択と練習領域を横に並べ、モバイルでは縦に切り替える。狭い画面では文字ボタンの幅と余白も調整した。46文字の中から練習したい文字を探し、そのまま書き始められる構成にした。
Hiragana Traceの設計を引き継ぐ。
Hiragana Traceの開発記録 にまとめた、SVGのお手本とCanvasの筆跡を重ねる設計をベースにした。書き順表示、なぞった経路の判定、書き終えたときの案内も、既存の操作感を引き継いでいる。
実装は src/pages/learn/katakana.astro、カタカナ用の文字データは src/data/katakana.ts に分けた。文字と読み方、SVGの場所、行と列をデータ側で管理する。既存のHiragana Traceを維持し、大規模な共通化や無関係なリファクタは行っていない。
音声は既存のSpeech Synthesis方式を再利用した。日本語の声があれば選び、少しゆっくり読み上げる。声は端末・ブラウザに依存し、利用できない場合もなぞり書きは続けられる。新規の外部APIや有料サービスは追加していない。
SVGの出典と照合を残す。
書き順SVGは zhengkyl/strokesvg の固定revision e4c2c91034e03c9c2f4e95f14f2361a948f52cd0 から、基本カタカナ46文字分を取得した。public/vendor/strokesvg/katakana/ に無改変で保存している。
出典READMEには、全46ファイルのGit blob hashが上流の固定revisionと一致したことを記録した。カタカナSVGはKlee One由来で、SIL Open Font License 1.1が適用される。既存のLICENSE、そこに含まれるNOTICEと著作権表示を維持している。
Learnから開いて、実際に確かめる。
カタカナ46文字とSVGの対応、生成HTMLを確認し、npm.cmd run build が成功することを確かめた。公開時にはCloudflare Pages Preview、PCとNothing Phoneで表示・操作を確認し、本番反映後も表示と動作を確認した。
Learn一覧 にはHiragana TraceとKatakana Traceを並べた。一覧からKatakana Traceへ進む導線も確認し、ひらがなとカタカナの両方を選んで練習できるようにした。
次に広げるなら。
今後の候補は、濁音・半濁音、小さいャ・ュ・ョ、小さいッへの対応。ランダム練習やチャレンジ形式も候補として考えている。いずれも現時点では未実装で、まずは基本46文字を繰り返し練習する構成にしている。