月齢カレンダー

アドベントカレンダー２１日目。月ごとのカレンダーにお月様と月齢を表示します。カレンダーはAPIで月齢が取得出来る2005年～2050年の間。このプログラム自体はCC0で公開していますがAPIはご本家HPを一読し規約に沿って利用して下さい。 https://mgpn.org/api/moon/

文法命令一覧

エディタ

プログラム

!『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で対象["月齢"]の月描画。
        ここまで。
    ここまで。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ