Webアプリ制作

前回の第9回では、保存した練習成績を折れ線グラフ・棒グラフで確認できるようにし、直近5回の移動平均や分析メモも追加しました。さらに、成績データをBOM付きCSVへバックアップし、別の環境へ復元できるところまで進めました。第10回は、タイピン...

第8回では、通常練習の成績を段別に計測し、正常終了した1プレイごとの履歴をlocalStorageへ保存できるようにしました。今回は、その保存した成績をグラフで見えるようにし、さらにCSVへバックアップ・復元できるようにします。タイピングラ...

第7回では、通常練習に加えてLevel 1～10のチャレンジモードを作りました。今回はそこから一歩進めて、練習した結果をブラウザへ保存し、自分の上達を数字で確認できるようにしていきます。さらに、チャレンジモードには自分の過去記録と競えるラン...

今回は、これまで作ってきた段別・テンキーのタイピング練習へ「チャレンジモード」を追加します。通常の練習モードは、表示された文字を1つずつ落ち着いて入力する基礎練習でした。第7回では、同じ練習範囲を使いながら、Levelを上げると画面内へ複数...

前回の第5回では、数字段を正式な練習対象へ追加し、テンキー練習も作りました。テンキーでは、数字を入力してEnterを押したあと、数字リールが動いている最中でも次の問題を入力できるようにしました。実際に使ってみると、この「演出は見せる。でも入...

第4回では、Web Audio APIを使った効果音と、Escキーによる途中終了を追加しました。今回は、これまで表示だけだった数字段を正式な練習対象にし、さらにテンキー練習を追加していきます。テンキーは、1文字ずつ落ちてくる通常のタイピング...

前回は、数字段・上段・ホームポジション段・下段の4段キーボードを作り、練習する段を選べるようにしました。今回は、タイピングしたときの手応えを増やすために効果音を追加します。さらに、ミスしたときの演出を強化し、練習を途中で終了できるようにしま...

第2回では、ホームポジション10キーの画面キーボードと担当指ガイドを追加し、出題キーと担当指の発光、ミス時の赤発光、正解時のレーザーと文字破壊まで作りました。第3回では、練習するキーをホームポジションだけから一気に広げます。上段・ホームポジ...

第1回では、ホームポジションの10キーを使って60秒間練習できる、シンプルなタイピングWebアプリを作りました。今回はそこへ、画面キーボードと担当指ガイド、さらに正解・ミス時の演出を追加していきます。最初から完成版を作るのではなく、毎回少し...

タイピングWebアプリ制作、第1回です。今回は、ホームポジションの10キーだけを使った、とてもシンプルなタイピング練習を作ります。画面上部から1文字ずつゆっくり落ちてくるので、表示された文字と同じキーを押します。正しく入力するとスコアが1点...