Webアプリ制作

試験用キッチンタイマー制作、第10回です。第9回では、ブラウザを閉じたりPCを再起動したりしても試験の状態を戻せるように、設定内容と実行状態の保存・復元機能を追加しました。ここまででタイマーとして必要な機能はかなり揃いましたが、実際に教室の...

第8回では、タイマーの外観を7種類のテーマから切り替えられるようにしました。見た目はかなり完成形に近づきましたが、実際の試験で使うことを考えると、まだ一つ大きな不安が残っています。もし試験中にブラウザが落ちたら……タイマーはどうなるのでしょ...

前回の第7回では、累積時間／個別時間の切り替え、上段・下段ごとの終了表示、通常試験全体の終了表示、個別延長タイマーの増減などを追加しました。機能面はかなり完成形に近づいてきたので、今回は少し寄り道して「見た目」で遊んでみます。第2回では、い...

第6回では、マシントラブルなどが発生した受験者向けに、個別延長タイマーを追加できるようにしました。今回は、試験の進め方に合わせて「累積時間」と「個別時間」を段ごとに切り替えられるようにし、さらに上段・下段・通常試験全体の終了状態を、画面を見...

前回の第5回では、最初に設定画面を表示し、上段1～4個・下段0～4個のタイマーを必要な数だけ作れるようにしました。さらに、各課題へ入力した所要時間を段ごとに累積し、試験中に見る本番画面をかなり実用的な形まで近づけています。ただ、実際の試験で...

前回の第4回では、上段4個・下段3個のタイマーを1画面に並べ、まとめてスタートできるようにしました。ただ、実際の試験では毎回同じ個数のタイマーを使うとは限りません。試験によって課題数が違ったり、上段だけ使いたかったり、2級と3級で別々の時間...

前回は、タイマーが0秒になったときにパネルが回転し、タイマー名と「終了」を表示する仕組みを追加しました。今回は、いよいよタイマーを複数に増やします。上段に4個、下段に3個を並べ、上段だけ、下段だけ、または全体をまとめて開始できるようにします...

前回は、タイマーの見た目を青いガラス・ネオン風へ変更し、パソコンだけでなくスマートフォンの縦画面・横画面でも使えるようにしました。ただし、時間が0秒になったときは数字が止まるだけです。教室の後ろから見ると、終了したのか、単に止まっているのか...

前回は、Visual Studio Codeを導入し、停止・再開・リセットができる単体キッチンタイマーを作りました。タイマーとしては動くようになりましたが、見た目は動作確認を優先した簡単なものでした。今回は、教室の大型ディスプレイで遠くから...

これまでは、Web上のキッチンタイマーを開いて使っていました。しかし、せっかくなら自分で作ってみたい。AIと作業を分担して作ります今回のWebアプリ制作では、ソースコードの作成を、のんびり研究所のAI「ノン」に担当してもらっています。私は、...