!『https://n3s.nadesi.com/plain/moon.nako3』を取り込む。# お月様描画 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃---宣言----- 対象日＝今日。 曜日記号＝["日","月","火","水","木","金","土"]。　# 表示用の記号。 色指定＝{ "日付":[赤色,白色,白色,白色,白色,白色,青色,灰色], "月齢":["#FFFFCC",灰色], "月":[月色,"#444444",影色,"#222222"] } 変数 [月初日,対象月,開始位置]＝[空,空,空] ＃＃セレクトボックス用 年リスト＝空配列。 数を2005から2050まで繰り返す。年リスト[数-2005]＝数。ここまで。 月リスト＝空配列。 数を1から12まで繰り返す。月リスト[数-1]＝数。ここまで。 ＃＃API /*----------------------------------------------------------------------- 月位置(方位角･高度･月齢)計算API(まぢぽん製作所　新さくら支店)を利用しています。 このプログラム自体はCC0で公開していますがAPIはご本家HPを一読し規約に沿って利用して下さい。 https://mgpn.org/api/moon/ -----------------------------------------------------------------------*/ 月齢取得API＝「https://mgpn.org/api/moon/v2position.cgi?」 緯度＝35.00。経度＝135.00。 ＃---カレンダー枠作成----- ＃＃曜日欄作成 曜＝空。 曜日記号を反復 曜＝曜に「<th id="曜日_{対象キー}">{対象}</th>」を追加。 ここまで。 ＃＃HTML設定 「<table id="暦"> <thead><tr><th colspan="7" id="年月"></th></tr></thead> <thead><tr><th colspan="7" id="UI"></th></tr></thead> <thead id="曜日"><tr>{曜}</tr></thead> <tbody id="日付"></tbody></table>」をDOM親要素へHTML設定。 ＃＃年月欄・曜日欄装飾 「#UI」の「行揃え」に「中央」をDOMスタイル設定。 「#UI」の「文字サイズ」に「14px」をDOMスタイル設定。 「#年月」に{ "行揃え": "中央", "文字サイズ": "24px", "余白": "12px", }をDOMスタイル一括設定。 ７回 　「#曜日_{回数-1}」の「色」に色指定["日付"][回数-1]をDOMスタイル設定。 ここまで。 ＃---UI作成----- 「#UI」にDOM親要素設定。 年セレクト＝年リストのセレクトボックス作成。 「年」のラベル作成。 月セレクト＝月リストのセレクトボックス作成。 「月　」のラベル作成。 前年ボタン＝「≪」のボタン作成。 前月ボタン＝「<」のボタン作成。 今月ボタン＝「今月」のボタン作成。 翌月ボタン＝「>」のボタン作成。 翌年ボタン＝「≫」のボタン作成。 ＃---イベント----- 今月ボタンをクリックした時には 対象日＝今日。 対象日のカレンダー作成。 ここまで。 前月ボタンをクリックした時には 対象日に「-0/1/0」を日付加算して、年チェック。 もし、それがいいえでなければ、対象日はそれ。 対象日のカレンダー作成。 ここまで。 翌月ボタンをクリックした時には 対象日に「+0/1/0」を日付加算して、年チェック。 もし、それがいいえでなければ、対象日はそれ。 対象日のカレンダー作成。 ここまで。 前年ボタンをクリックした時には 対象日に「-1/0/0」を日付加算して、年チェック。 もし、それがいいえでなければ、対象日はそれ。 対象日のカレンダー作成。 ここまで。 翌年ボタンをクリックした時には 対象日に「+1/0/0」を日付加算して、年チェック。 もし、それがいいえでなければ、対象日はそれ。 対象日のカレンダー作成。 ここまで。 年セレクトの「onchange」に「年月変更」をDOMイベント設定。 月セレクトの「onchange」に「年月変更」をDOMイベント設定。 ●年月変更 対象年＝年セレクト["value"]。 対象月＝月セレクト["value"]。 対象日＝「{対象年}/{対象月}/1」 対象日のカレンダー作成。 ここまで。 ●(対象日の)年チェック 対象日を「/」で区切る。対象年＝それ[0]。 もし、対象年が2005から2050の範囲内ならば、対象日で戻る。 いいえで戻る。 ここまで。 ＃---カレンダー作成----- 対象日のカレンダー作成。 ●(対象日の)カレンダー作成 ＃＃年月 対象日を「/」で区切る。 対象年＝それ[0]。対象月＝それ[1]を整数変換。 年セレクト["value"]＝対象年。 月セレクト["value"]＝対象月。 対象日を和暦変換。それを「年」で区切る。和暦年＝それ[0]。# v3.2.31で和暦変換の返値が変更。 「#年月」に「{和暦年}年{対象月}月」をテキスト設定。 月初日＝「{対象年}/{対象月}/1」。# v3.2.34でローカルスコープが壊れる問題が修正された。 開始位置＝月初日の曜日番号取得。 開始日＝月初日に「-0/0/{開始位置}」を日付加算。 開始日＝開始日の『/』を『-』に置換。 ＃＃月齢取得 URL＝月齢取得API&「time={開始日}T12:00&lat={緯度}&lon={経度}&loop=42&interval=1440」。 URLへGET送信した時には J＝対象をJSONデコード。 ＃＃暦データ 暦データ＝空配列。C=0。 ６回 ７回 日数＝C-開始位置。 # 月初日からの日数。 正負記号＝「+」。 もし、(日数の符号)＝「-1」ならば、正負記号は「-」。 日数＝日数の絶対値。 # v3.2.31以降必要。 日付＝月初日に「{正負記号}0/0/{日数}」を日付加算。 暦データ[C]は空辞書。 暦データ[C]["日付"]＝日付。 日付＝日付を『/』で区切る。 暦データ[C]["年"]＝日付[0]。 暦データ[C]["月"]＝日付[1]を整数変換。 暦データ[C]["日"]＝日付[2]を整数変換。 暦データ[C]["月齢"]＝J["result"][C]["age"]を１で小数点四捨五入。 C=C+1。 ここまで。 月初日に「{正負記号}0/0/{日数+1}」を日付加算。 それを『/』で区切る。月＝それ[1]。 もし、月＝対象月でなければ、抜ける。 ここまで。 ＃＃日付欄作成 日＝空。 暦データを反復 C=対象キー。 もし、対象キー%7＝0ならば、日＝日に「<tr>」を追加。 日＝日に「<td id="日付_{C}"> <div id="日_{C}">{対象["日"]}</div> <canvas id="月描画_{C}" width="30" height="30"></canvas> <div id="月齢_{C}">{対象["月齢"]}</div> </td>」を追加。 もし、対象キー%7＝6ならば、日＝日に「</tr>」を追加。 ここまで。 「#日付」に日をHTML設定。 ＃＃CSS 「table」に{ "border-collapse": "collapse"; }をDOMスタイル一括設定。 「td」に{ "行揃え": "中央", "ボーダー": "2px ridge {灰色}", "幅": "50px", "高さ": "50px", "余白": "2px", "背景色": "#000911", "font-family": "sans-serif"; }をDOMスタイル一括設定。 「#曜日 th」に{ "行揃え": "中央", "ボーダー": "2px ridge {灰色}", "背景色": "#000911", "高さ": "20px", "font-family": "sans-serif"; }をDOMスタイル一括設定。 ＃＃個別装飾 暦データを反復 C=対象キー。 「#日付_{C}」の「行揃え」に「中央」をDOMスタイル設定。 もし、対象["月"]＝対象月ならば、 「#日付_{C}」の「色」に色指定["日付"][対象キー%7]をDOMスタイル設定。 「#月齢_{C}」の「色」に色指定["月齢"][0]をDOMスタイル設定。 月色は色指定["月"][0]。影色は色指定["月"][2] 違えば、 「#日付_{C}」の「色」に色指定["日付"][7]をDOMスタイル設定。 「#月齢_{C}」の「色」に色指定["月齢"][1]をDOMスタイル設定。 月色は色指定["月"][1]。影色は色指定["月"][3] ここまで。 もし、対象["日付"]＝今日ならば、「#日付_{C}」の「ボーダー」に「2px solid {赤色}」をDOMスタイル設定。 「#日付_{C}」の「文字サイズ」に「16px」をDOMスタイル設定。 「#月齢_{C}」の「文字サイズ」に「11.5px」をDOMスタイル設定。 「#月描画_{C}」へ描画開始。 [15,15]へ15で対象["月齢"]の月描画。 ここまで。 ここまで。 ここまで。