簡単な学習モードの作成
夏休み中は学習モードの作成に取り掛かりました。
UIデザインについて
まず、わかりやすいWebアプリケーションを作るための自分なりの工夫を箇条書きにしてみました。
学習モードに必要となる手本画像などの要素を追加してから、このメモをもとにWebのデザインを行いました。
(※デザインと並行して学習モードのシステムも開発していたため、デザインの時間を十分に取れず、まだメモのすべての項目を満たせていません。)
システムについて
startボタンをクリックしてカメラを起動した後の処理の流れを簡単にメモ書きしてからシステムの開発に取り掛かりました。
カメラの起動中に関して、for文やwhile文の無限ループでは、別のプログラムで得た判別文字を取得して手本と比較するという処理ができず、また無限ループは推奨されていない手法であるため別の手法を考えました。
色々模索した結果、setTimeoutという、特定の処理を一定時間後に実行することができるメソッドを使って、学習モードを処理する関数の中でその関数を再帰呼び出しするようにプログラムを作成させました。
これにより、カメラを起動している間だけ、学習モードの処理(判別文字と手本の文字の照合、次の手本の表示など)が継続的にできるようになりました。
その他
出来上がったプログラムを実行して動作確認したところ、処理に関しては問題なかったのですが、手本と自分の指文字が一致しているタイミングがわからず、本当に正解できているのか疑問に思う場合があったのでエフェクトをつけました。
また、出題順を50音順とランダムにしたり、難易度を選べたりすると、よりよいアプリケーションが作れるかなと思いました。
現時点でできているプログラムの実行動画
動画の容量に制限があるため意図的に画質を落としました。
来週までにやること
出題方法のレパートリーを増やしたり、UIの改善などいろいろやることがあるが、一度他の人にも触ってもらって意見をいただき、それを踏まえて修正点やどんな機能を追加するかをまとめて優先順位をつけるところから始めたいと思います。