試験運営用として制作している、Web版の試験用キッチンタイマーです。
最初は1個だけのシンプルなタイマーから始まり、実際に使う場面を考えながら少しずつ機能を追加してきました。
このページでは、現在の最新版と、これまでに制作した過去バージョンをまとめています。
一番上が現在の最新版です。下へ進むほど古いバージョンになります。
過去バージョンもそのまま残しています。第1回のシンプルなタイマーから、少しずつ機能が増えていく様子も実際に試せます。
第10回制作｜Ver.1.0 全画面表示・スリープ対策編【最新版】
現在おすすめしている最新版です。
第9回までに追加した複数タイマー、個別延長、テーマ切り替え、保存・復元などの機能に加えて、全画面表示とスリープ対策を追加しました。
Fullscreen APIによる全画面表示、Screen Wake Lock APIによる補助的なスリープ防止、Windows 11のスリープ設定案内まで追加し、Ver.1.0として本編を一区切りにしています。
第9回制作｜保存・復元編
ブラウザを閉じたり、パソコンを再起動した場合でも、タイマーの状態を復元できるようにしたバージョンです。
設定データと実行データを保存し、終了予定時刻と現在時刻から残り時間を再計算します。保存期限を過ぎた実行データだけを破棄し、設定内容は残せるようにしています。
第8回制作｜外観テーマ切り替え編
タイマーの外観を切り替えられるようにしたバージョンです。
ブルー・ガラス、ブラック・インダストリアル、ミニマル、サイバーパンク、3種類のスチームパンクを合わせた7種類のテーマを用意しました。
このあたりから、実用機能だけではなく見た目でもかなり遊び始めています（笑）
第7回制作｜時間方式・終了表示編
上段・下段ごとに、累積時間と個別時間を切り替えられるようにしたバージョンです。
各段の通常タイマーがすべて終了すると段全体を終了表示へ切り替え、上下段の通常試験がすべて終わると画面中央へ全体終了を表示します。
個別延長タイマーは通常試験の終了判定には含めず、試験終了後もそのまま動作できるようにしています。
第6回制作｜個別延長タイマー編
マシントラブルなどで、特定の人だけ試験時間を延長する場合を想定した機能を追加しました。
個別延長タイマーは最大4個まで追加でき、同じ人への追加延長や延長履歴、延長時間の合計も確認できます。
操作パネルは一定時間で自動的に隠れ、マウスを動かすと再表示する仕組みもこの回で追加しています。
第5回制作｜可変タイマー・累積時間編
固定されていたタイマー数をやめ、設定画面から必要な数だけ作れるようにしたバージョンです。
上段は1～4個、下段は0～4個から選択でき、タイトルや各タイマー名、時間も設定できるようになりました。
各課題の所要時間を入力すると、段ごとに累積した終了時刻として表示できる仕組みも追加しています。
第4回制作｜複数タイマー編
1個だったタイマーを、上段4個・下段3個の複数タイマーへ拡張したバージョンです。
上段、下段、全体をまとめてスタート・リセットでき、それぞれのタイマーは独立して動作します。
ここで現在のタイマーボードらしい形が見え始めました。
第3回制作｜終了演出編
タイマーが0秒になったときの終了表示を作ったバージョンです。
タイマーパネルが約0.7秒で回転し、裏面へ「タイマー名＋終了」を表示します。
試験中の利用を考え、終了時に音を鳴らさない仕様にしています。
第2回制作｜デザイン・スマートフォン対応編
第1回で作ったシンプルなタイマーの見た目と操作方法を整えたバージョンです。
複数のデザイン案から青いガラス・ネオン風のデザインを採用し、時計表示を大きくしました。
タイマー名や時間を直接変更できるようにし、パソコンだけでなくスマートフォンの縦・横画面にも対応しています。
第1回制作｜基本機能編
すべての始まりになった、1個だけのシンプルなキッチンタイマーです。
分・秒を入力し、スタート、一時停止、再開、リセットができる基本的なタイマーをHTML・CSS・JavaScriptで作りました。
今のVer.1.0と見比べると、「ここから始まったのか」と分かりやすいと思います（笑）
これからの更新について
第10回、Ver.1.0で試験用キッチンタイマーの本編はいったん一区切りです。
今後、小さな修正や改善を行った場合はVer.1.1、Ver.1.2といった形で、このページの一番上へ追加していきます。
大きな機能追加を行う場合は、第11回以降として制作記事も再開する予定です。
つまり、このページはこれからも上へ上へと伸びていきます（笑）
