HTML5によるタイマー実装&アプリ×7選

タイマーや時計といったソフトウェアは昔から存在します。ポモドーロテクニック（キッチンタイマーを使って25分間集中して作業する）が流行ると、キッチンタイマー風アプリが多数作られるなど、常に新しいタイマーが様々なプラットフォームで作られています。

今回はそうしたタイマーアプリケーションの中でもWebブラウザ上で動作するものを紹介します。

hoto17296/TopicTimer

ミーティングやプレゼンテーションで使えるタイムキーピングアプリケーションです。トピックと時間を決めたら、後はクリックでタイマーがカウントダウン開始します。

hoto17296/TopicTimer

builderscon/session-timer: [WIP] The Official? builderscon Session Timer

Buildersconのセッションタイマーです。デフォルトで60分のタイマーとなっています。スタートボタンを押すとカウントダウンが開始します。60分の設定であれば、30分/45分50分の3回ベルが鳴る仕組みになっています。

builderscon/session-timer: [WIP] The Official? builderscon Session Timer

objectivehtml/FlipClock

フリップ形式のタイマーを作成できるライブラリです。カウントアップもカウントダウンもサポートされています。ティザーサイトなどで後何日で公開すると言った時に使えそうです。

objectivehtml/FlipClock

Frerit/epiclock: Automatically exported from code.google.com/p/epiclock

jQueryプラグインとして作られているタイマーです。カウントアップ、カウントダウン両方に対応しています。AM/PM表示や24時間表示など細かい表示設定にも対応しています。

Frerit/epiclock: Automatically exported from code.google.com/p/epiclock

nhat-nguyen/sereny: a material-design-inspired countdown timer

マテリアルデザインなカウントダウンタイマーです。デザイン自体の格好良さもありますが、カウントダウンが完了すると数字の部分がバウンドするようなアニメーションがおきます。

nhat-nguyen/sereny: a material-design-inspired countdown timer

maruta/timekeeper: HTML5 and JavaScript based timer with notification chime for academic conference

数字がとても大きく見やすいタイマーです。直感的な操作が可能で、カスタマイズも難しくありません。最大3回までベルを鳴らすタイミングを設定できます。

maruta/timekeeper: HTML5 and JavaScript based timer with notification chime for academic conference

sanographix/css3-countdown: Flip style CSS3 countdown timer

CSS3で実装されたフリップタイプのタイマーです。なお、フリップするようなアニメーションはありません。カウントダウンタイマーになるので、ティザーサイトなどで利用するのが良さそうです。

sanographix/css3-countdown: Flip style CSS3 countdown timer

いかがでしょうか。こうしたUIを実現するにはCSS3で実装したり、JavaScriptで定期的に画面を更新してあげる必要があります。また、サウンドを鳴らす仕組みはaudioクラスを利用します。こうした技術の組み合わせによってタイマーが実現できるようになっています。

とは言え仕組みはシンプルなので、HTML5の体験としてぴったりな素材ではないでしょうか。