timecard

シンプルなタイムカードを実現するWebアプリです。私の職場はフレックスタイム制で、毎日の出退勤時間を記録する必要があるため、作りました。

一度書けば、すべての環境で動く、Webアプリの特長を実証する習作としても位置付けています。

対応状況は以下のとおりです。

OS	ブラウザ	対応状況
iOS	Mobile Safari	Done
	Native Apps (PhoneGap)	To Do
Android 4.0+	Browser	Done
	Chrome	Done
	Native Apps (PhoneGap)	Done
	Firefox	To Do
	Firefox Hosted Apps	To Do
Mac OS	Safari	Done
	Chrome	Done
	Firefox	Done
	Firefox Hosted Apps	Done
Firefox OS Simulator	Browser	Done
	Hosted Apps	Done
	Packaged Apps	Done

特徴

• シンプルなHTMLと、GPUアクセラレーションを生かしたCSSアニメーションで軽快に動作します。
• rotsuya/getjst.js を使って、日本標準時サーバと自動的に時刻を同期するため、端末の時間がずれていても、正確な時間を記録できます。
• 時刻をlocalStorage (WebStorage) に保存します。
• Application Cacheにより、オフラインでも利用できます。
• iOSでホーム画面にブックマーク(ウェブクリップ)するとネイティブアプリのように利用できます。

デモ

• timecardデモページ

使用方法

• Arriveボタンで出勤時間を打刻できます。
• Leaveボタンで退勤時間を打刻できます。
• 左右にスワイプすると、前後の月のカードを見ることができます。