きゃらりこ日誌
おかげさまで、350ml.netで公開しているウェブアプリ「NHK時計」が好評なようです。
このウェブアプリは、公式のスマホアプリ「NHK時計」のアップデートが長らく行われず、アプリが動かなくなっていたさなかに作成し、2018年7月に公開したものです。
公式アプリはアップデートによって「NHKとけい」の名前で2018年6月に復活したものの、2025年9月30日をもってサービスを終了しました。
そのため、現在はGoogleで「NHK時計」を検索すると、ウェブアプリ「NHK時計」がかなり上位に表示されるようになりました。
おかげで、最近はアクセス数もそこそこあります。
そこでいまさらな話ですが、このNHK時計をどうやって作ったのかを簡単に紹介します。
まずは作り方から
本家「NHKとけい」のアプリ版がどのような作りだったのかは知りませんが、かつて存在していたパソコン版・ブログパーツ版はAdobe AIRで動いていました。
一方、自作のウェブアプリ版はできるだけシンプルにして長く使いたかったので、背景から針まで、すべてインラインSVGで描画し、JavaScriptで針を動かす構成にしました。
SVGは拡大縮小しても劣化しないため、スマートフォンでもPCでも同じデータを使えます。
また、画像ファイルを並べるよりもデータサイズを小さくできるという利点もあります。
ちなみにSVGは、手打ちでは面倒な部分だけInkscapeを使用し、それ以外はほぼ手打ちで作っています。
文字盤の再現
背景はネット上の画像を参考にしただけではなく、NHK放送博物館に展示されている本物のNHK時計も見に行き、細部まで再現しました。
その中でも再現で特に重要だったのが数字です。
文字盤の数字のフォントはHelveticaなのですが、手持ちのフォントの都合でHelvetica互換のSwiss721 BTを使用しています。
また、本家アプリと誤認されるおそれがあるため、NHKのロゴはあえて入れていません。
角ゴシックで斜体のNHKロゴ、私は好きなんですけどね。
針を動かす仕組み
時計を動かしているのは、JavaScriptです。
現在時刻を取得し、時針・分針・秒針それぞれの角度を計算します。
そしてSVGの `rotate()` で角度を書き換えて針を回転させています。
仕組み自体は、意外と単純です。
秒針の揺れにこだわる
個人的に一番こだわったのは秒針です。
普通に実装すると、秒針はなめらかに動くか、1秒ごとに針が飛ぶだけになります。
しかし実際に放送で使われていたNHK時計の動画を見ていると、秒針が進んだあと、針がわずかに揺れているように見えます。
実物のNHK時計にはクォーツムーブメントが使われているのですから、揺れるのも無理はありません。
そこで、ウェブアプリ版では秒針が進んだ直後に、微妙な揺れを加えています。
非常に細かい部分ですが、この揺れがあるだけで本物らしさがぐっと増しました。
ちなみに、公式アプリでは針がぬるっと動いて止まるのですが、個人的に強い違和感があったため、このような実装にしています。
おわりに
一応、時報機能も付けているのですが、環境によっては音がおかしくなるという報告を受けていました。
この記事の公開を機に、組み込んだmp3ファイルを再生する方式から、Web Audio APIで鳴らす方式に切り替えてみました。
これで、音がおかしくなる現象は改善されたはずです。
アナログ時計は一見複雑そうに見えますが、実際には「SVGで描く」「JavaScriptで回す」というシンプルな組み合わせで実現できます。
今回紹介したNHK時計も、その基本の積み重ねで作られています。
特に秒針の揺れは、言われなければ気づかないような部分かもしれません。
それでも、こういう細かいところを作り込むのが楽しかったりします。
公開からもう何年も経ちますが、今でも多くの方に使っていただけているのはありがたい限りです。
あ、そうそう。
ウェブアプリのページでは、NHK時計のほかに、駅時計・国土交通省型時計も公開しています。
よろしければどうぞ。
