ハイブリッド時計

アナログとデジタル

物の量にはアナログとデジタルがあります。両者の詳しい定義について、ここでは取り上げません。テレビの送受信方式がアナログからデジタルに変更になって数年が経ちました。

音楽の録音方式もデジタル化の波が押し寄せました。こう見るとすべてにおいてデジタル方式が優れていると思いがちですが、それは言いすぎです。両者は同じ土俵に立っていないのだから比較するのは適切ではありません。

ハイブリッド時計について

時計について言えば、正確な時間はデジタル時計で知ることができますが、今、一日のどの辺りにあるかをぼんやりと知るにはアナログ時計が適しています。現実として、アナログとデジタルの両方式が混在した時計が販売されています。

今回、アナログとデジタルの両方式をサポートしたハイブリッド時計をJavaScriptで作ってみました。さいごに動作例を挙げておきます。これを作成するに、JavascriptとSVGを使用した簡単な時計とカレンダーを参考にさせていただきました。

SVG要素のanimateTransformという機能を利用しましたが、秒針と分針はアナログ量よろしく、無段階で変化しましたが、時針は一時間ごとにしか変化しません。せっかくのアナログ量が効果を示せずデジタル表示と大差ありません。

これは短時間の調査ですがプログラミングというよりもJavaScript制御系の内部的な問題のような気がします。以下の例では、一秒ごとに時針を進める処理を追加してあります。そのためかどうかはまだ不明ですが、長時間にわたり動作すると時針の表示に誤差が生じるようです。

秒針、分針、時針の矢印表示に時間が取られました。23:59:59の後には日付が繰り上がるはずですが、細かな点では問題が山積みです。Google ChromeとOperaでは動作しましたが他は動かないようです。新たな挑戦として評価していただけたらありがたいです。

改訂履歴

①デジタル機能追加
②時針表示をanimateTransform要素からline要素に変更
③針の先端に矢印を付加
④3針を秒分時から時分秒の順に重ねる
⑤背景画像を表示
⑥全体サイズを大きく

動作例

 

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください