HTMLとCSSとJavaScriptでレスポンシブなアナログ時計を作る

ハッピーコンピューター R&D担当の白川です。

ウェブサイトにパーツとしてアナログ時計を配置したいときってよくありますよね。えっないですか？そうですか、ないですか・・・

「いや私はあるよ！」という方向けに、今回私がとある案件の中で作成したアナログ時計をこちらで公開いたします。

とにかくすぐに使ってみたい方はこちら

特徴

  • 完全自己完結型（外部依存なし、画像ファイルも不要）
  • すべてベクターデータなので拡大してもギザギザしない
  • HTML/CSS/JavaScriptのコードが簡潔で見やすい（個人の感想です）
  • 再利用・改変自由

秒針ありバージョン

秒針なしバージョン

コードの簡単な説明

JavaScript部分

tick関数で毎秒（毎分）針を進める処理を行っています。

針の傾きを表現する部分はCSSが担っていますが（例: transform: rotate(90deg);で90度傾ける）、そのCSSをJavaScriptによって上書き処理することで針を進めています。

JavaScriptのnew Date()はクライアント側（Webページを見ている人）基準の日時となりますが、今回の案件ではどの国の人がアクセスしても日本時間で表示させたかったため、new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));としてUTC+9時間で固定しました。

CSS部分

アナログ時計の表現のほとんどはCSSで行われています。

時計の文字盤は<div id="clock">すなわち#clockのbackgroundでSVGデータとして表現しています。これにより別途画像ファイルをどこかに配置する必要がなくなります。SVGデータの作成にはSketchというデザインソフトを用いました。

時計の針は初期位置で12時方向を向いており、針の下部（transform-origin: bottom;）が時計の中心となるようパーセントで針の大きさや位置を調整しています。この調整により、JavaScriptでtransform = rotate(${minuteDeg}deg);を上書きしたときに針がいい感じに中心を軸に動いてくれます。

JavaScriptとかCSSとかよく分からないけど使ってみたい

CDNのjsDelivrからclock.min.jsを読み込んで使えるようにしているので、下記のようにHTMLを書くだけで、

<div style="width: 20%; margin: auto;">
  <div id="clock" offset="+09:00" second="true"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/iwnsew/analogclock@1/clock.min.js"></script>

以下のような感じで親要素の幅（今回の場合はwidth: 20%;）に合わせて表示できます。

div要素のid="clock"のみ必須で、offsetとsecondのオプションは自由に変えることが可能です。

  • offset: "+05:30"や"-11:00"などの形式で協定世界時 (UTC) からの時差を設定できます。日本時間の場合は"+09:00"。
  • second: "true"にすると秒針あり、"false"にすると秒針なしになります。

オプションをいじって試してみる

注意事項

ミッションクリティカルな場面では使えません。ちゃんとサーバー側の時間を参照しましょう。

clock.min.jsの仕組みが知りたい

clock.min.jsの中身を知りたい方は下記のgithubのレポジトリをご参照ください。

github.com

原理としては必要なHTMLの要素やCSSの記述を全てJavaScriptのコードで行っているだけなのですが、同じWebページの他の部分に影響を及ぼさないような工夫が入っています。