なでしこ３で和時計アプリ作ったよ！

　アドベントカレンダーも、ついに最後の１日となりました。

# こんなの作った！
　トリを飾るのに相応しいかってゆーとビミョーですが、18日目で扇形を描画し、中を塗りつぶすプラグインを作りました。それでやりたかったことが、なんとか間に合って、まあまあうまく出来たような気がするので、ここに発表したいと思います！

> [和時計（不定時法時計）](https://snowdrops89.github.io/wadokei/)

　ドシロウトでも頑張れば、なでしこ３でこのくらいは出来るよ！　とゆう事例……いやさ、単に結構頑張ったので誰かに見せたいｗｗｗ

# 和時計とは
　江戸時代の季節によって昼夜で一刻の長さが変わる、不定時法という時刻法に則して作られた時計です。昼と夜とで針の進む早さを変えるものと、目盛の間隔を変えるものがありますが、目盛が変わる式です。
　このプログラムを作ったそもそもは、江戸の時刻法では、明け六つ暮れ六つは日の出日の入りではないので、春分秋分に昼夜の長さは同じにならないし、明け六つ暮れ六つが午前午後の６時と一致したりはしない、ということを言葉だけではなかなか説明しきれないので、目に見える形にしたかったのでした。

　肝心の、時計部分を作ったのは大分前。なでしこ３の機能が充実し始めた頃だと思います。
　プログラムをだうんろーどしていんすとーるとかよくわからん……とゆう人達にも、スマホの画面で見せてやる事が出来るのです！
　さいんこさいんの呪文を覚えて目を回したり、なでしこ１にはあった二十四節気取得の命令がｖ３には無くて、一生懸命調べたりしましたが、もう忘れたよね～ｗ（えっ；）

### じゅもん
(0,0)を中心とした半径rの円の中心からx軸に対し角度θの直線が円周と交わる点の座標(x,y)＝(rcosθ,rsinθ)

```
(r*COS(DEG2RAD(θ)),r*SIN(DEG2RAD(θ)))
(r*COS(θをラジアン変換),r*SIN(θをラジアン変換))
```

### 二十四節気取得
　ここにはｖ１互換（タブン）の二十四節気取得を貼っておく。（実際のプログラム中では変えています）
　日付を与えて、二十四節気に該当していたらそれを、違えば空を返します。

```
●(日付の)二十四節気取得
　　節気＝["小寒","大寒","立春","雨水","啓蟄","春分","清明","穀雨","立夏","小満","芒種","夏至","小暑","大暑","立秋","処暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
　　データ＝[{"Ｄ":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}]
　　日付を「/」で区切る。
　　年＝それ[0]。月＝それ[1]。日＝それ[2]を整数変換。
　　日付＝「{年}/{月}/{日}」
　　もし、月<３ならば、Ｙ＝年-1。
　　違えばＹ＝年。
　　もし、日>15ならば、数＝月*2-1。
　　違えば、数＝月*2-2。
　　Ｄ＝データ[数]["Ｄ"]。Ａ＝データ[数]["Ａ"]。
　　日＝INT(Ｄ+(Ａ*(Ｙ-1900))-INT((Ｙ-1900)/4))
　　もし、「{年}/{月}/{日}」＝日付ならば、節気[数]で戻る。
　　違えば、空で戻る。
ここまで。
```

　二十四節気の計算式とデータはここから頂いてきました。

> [二十四節気の略算式](http://addinbox.sakura.ne.jp/sekki24_topic.htm)

# 扇形を描く（塗る）プラグインでやりたかったこと
　お分かりでしょうが、昼夜を色分けしたかったんです☆
　そんだけ！
　色は当初から付けたかったんだけど、今回、時計の昼夜を反転させたりできるようにしたことで、ますますどっちがどっちだかという感じになったので。

> [続々・なでしこ３のプラグインを作ってみたよ！　～扇形が描きたい！～](https://qiita.com/snowdrops89/items/14865d4c1274d53c9756)

# れすぽんしぶ的な（？）
　よく分かりませんが、主にスマホとかで見た時に、アプリっぽく見えるように頑張りました。
　今回一番なんだかんだしていたのはそこだけど、CSS的なことが多くて、あんまなでしこのコトじゃないし、人に教えられるほど賢くなってない～。
　というわけで、発表したはいいけれど、語れる事は特にないんですよねー（汗）
　とりあえず、アクセスした端末の種類や、ウィンドウのサイズを取得するやつは、4日目にプラグインにしてやりました。

> [続・なでしこ３のプラグインを作ってみたよ！　～今度は関数だ！～](https://qiita.com/snowdrops89/items/26d34d27fcf1a2cc5608)

　コレを使ってサイズを変えたり、なんやかやしています。

# ハンバーガーメニュー
　メニュー、まあまあそれっぽく出来た♪

> [なでしこ３とCSSで右側ハンバーガーメニューを作成する](https://qiita.com/snowdrops89/items/69a55b6f95d2c53353d9)

　左側ですけれどねｗ
　ぽくするのはもう、全部CSSですよね。

# ＰＷＡアプリにしてみた！
　これは、いちおう出来たんだけど、本当にうまく出来ているかは、ちょっとびみょー。　あと、自分のスマホでしかお試ししていません。iPhoneない～。
　一応、この辺りを参考にしています。

> [PWA をインストール可能にするには](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Installable_PWAs)
> [サービスワーカーで PWA をオフラインで動作させる](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Offline_Service_workers)


> [インストールが可能になるための最低限のウェブサイト(PWA)を作る](https://laboradian.com/create-installable-pwa-website/)
> [Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法](https://laboradian.com/create-offline-site-using-sw/)

　でもでも、Android＋GoogleChromeの場合、「ホーム画面に追加」ってポップアップが上がってですねー、追加するとホーム画面にアイコンが表示されるのみならず、アプリドロワーに入っちゃうんですよ！
　ぽい～♪　かっこええ～❤

# おわります
　なんとか間に合った！
　最後、なんだかてきとーに端折った記事でスミマセンでした＞＜
　記事に出来るほどの知識はありませんでした～。
　でも、ま、とりあえず私がご満悦ということで☆
　何かおかしな点があれば、お教え願います。

　さてさて、お祭り気分の勢いでうっかり作ったはいいけど、アドベントカレンダー全く埋まらなかったらどうしましょう(((;ﾟдﾟ)))と思ってましたが、なんと！　こうして全部埋める事ができました～＼（＾▽＾）／
　参加して下さったみなさん、読んで下さったみなさん、本当にありがとうございました！！