シンプルなデジタル時計「SIMPLE CLOCK」を公開しました

作業するとき時刻だけ見れたらいいなと思ってブラウザで時刻だけを表示するページ「SIMPLE CLOCK」を作ってみました。

一応レスポンシブデザインに対応しているのでスマホからテレビまで対応しています。ラズパイとかFireTVとかでデジタルサイネージっぽくしてみてもいいですね。

clock.shirokuma-lab.com

実装している機能

時刻の取得

JavaScriptでデバイスから時刻を取得するようになっています。

最初はNICTとかのサーバーから時刻を取得して表示しようかと考えていたのですが、海外からアクセスしたとき現地の時間を表示したいときには不便だなと思ったのと、スマホとかPCとかのシステム時刻ってインターネットから取得してる場合が多く、意外と誤差が少ないのでこんな仕様になっています。

背景色のカスタマイズ

自分の好みによって背景色を変更できるようにしてみました。

「styleswitcher.js」というJavaScriptライブラリ使って実装しています。

alistapart.com

このライブラリはユーザーが選択したCSS名をCookieに記憶して次回サイトを閲覧したときにそのCSSを適応するというもの。手っ取り早く実装できそうだったのでこのライブラリを使ったものの、ブラウザ上で適応できるCSSを最初にすべて読み込まなければならないので、ページの読み込みを遅くしている原因だったりします。このへんは近いうちに別のものを実装するつもりです。

PWA対応

WEBページをデバイスでネイティブアプリのように使えるPWAに対応してます。

PWAの特徴はこんな感じ。

• ブラウザさえあれば インストール不要で使える
• 読み込みがちょっと早くなる
• オフラインでも使える

今のところiOSやAndroidなどのモバイルデバイスを中心にPWAをサポートしているブラウザが多いみたいです。Chrome、Firefox、Safari、Edgeなど主要なブラウザベンダーはPWAをサポートしています。

今後実装したい機能

• 全画面表示機能の実装
• フォントサイズを変更できる機能の実装
• フォントを変更できる機能の実装

他にも「こうするといいよ！」みたいな意見があったら教えていただけたら幸いです。

※スクリーンショットは記事執筆時のものです。

※仕様は予告なく変更になる場合があります。あらかじめご了承ください。