タイピング練習アプリに成績管理機能を追加実装した
一昨日のブログで紹介したタイピング練習アプリ。
https://forum.pc5bai.com/work/typing/
「やっぱ、成績管理機能があったほうがおもしろいよね...」と思い、追加実装した。
タイピング練習アプリの成績管理機能
タイピング練習アプリの成績公開機能
開発メモ
claude 3.5 Sonnet, claude 3 Opus に同時に相談しつつ、実装にかかった時間はだいたい4.0時間くらい。
UI側の機能追加だけだと1.5時間くらい。あとは、ついでに Vue のメソッドのリファクタリングとかもかなりやって、あわせて2.5時間くらい。
サーバ側の雑になっていた Django REST Framework のシリアライザのテストをしっかり書いたりとか、ついでにほかの APIViews をメンテナンスしたりとか、そういうところに案外時間がかかった。
さらに、夜になってから、出題範囲の絞りこみ機能について、直感的に操作できるようなUIへの変更を思いついたので、これもまた改修。 こっちは、だいたい4時間くらい。
従来はラジオボタンでレベルを選択するとその下に一部のかな文字がチェックボックスといっしょに表示されるという仕様だった。
これを、全かな文字のチェックボックスは表示したままにしておき、ラジオボタンクリックによってチェックボックスのオンオフを切り替えられるようにした。
タイピング練習アプリの出題範囲選択コントロール(改修前)
タイピング練習アプリの出題範囲選択コントロール(改修後)
古いバージョンでは範囲選択画面で無駄になってきた余白にかなのチェックボックスをつめられた。
上の2つの画像を比較する、範囲選択で何が起きているのかが直感的に分かるようになったのではないかと思う。
チェックボックス用の値の持ち方、ラジオボタンでレベル選択したときのフィルターのやり方などかなり書き換えた。
これはそうとうしんどかった...やはり、4時間くらい。
Vue.js は、 JavaScript のリストのフィルターとかが続くうえに computed の値が乱立してきたりすると、訳がわからなくなる。
computed と method が連動している場合も近接したモジュール内の近接した場所に置けないというのも悩み。
あっちこっちに飛んで状況確認しているとくたびれる (^^;
全体のリファクタリングもしたいのだが、いつになることやら。
使い方動画
とはいえ、当面必要なことはやりきった感じがある。
ということで、この機会に、タイピング練習アプリの使い方を説明する動画も作った。
タイピング練習ソフトのご紹介
アカウント作成の話まで含めて一気に話して、20分強。
「学習」というほどでもないモチベーションでささっと見るだけならこの長さでもありかと。
2024年09月07日 18:50
小川 慶一さん
2024年08月30日 20:24
小川 慶一さん
2024年08月28日 09:09
小川 慶一さん
2024年08月27日 20:00
小川 慶一さん
2024年08月20日 17:25
taruwoshiru.105さん