雪乃☆雫のなでしこ日和

和時計（不定時法時計）

なでしこ３ | 00:15

　前にちょこっと書いていた、時計的なものの件。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180427/1524800687

　なでしこ１にはあるけど、なでしこ３には実装されていない二十四節気取得の関数を作ったりして作ろうとしていたのは和時計でした。

　別のところで公開するように作ったんだけど、なかなかよく出来たように思うから、やっぱりこっちにも載せとく～♪

　江戸時代の不定時法による時刻を表示するものです。

　和時計には、昼と夜とで針の進む早さを変えるものと、目盛の間隔を変えるものがありますが、わたしの能力的な問題と、資料としては昼夜比が目で見て分かった方が良いので後者を採用。

　サインとコサインの呪文を覚えた！（むしろ覚えてなかったんか；）

#-----------------------------------------------------------------------
# 不定時法時計
#-----------------------------------------------------------
＃---データ----------
節気＝空配列。二十四節気データ＝空配列。Noは空。
二十四節気URL＝「../data/24sekki.csv」
データ＝[{"Ｄ":6.3811,"Ａ":0.242778},{"Ｄ":21.1046,"Ａ":0.242765},{"Ｄ":4.8693,"Ａ":0.242713},{"Ｄ":19.7062,"Ａ":0.242627},{"Ｄ":6.3968,"Ａ":0.242512},{"Ｄ":21.4471,"Ａ":0.242377},{"Ｄ":5.6280,"Ａ":0.242231},{"Ｄ":20.9375,"Ａ":0.242083},{"Ｄ":6.3771,"Ａ":0.241945},{"Ｄ":21.9300,"Ａ":0.241825},{"Ｄ":6.5733,"Ａ":0.241731},{"Ｄ":22.2747,"Ａ":0.241669},{"Ｄ":8.0091,"Ａ":0.241642},{"Ｄ":23.7317,"Ａ":0.241654},{"Ｄ":8.4102,"Ａ":0.241703},{"Ｄ":24.0125,"Ａ":0.241786},{"Ｄ":8.5186,"Ａ":0.241898},{"Ｄ":23.8896,"Ａ":0.242032},{"Ｄ":9.1414,"Ａ":0.242179},{"Ｄ":24.2487,"Ａ":0.242328},{"Ｄ":8.2396,"Ａ":0.242469},{"Ｄ":23.1189,"Ａ":0.242592},{"Ｄ":7.9152,"Ａ":0.242689},{"Ｄ":22.6587,"Ａ":0.242752}];
日出没＝[{"明":"6:16","暮":"17:17"},{"明":"6:14","暮":"17:30"},{"明":"6:05","暮":"17:45"},{"明":"5:51","暮":"17:59"},{"明":"5:33","暮":"18:12"},{"明":"5:12","暮":"18:25"},{"明":"4:50","暮":"18:38"},{"明":"4:29","暮":"18:52"},{"明":"4:10","暮":"19:06"},{"明":"3:55","暮":"19:20"},{"明":"3:47","暮":"19:32"},{"明":"3:47","暮":"19:38"},{"明":"3:54","暮":"19:38"},{"明":"4:05","暮":"19:29"},{"明":"4:18","暮":"19:15"},{"明":"4:32","暮":"18:55"},{"明":"4:45","暮":"18:32"},{"明":"4:57","暮":"18:09"},{"明":"5:09","暮":"17:48"},{"明":"5:21","暮":"17:29"},{"明":"5:35","暮":"17:14"},{"明":"5:48","暮":"17:05"},{"明":"6:01","暮":"17:03"},{"明":"6:11","暮":"17:07"},{"明":"6:00","暮":"18:00"}]
刻＝"卯","六","明"],["辰","五","朝"],["巳","四","昼"],["午","九","昼"],["未","八","昼"],["申","七","夕"],["酉","六","暮"],["戌","五","夜"],["亥","四","夜"],["子","九","夜"],["丑","八","暁"],["寅","七","暁"]]
旧月名＝["睦月","如月","弥生","卯月","皐月","水無月","文月","葉月","長月","神無月","霜月","師走"]
漢数字＝["一","二","三","四","五","六","七","八","九","十"]
月名＝空。日日＝空。表示節板＝「今日」
#-----------------------------------------------------------

＃---説明----------
プログラム説明＝「【プログラム説明】」
不定時法＝「【不定時法とは】」
読み方＝「【和時計の読み方】」
「#btn」にDOM親要素設定。
「プログラム説明」のボタン作成して、説明ボタンに代入。
「不定時法とは」のボタン作成して、不定時法ボタンに代入。
「和時計の読み方」のボタン作成して、読方ボタンに代入。
「詳細データ」のボタン作成して、詳細ボタンに代入。
#-----------------------------------------------------------

＃---画面設定----------
「#clock」にDOM親要素設定。
「現在時刻(定時法): 」のラベル作成。
空のエディタ作成して、定時法に代入。
「#date」に「　」をDOMテキスト設定。
「#sekki」に「　」をDOMテキスト設定。
「#sekki-date」に「　」をDOMテキスト設定。
#-----------------------------------------------------------

#---描画設定----------
「#tokei」へ描画開始。
カメ描画先は「#tokei」
カメ画像URL＝「../image/hari.png」

#時計のサイズを指定
時計サイズ=350
外枠太=5
マージン=20
半径=時計サイズ/2
中点=時計サイズ/2＋マージン
#-----------------------------------------------------------

#---二十四節気データダウンロード----------
二十四節気URLへGET送信した時には
　　対象をCSV取得し、それを二十四節気データへ代入。
　　24回
　　　　節気[回数-1]＝空配列。
　　　　節気[回数-1]＝二十四節気データ[回数-1][0]
　　ここまで。

    ＃---セレクトボックス作成---------
    節気セレクト＝「<select id="sekki-select" name="sekki-select">
    <option>今日</option>
    」
    数＝０
    節気を反復
　　　　節気セレクト＝「<option value="{数}">{節気[数]}</option>」を節気セレクトに一行追加。
　　　　数＝数＋１。
    ここまで。
    節気セレクト＝「<option>定時法</option></select>」を節気セレクトに一行追加。
    「#select」にDOM親要素設定。
    節気セレクトを「#select」にDOM_HTML設定。
    「#sekki-select」の「onchange」に「節板変更」をDOMイベント設定。
    #-----------------------------------------------------------

　　#---描画----------
    カメ作成。カメ非表示。
　　0にカメ速度設定。
　　今日の二十四節気No取得し、それをNoに代入。

　　文字盤作成。Noで節板作成。時計表示。カメ表示。
　　「時計表示」を1秒毎。
    #-----------------------------------------------------------
ここまで。

#-----------------------------------------------------------

#---ボタンイベント----------
説明ボタンをクリックした時には、
　　プログラム説明を言う。
ここまで。
不定時法ボタンをクリックした時には、
　　不定時法を言う。
ここまで。
読方ボタンをクリックした時には、
　　読み方を言う。
ここまで。
詳細ボタンをクリックした時には、
　　説明文＝空。
　　１２回
　　　　仮＝刻[回数-1][3]。
　　　　仮＝仮の６から３だけ文字削除。
　　　　仮＝「{刻[回数-1][2]}{刻[回数-1][1]}ツ ： {仮}」
　　　　説明文＝説明文に仮を一行追加。
　　ここまで。
　　説明文を言う。
ここまで。

「#sekki」をクリックした時には、
　　説明文＝空。
　　説明文＝説明文に「{節気[No]}（{二十四節気データ[No][1]}）　{二十四節気データ[No][2]}」を一行追加。
　　説明文＝説明文に「{二十四節気データ[No][3]}{二十四節気データ[No][4]}　{二十四節気データ[No][5]}（暦便覧）」を一行追加。
　　もし、二十四節気データ[No][4]＝「節」ならば、節中＝「正節」。
　　違えば、節中＝「中気」
　　説明文＝説明文に「{二十四節気データ[No][6]}の月の{節中}。{二十四節気データ[No][8]}」を一行追加。
　　説明文＝説明文に「天文学的には、太陽が黄経{二十四節気データ[No][7]}度の点を通過する時。」を一行追加。
　　説明文を言う。
ここまで。
#-----------------------------------------------------------

●時計表示
　　もし、今＝「00:00:00」かつ表示節板＝「今日」ならば、
　　　　[0,0,400,400]の描画クリア。カメ非表示。
　　　　文字盤作成。Noで節板作成。カメ表示。
　　ここまで。
　　定時法に今をテキスト設定。
　　今を「:」で区切る。
　　時=それ[0]。分=それ[1]。
　　時角度＝(時/24*360)+((分/60)*15)
　　[中点,中点]へカメ起点移動。
　　時角度にカメ角度設定。
ここまで。

●節板変更
　　# セレクトボックスのvalueを取得する
　　表示節板＝「#sekki-select」の「value」をDOM属性取得。
　　もし、表示節板＝「今日」ならば、
　　　　今日の二十四節気No取得し、それをNoに代入。
　　違えば、もし、表示節板＝「定時法」ならば、
　　　　No＝24。
　　違えば、
　　　　No＝表示節板。
　　　　今年の節気[No]で二十四節気日付取得し、日付に代入。
　　　　日付を「/」で区切る。月＝それ[0]。日＝それ[1]。
　　　　月と日で日付漢字化。
　　ここまで。
　　[0,0,400,400]の描画クリア。カメ非表示。
　　文字盤作成。Noで節板作成。カメ表示。
ここまで。

●文字盤作成
　　外枠太に線太設定。白色に塗色設定。黒色に線色設定。
　　[中点,中点]へ半径の円描画。
　　3に線太設定。
　　[中点,中点]へ半径-50の円描画。
　　[中点,中点]へ半径-75の円描画。
　　1に線太設定。
　　[中点,中点]へ半径-95の円描画。
　　灰色に塗り色設定。「10px Aria」に描画フォント設定。
　　24回
　　　[(半径+10)*COS(DEG2RAD(15*回数-90))＋中点-外枠太,(半径+10)*SIN(DEG2RAD(15*回数-90))＋中点+外枠太]へ回数を文字描画
　　ここまで。
ここまで。

●(Noで)節板作成
　　もし、No＝24ならば、
　　　　「#date」に「定時法表示」をDOMテキスト設定。
　　　　「#sekki」に「 」をDOMテキスト設定。
　　　　「#sekki-date」に「一日を十二等分・一時は二時間」をDOMテキスト設定。
　　違えば、
　　　　「#date」に「{月名} {日日}日」をDOMテキスト設定。
　　　　「#sekki」に節気[No]をDOMテキスト設定。
　　　　今年の節気[No]を二十四節気日付取得し、今節気日付に代入。
　　　　もし、No＝23ならば、
　　　　　　今年の節気[0]を二十四節気日付取得し、次節気日付に代入。
　　　　違えば、
　　　　　　今年の節気[No+1]を二十四節気日付取得し、次節気日付に代入。
　　　　ここまで。
　　　　次節気日付＝「{今年}/{次節気日付}」に「-0/0/1」を日付加算。
　　　　次節気日付＝次節気日付を「/」で区切る。
　　　　２回
　　　　　　一時＝次節気日付[回数]の1だけ文字左部分。
　　　　　　もし、一時＝「0」ならば、次節気日付[回数]＝次節気日付[回数]の1から1だけ文字削除。
　　　　ここまで。
　　　　次節気日付＝「{次節気日付[1]}/{次節気日付[2]}」
　　　　「#sekki-date」に「（{今節気日付}～{次節気日付}）」をDOMテキスト設定。
　　ここまで。

　　明六＝日出没[No]["明"]。「#ake6」に明六をDOMテキスト設定。
　　暮六＝日出没[No]["暮"]。「#kure6」に暮六をDOMテキスト設定。
　　明六を「:」で区切る。
　　明六時=それ[0]。明六分=それ[1]。
　　暮六を「:」で区切る。
　　暮六時=それ[0]。暮六分=それ[1]。

　　明六正刻角度＝(明六時/24*360)+((明六分/60)*15)
　　暮六正刻角度＝(暮六時/24*360)+((暮六分/60)*15)
　　昼一刻長＝(暮六正刻角度-明六正刻角度)/6。
　　昼長＝(86400/(360/昼一刻長))*6。「#hiru」に「漢字」で昼長を時間計算をDOMテキスト設定。
　　昼一刻＝(86400/(360/昼一刻長))。「#hiru1」に「漢字」で昼一刻を時間計算をDOMテキスト設定。
　　夜一刻長＝(360-(暮六正刻角度-明六正刻角度))/6。
　　夜長＝(86400/(360/夜一刻長))*6。「#yoru」に「漢字」で夜長を時間計算をDOMテキスト設定。
　　夜一刻＝(86400/(360/夜一刻長))。「#yoru1」に「漢字」で夜一刻を時間計算をDOMテキスト設定。
　　明六＝0&明六。
　　詳細データ作成（明六,昼一刻,0）
　　詳細データ作成（暮六,夜一刻,6）
　　詳細データ＝詳細データをCSV取得。

　　明六初刻角度＝明六正刻角度-(夜一刻長/2)
　　暮六初刻角度＝暮六正刻角度-(昼一刻長/2)
　　朝五初刻角度＝明六初刻角度＋昼一刻長/2＋夜一刻長/2
　　夜五初刻角度＝暮六初刻角度＋昼一刻長/2＋夜一刻長/2

　　黒色に塗り色設定。3に線太設定。
　　明六正刻角度で昼夜分離線描画。
　　暮六正刻角度で昼夜分離線描画。
　　明六初刻角度で刻区切線描画。
　　明六初刻角度＋(昼一刻長/4＋夜一刻長/4)で０を文字盤描画。
　　暮六初刻角度で刻区切線描画。
　　暮六初刻角度＋(昼一刻長/4＋夜一刻長/4)で６を文字盤描画。
　　５回
　　　　朝五初刻角度+(昼一刻長*(回数-1))で刻区切線描画。
　　　　朝五初刻角度+(昼一刻長*(回数-1))+(昼一刻長/2)で（回数）を文字盤描画。
　　　　夜五初刻角度+(夜一刻長*(回数-1))で刻区切線描画。
　　　　夜五初刻角度+(夜一刻長*(回数-1))+(夜一刻長/2)で（回数+6）を文字盤描画。
　　ここまで。
　　２４回
　　　　もし、(回数-1)%4＝０ならば、2に線太設定。
　　　　違えば、1に線太設定。
　　　　明六正刻角度+(昼一刻長/4*(回数-1))で細区切線描画。
　　　　暮六正刻角度+(夜一刻長/4*(回数-1))で細区切線描画。
　　ここまで。
ここまで。

●(角度で)昼夜分離線描画
　　x＝(半径-75)*COS(DEG2RAD(角度-90))＋中点
　　y＝(半径-75)*SIN(DEG2RAD(角度-90))＋中点
　　[中点,中点]から[x,y]まで線描画
ここまで。
●(角度で)刻区切線描画
　　x1＝(半径-94)*COS(DEG2RAD(角度-90))＋中点
　　y1＝(半径-94)*SIN(DEG2RAD(角度-90))＋中点
　　x2＝(半径)*COS(DEG2RAD(角度-90))＋中点
　　y2＝(半径)*SIN(DEG2RAD(角度-90))＋中点
　　[x1,y1]から[x2,y2]まで線描画。
ここまで。
●(角度で)細区切線描画
　　x1＝(半径-94)*COS(DEG2RAD(角度-90))＋中点
　　y1＝(半径-94)*SIN(DEG2RAD(角度-90))＋中点
　　x2＝(半径-75)*COS(DEG2RAD(角度-90))＋中点
　　y2＝(半径-75)*SIN(DEG2RAD(角度-90))＋中点
　　[x1,y1]から[x2,y2]まで線描画。
ここまで。
●(角度でNoを)文字盤描画
　　「bold 36px serif」に描画フォント設定。
　　x＝(半径-25)*COS(DEG2RAD(角度-90))＋中点-18
　　y＝(半径-25)*SIN(DEG2RAD(角度-90))＋中点+15
　　[x,y]へ刻[No][0]を文字描画。
　　「bold 18px serif」に描画フォント設定。
　　x＝(半径-62)*COS(DEG2RAD(角度-90))＋中点-9
　　y＝(半径-62)*SIN(DEG2RAD(角度-90))＋中点+6
　　[x,y]へ刻[No][1]を文字描画。
ここまで。

●詳細データ作成（六ツ,一刻,A）
　　一刻＝「デジタル」で一刻を時間計算。
　　時間＝「{六ツ}:00」。
　　刻[A][3]＝時間。
　　５回
　　　C＝回数
　　　(回数)回
　　　　　時間＝時間に「+{一刻}」を時間加算。
　　　ここまで。
　　　刻[A+C][3]＝時間。
　　ここまで。
ここまで。
#-----------------------------------------------------------
●日付加算（SにAを）
　　記号＝Aの１だけ文字左部分。
　　A＝Aの１から１だけ文字削除。
　　A＝Aを「/」で区切る。
　　ｙ＝A@1/12を切捨。ｍ＝A@1%12。
　　S＝Sを「/」で区切る。
　　もし、記号＝「+」ならば、
　　　　ｙ＝ｙ＋(S@1+ｍ)/12を切捨。
　　　　S@0=S@0+A@0+ｙ。
　　　　S@1=(S@1+ｍ)%12。
　　違えば、
　　　　S@0=S@0-A@0-ｙ。
　　　　S@1=S@1-ｍ。
　　ここまで。
　　もし、S@1=0ならば、
　　　　S@1=12。S@0=S@0-1。　　＃ここね
　　ここまで。
　　ｄ＝(A@2)*(24*60*60)。
　　年＝S@0。月＝S@1。日＝S@2。
　　S＝「{年}/{月}/{日}」をUNIXTIME変換。
　　もし、記号＝「+」ならば、S＝S+ｄ。
　　違えば、S＝S-ｄ。
　　S＝Sを日時変換。
　　S＝Sの１０だけ文字左部分。
　　Sで戻る。
ここまで。

●時間加算（SにAを）
　　記号＝Aの１だけ文字左部分。
　　A＝Aの１から１だけ文字削除。
　　A＝Aを「:」で区切る。
　　時＝(A@0)*60*60。分＝(A@1)*60。秒＝(A@2)。
　　S＝「{今日} {S}」をUNIXTIME変換。
　　もし、記号＝「+」ならば、S＝S+時+分+秒。
　　違えば、S＝S-時-分-秒。
　　S＝Sを日時変換。
　　S＝Sの８だけ文字右部分。
　　Sで戻る。
ここまで。

●（SでAを）時間計算
　　hh＝（A／３６００）を切捨。
　　mm＝（（A-（hh＊３６００））／６０）を切捨。
　　ss＝（A）-（hh＊３６００）-（mm＊６０）を切捨。
　　もし、S＝「漢字」ならば、
　　　もし、（hh＝０）かつ（mm＝０）ならば、
　　　　　それは、「｛ss｝秒」
　　　違えば、もし、hh＝０ならば
　　　　　それは「｛mm｝分｛ss｝秒」。
　　　違えば、
　　　　　それは「｛hh｝時間｛mm｝分｛ss｝秒」。
　　　ここまで。
　　違えば、
　　　それは、「{hh}:{mm}:{ss}」
　　ここまで。
ここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
　　仮表＝空配列。
　　S=Sを改行で区切る。
　　Sを反復
　　　　それを「,」で区切る。
　　　　仮表にそれを配列追加。
　　ここまで。
　　仮表で戻る。
ここまで。
#-----------------------------------------------------------
●(日付の)二十四節気No取得
　　日付を「/」で区切る。
　　年＝それ[0]
　　月＝それ[1]。
　　日＝それ[2]。
　　月と日で日付漢字化。
　　もし、月<３ならば、Ｙ＝年-1。
　　違えばＹ＝年。
　　もし、日>15ならば、数＝月*2-1。
　　違えば、数＝月*2-2
　　日＝データ[数]["Ｄ"]とデータ[数]["Ａ"]でＹの節気計算。
　　もし、（「{年}/{月}/{日}」をUNIXTIME変換）≦（日付をUNIXTIME変換）ならば、
　　　　数で戻る。
　　違えば、
　　　　もし、数＝０ならば、23で戻る。
　　　　違えば、数-1で戻る。
　　ここまで。
ここまで。

●(月と日で)日付漢字化
　　月名＝旧月名[月-1]
　　もし、日＜１０ならば、
　　　　日日＝漢数字[日-1]
　　違えば、
　　　　もし、(日の１だけ文字左部分)＝１ならば、十位＝空。
　　　　違えば、十位＝漢数字[(日の１だけ文字左部分)-1]。
　　　　もし、(日の１だけ文字右部分)＝０ならば、一位＝空。
　　　　違えば、一位＝漢数字[(日の１だけ文字右部分)-1]。
　　　　日日＝「{十位}十{一位}」。
　　ここまで。
ここまで。

●(年のSを|Sで)二十四節気日付取得
　　年を「/」で区切る。
　　年＝それ[0]
　　数＝節気からSを配列検索。
　　もし、数<４ならばＹ＝年-1。
　　違えばＹ＝年。
　　月＝（(数/2)を切捨）＋1。
　　日＝データ[数]["Ｄ"]とデータ[数]["Ａ"]でＹの節気計算。
　　「{月}/{日}」で戻る。
ここまで。

●(DとAでYの)節気計算
　　INT(D+(A*(Y-1900))-INT((Y-1900)/4))
ここまで。
#-----------------------------------------------------------------------

http://snowdrops.starfree.jp/nako3/wadokei_1_03.html

　針はカメになっています。

　CSSを使うより楽で助かった♪