ことばから、ひらがなを練習する。
以下は、5つのことば・10文字で初期公開したときの開発記録。公開後の46文字対応と五十音UIの改善は、記事末尾に追記した。
子ども向けのひらがな練習ツール、Hiragana Trace を作った。
画面のお手本を指やペンでなぞると、青い線が残る。書き始めの位置と進む方向を確認しながら、1画ずつ練習できる。文字の読み上げと、書き終わったときの声かけも付けた。
練習の入口は「すきなものを えらんで」。ことばを選び、その中の文字を順番になぞる構成にした。読む音と書く形を、同じ画面で確かめるためのツールになっている。
5つのことばを入口にする。
選べることばは、くるま・ねこ・いぬ・とり・うまの5種類。それぞれのカードに絵文字、ことば、文字数を表示した。
データは、ことばと文字の配列、絵文字をひと組で持つ。「くるま」は3文字、それ以外は2文字で、重複する「ま」を除くと練習対象は10文字になる。
カードを押すと選択画面が隠れ、最初の文字の練習へ切り替わる。1文字を書き終えたら「つぎへ」で進み、ことばを最後まで書くと「もういちど」と「ほかのことば」を表示する。画面の切り替えは同じページ内で行う。
お手本はSVG、筆跡はCanvas。
練習する領域は、SVGのお手本とCanvasの筆跡を重ねた構成にした。お手本には文字全体の薄い形を置き、その上に今なぞる画の線、書き始めの番号、方向を示す矢印、終点を表示する。
入力はPointer Eventsで受け取り、マウス・タッチ・ペンを同じ処理につなぐ。移動した点をCanvas上で結び、角と端を丸くした青い線として描く。
入力位置は表示サイズにかかわらず共通の座標へ変換し、画面サイズが変わったときは保存している点列から描き直す。
書き順のデータを、1画ずつ使う。
文字の形と書き順には、サイト内の /vendor/strokesvg/hiragana/ に置いたStrokeSVGのデータを使った。文字ごとにSVGを読み込み、文字全体の形と、書き順に並んだ画のパスを取り出す。読み込んだSVGはページ内のメモリに保持し、同じ文字で再利用する。
1画のパスから点列を作り、ガイド表示と判定の両方に使う。1画が成功するとその筆跡を残したまま、次の画のガイドへ進む。すべての画が終わると、その文字を完了にする。
データの扱いには一つ工夫がある。StrokeSVGでは、交差する部分の表示のために、同じ画が複数のパスに分かれて入っていることがある。判定ではその画の最初のパスを使い、表示用の重複をなぞる経路に混ぜないようにしている。
通った順番と、線からの距離で判定する。
判定は、お手本の経路に沿って通れたかを調べる仕組みにした。
まず書き始めの近くで触れたかを確認する。描いている間は、経路上に置いたチェックポイントを順番に通過したかと、お手本から離れた入力点の割合を記録する。入力点だけでなく、直前の点との間を結ぶ線分もチェックポイントの通過判定に使う。
指やペンを離したとき、最後のチェックポイントまで進み、お手本から大きく離れた点の割合が35%以下なら成功になる。始点や経路との距離には許容幅を持たせている。
途中で止まった場合は「もうすこし！ さいごまで なぞろう」、外れた割合が多い場合は「せんの うえを なぞってみよう」と返す。失敗した画の筆跡だけを消し、すでに書けた画は残す。文字全体を最初から練習する場合は「もういちど」で戻せる。
読み方と、書けたことを音声で伝える。
音声にはブラウザのSpeech Synthesisを使った。文字の読み込みが終わるとその文字を読み上げ、完成すると「く。かけたね」のように声をかける。最後の文字では、ことば全体と「ぜんぶ かけたね」を読み上げる。
発話は日本語を指定し、利用できる日本語の声があれば選ぶ。少しゆっくり読み上げるようにし、新しく話す前に前の発話をキャンセルする。
録音した音声ファイルを再生する構成ではない。声の用意と実際の読み上げは端末・ブラウザ側に任せている。Speech Synthesisが使えない場合は発話処理を抜け、なぞり書きの処理は続ける。
大きな操作と、短い案内。
配色はオフホワイトを基調に、文字色と青を組み合わせた。選択カードには大きな絵文字とことばを置き、練習中は「①から はじめよう」「そのまま なぞってね」のように、その場の操作を短く表示する。
ことばを選ぶ画面と練習画面を分け、練習中には対象の文字、何文字目か、進捗の星を表示する。完了時には星と「できた！」を出し、ことばを全部書いたときは絵文字を使った演出と次の操作をまとめて見せる。
選択カードは画面幅に合わせて列数を減らし、スマートフォンでは1列にする。練習領域も狭い画面では縦に並べる。完了後の「ほかのことば」と「もういちど」は、指で押しやすい大きさにしている。
描画面には touch-action: none を指定し、なぞっている間のスクロールを抑える。描画を始めたポインターを捕捉し、別の指の入力が途中で混ざらないようにしている。
ページはAstro、練習はブラウザ内。
実装は src/pages/learn/hiragana.astro にまとめた。AstroでページとSEO情報を生成し、HTMLで選択カードや練習領域を置く。CSSが表示と画面幅への対応を、ページ内のスクリプトが文字の読み込み、描画、判定、進捗、音声を受け持つ。
選択中のことば、文字、画の番号と、描き途中・完了済みの点列をページ内で管理する。筆跡をサーバーへ送信したり、LocalStorageへ保存したりする処理はない。
文字データは同じサイトから取得するため、読み込み時の通信はある。一方、なぞった線の判定に外部サービスは使わない。音声はブラウザ提供の読み上げ機能を呼び出す構成で、コード側ではローカルの声だけに限定していない。
Learnで公開する。
Hiragana Traceは、現在 7okenm.com/learn/hiragana/ で公開している。
Learnカテゴリの学習・練習コンテンツとして、ことばを選ぶ、1画ずつなぞる、書き終えたらもう一度試す、という流れをひとつのページにまとめた。
公開後、基本ひらがな46文字へ。
初期公開では5つのことばに含まれる10文字に絞った。実際に使いながら、ことばに含まれない文字も選んで練習できるよう、基本ひらがな46文字へ広げた。
あ い う え お
か き く け こ
さ し す せ そ
た ち つ て と
な に ぬ ね の
は ひ ふ へ ほ
ま み む め も
や ゆ よ
ら り る れ ろ
わ を
ん文字データは src/data/hiragana.ts で管理し、文字ごとにSVGと読み方、五十音表での位置を持たせた。ことばからの練習を残しながら、1文字を選ぶ入口を追加した。書き順のガイド、なぞり書き、読み上げ音声も維持している。
SVGの出典を固定して追加する。
追加元は zhengkyl/strokesvg。revisionは e4c2c91034e03c9c2f4e95f14f2361a948f52cd0 に固定した。出典READMEに記録したとおり、既存10文字のSVGとLICENSEは改行コードの違いを除いて上流と一致することを確認し、不足していた36文字のSVGを無改変で追加した。
かなSVGはKlee One由来で、SIL Open Font License 1.1が適用される。既存のLICENSE、そこに含まれるNOTICEと著作権表示を維持し、public/vendor/strokesvg/README.md に出典と追加内容を残した。LICENSEをpublic配下に置き、build生成物にも含める構成を維持している。
46文字を、五十音表で選びやすくする。
46文字への拡張後、セレクターを五十音順に整え、各行に見出しを付けた。や行は「や・ゆ・よ」、わ行は「わ・を」の間に空きマスを残し、母音の列に沿った自然な配置にした。
モバイルでは選択画面と練習画面を縦に並べ、文字ボタンが収まるよう幅と余白を調整した。PCとNothing Phoneでの表示・操作も確認した。最初のことば練習から、好きな文字を選び、繰り返し書く使い方へ広げている。