アドベントカレンダーも、ついに最後の1日となりました。
こんなの作った!
トリを飾るのに相応しいかってゆーとビミョーですが、18日目で扇形を描画し、中を塗りつぶすプラグインを作りました。それでやりたかったことが、なんとか間に合って、まあまあうまく出来たような気がするので、ここに発表したいと思います!
ドシロウトでも頑張れば、なでしこ3でこのくらいは出来るよ! とゆう事例……いやさ、単に結構頑張ったので誰かに見せたいwww
和時計とは
江戸時代の季節によって昼夜で一刻の長さが変わる、不定時法という時刻法に則して作られた時計です。昼と夜とで針の進む早さを変えるものと、目盛の間隔を変えるものがありますが、目盛が変わる式です。
このプログラムを作ったそもそもは、江戸の時刻法では、明け六つ暮れ六つは日の出日の入りではないので、春分秋分に昼夜の長さは同じにならないし、明け六つ暮れ六つが午前午後の6時と一致したりはしない、ということを言葉だけではなかなか説明しきれないので、目に見える形にしたかったのでした。
肝心の、時計部分を作ったのは大分前。なでしこ3の機能が充実し始めた頃だと思います。
プログラムをだうんろーどしていんすとーるとかよくわからん……とゆう人達にも、スマホの画面で見せてやる事が出来るのです!
さいんこさいんの呪文を覚えて目を回したり、なでしこ1にはあった二十四節気取得の命令がv3には無くて、一生懸命調べたりしましたが、もう忘れたよね~w(えっ;)
じゅもん
(0,0)を中心とした半径rの円の中心からx軸に対し角度θの直線が円周と交わる点の座標(x,y)=(rcosθ,rsinθ)
(r*COS(DEG2RAD(θ)),r*SIN(DEG2RAD(θ)))
(r*COS(θをラジアン変換),r*SIN(θをラジアン変換))
二十四節気取得
ここにはv1互換(タブン)の二十四節気取得を貼っておく。(実際のプログラム中では変えています)
日付を与えて、二十四節気に該当していたらそれを、違えば空を返します。
●(日付の)二十四節気取得
節気=["小寒","大寒","立春","雨水","啓蟄","春分","清明","穀雨","立夏","小満","芒種","夏至","小暑","大暑","立秋","処暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
データ=[{"D":6.3811,"A":0.242778},{"D":21.1046,"A":0.242765},{"D":4.8693,"A":0.242713},{"D":19.7062,"A":0.242627},{"D":6.3968,"A":0.242512},{"D":21.4471,"A":0.242377},{"D":5.6280,"A":0.242231},{"D":20.9375,"A":0.242083},{"D":6.3771,"A":0.241945},{"D":21.9300,"A":0.241825},{"D":6.5733,"A":0.241731},{"D":22.2747,"A":0.241669},{"D":8.0091,"A":0.241642},{"D":23.7317,"A":0.241654},{"D":8.4102,"A":0.241703},{"D":24.0125,"A":0.241786},{"D":8.5186,"A":0.241898},{"D":23.8896,"A":0.242032},{"D":9.1414,"A":0.242179},{"D":24.2487,"A":0.242328},{"D":8.2396,"A":0.242469},{"D":23.1189,"A":0.242592},{"D":7.9152,"A":0.242689},{"D":22.6587,"A":0.242752}]
日付を「/」で区切る。
年=それ[0]。月=それ[1]。日=それ[2]を整数変換。
日付=「{年}/{月}/{日}」
もし、月<3ならば、Y=年-1。
違えばY=年。
もし、日>15ならば、数=月*2-1。
違えば、数=月*2-2。
D=データ[数]["D"]。A=データ[数]["A"]。
日=INT(D+(A*(Y-1900))-INT((Y-1900)/4))
もし、「{年}/{月}/{日}」=日付ならば、節気[数]で戻る。
違えば、空で戻る。
ここまで。
二十四節気の計算式とデータはここから頂いてきました。
扇形を描く(塗る)プラグインでやりたかったこと
お分かりでしょうが、昼夜を色分けしたかったんです☆
そんだけ!
色は当初から付けたかったんだけど、今回、時計の昼夜を反転させたりできるようにしたことで、ますますどっちがどっちだかという感じになったので。
れすぽんしぶ的な(?)
よく分かりませんが、主にスマホとかで見た時に、アプリっぽく見えるように頑張りました。
今回一番なんだかんだしていたのはそこだけど、CSS的なことが多くて、あんまなでしこのコトじゃないし、人に教えられるほど賢くなってない~。
というわけで、発表したはいいけれど、語れる事は特にないんですよねー(汗)
とりあえず、アクセスした端末の種類や、ウィンドウのサイズを取得するやつは、4日目にプラグインにしてやりました。
コレを使ってサイズを変えたり、なんやかやしています。
ハンバーガーメニュー
メニュー、まあまあそれっぽく出来た♪
左側ですけれどねw
ぽくするのはもう、全部CSSですよね。
PWAアプリにしてみた!
これは、いちおう出来たんだけど、本当にうまく出来ているかは、ちょっとびみょー。 あと、自分のスマホでしかお試ししていません。iPhoneない~。
一応、この辺りを参考にしています。
インストールが可能になるための最低限のウェブサイト(PWA)を作る
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法
でもでも、Android+GoogleChromeの場合、「ホーム画面に追加」ってポップアップが上がってですねー、追加するとホーム画面にアイコンが表示されるのみならず、アプリドロワーに入っちゃうんですよ!
ぽい~♪ かっこええ~❤
おわります
なんとか間に合った!
最後、なんだかてきとーに端折った記事でスミマセンでした><
記事に出来るほどの知識はありませんでした~。
でも、ま、とりあえず私がご満悦ということで☆
何かおかしな点があれば、お教え願います。
さてさて、お祭り気分の勢いでうっかり作ったはいいけど、アドベントカレンダー全く埋まらなかったらどうしましょう(((;゚д゚)))と思ってましたが、なんと! こうして全部埋める事ができました~\(^▽^)/
参加して下さったみなさん、読んで下さったみなさん、本当にありがとうございました!!