こんにちは、ひらのです。
あけましておめでとうございます。
2022年になりました。今年は寅年ですね。
毎年年賀状の季節になると思い出す、干支…
日常生活ではそんなに十二支を使う機会はすくないのですぐに忘れてしまったりしますが
干支を使ったアイテムに「和時計」があります。
和時計は江戸時代頃に使われていた時計で文字盤には十二支が使われています。
見た目もレトロでかわいいので、実物が欲しいなぁ～なんて思いますがなかなか手に入るものではなさそうです。
「草木も眠る丑三つ時」や時代劇などのセリフで「子の刻に…」なんて聞いたことがある人もいるかと思います。
今回はそんな和時計を紹介しつつ、jQueryとCSSで現代に蘇らせてみようと思います。
現代の時計はてっぺんに「12」があり、右回りに「3」、「6」、「9」と並び
12時間で一周、1日に二周します。
対して和時計は1日に一周。24時間で一周することになります。
現代風の文字盤を当てるとしたらこんな感じ。
現在の日本では、明治の初めころから「定時法」を採用しています。
それまでは「不定時法」を採用していました。
定時法は、1日（24時間）を均等に分割し、それぞれを1時間としてします。
対して、不定時法では1日（24時間）で同じですが、1時間ごとの長さは一定ではありませんでした。
「1時間が一定の長さでない」というのは不思議な言葉ですが、詳しくは次で説明します。
不定時法の場合、「明け六つ」と「暮れ六つ」を使って昼と夜を分けます。
明け六つは日の出の約30分前くらい。だんだん空が明るくなってきた頃。
暮れ六つは日が沈んだ後の約30分くらい。日の光が無くなり、蠟燭などの明かりが必要になる頃を指します。
さらに昼と夜の時間帯をそれぞれ6個に分けます。
分けた内の1つを「一刻（いっとき）」といいます。現代では約2時間くらいでしょうか
この一刻に十二支を当てはめます。
日付が変わる０時が「子」で、明け六つが「卯」、正午は「午」、暮れ六つは「酉」になります。
和時計では、0時と12時の刻に数字の「9」を当てて、時間が進むにつれて数を減らして行く表示をします。
半周で数字は「4」まで減り、また「9」に戻ります。
明け六つ、暮れ六つという呼び方は、この「4~9」の数値の中の「6」に該当します。
江戸時代の時計は超高級品でVIP専用アイテムでした。町に暮らす一般市民は時計なんて持てません。
そこで、町に暮らす人々に時間を知らせるために「 時の鐘 」が各地で鳴らされました。
この「時の鐘」は鐘を鳴らす数で時間を知らせていました。
その時、「4~9」の数だけ鳴らされていました。
一刻は約2時間ほどあるため、それだけでは細かな時間が分かりませんでした。
そこで、和時計では「一刻」を更に4つに分け、それぞれに1~3の番号を振りました。（約30分くらいの単位かな?）
「草木も眠る丑三つ時」というのは、丑の刻の3番目の時間帯を指していることになります。
しかしこの時代の「待ち合わせ」はとても難しかしそうですね。
明け六つ、暮れ六つは日の出・日没を基準しているので
不定時法では季節によって昼と夜の長さが大きく変わりました。
時計の針が進む速度を変更するのは大変なので、和時計では月ごとや季節ごとに時計の文字盤を変えていました。
というわけで、さっそく和時計を作りました。
See the Pen wadokei by hirano (@_y_hirano) on CodePen.
とりあえず動くものを…という感じなので、計算が甘い箇所もあるかと思いますがお許しください…
まずは1日の基本になる「日の出・日没」の取得から。
こちらは「国立天文台」が公表している「日の出入り」のデータから必要なものだけを抜粋しました。
約1年分のデータをサンプルに入れています。
まずはjsで今日の日付を取得して、「日の出入り」のデータから今日の日の出・日の入りの時刻を求めます。
そして、日の出の30分前（明け六つ）、日の入りの30分後（暮れ六つ）の時間をそれぞれ求めます。
これらの計算には moment.js を使いました。
明け六つ、暮れ六つの時間が決まったら、HTMLとCSSで作成した時計のベースに昼と夜の色分けを追加します。
今回の時計は円形なので、24時間で360度となります。
そして、360度 ÷ 24時間 で 1時間の角度は 15度 になります。
暮れ六つの時刻 － 明け六つの時刻 で昼間の長さを求めて、計算します。
昼間の長さ × 15度 で 昼間の時間帯の角度を出します。
角度が決まったら、JSで下記のようにスタイルを設定します。
$('#dayTime').css({
background: `conic-gradient(#ffe394 0% ${昼時間の角度}%, transparent ${昼時間の角度}% 100%)`,
transform: `translate(-50%, -50%) rotate(${明け六つの角度}deg)`
});
CSSの背景グラデーション（円形）を使って、色を付けます。
次に、昼間の時間帯の角度 と 夜の時間帯の角度 をそれぞれ6分割して、「一刻」の位置を決めます。
文字盤用の十二支や、メモリ要素はHTMLに用意してあるので、それぞれに対して一刻の位置をjsで追加します。
次に、時間を示す「針」を設定します。
HTMLとCSSで「長針」と「短針」の見た目を用意して、時計の中心を軸に回転するように設定しておきます。
jsで現在時刻を取得し、「時間」と「分」の角度をそれぞれ計算します。
ページ読み込み時に1回、針の角度を設定した後は30秒ごとに時間取得を行うようにしました。
（あまり頻繁に行っても負荷がかかるだけなので少な目で…）
時間を示す短針は「24時間で1周」しますが、
分を示す長針は「1分で1周」にしています。
和時計で実際に短針がどのように動いていたのかはわからなかったのですが、
現代人にとっては1周60分じゃないと「今何分か」が分かりにくいので現代と同じ動きにしています。
というわけで、Web版和時計の完成です！