LoginSignup
3

More than 1 year has passed since last update.

 アドベントカレンダーも、ついに最後の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))
  もし、「{年}/{月}/{日}」=日付ならば、節気[数]で戻る。
  違えば、空で戻る。
ここまで。

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

二十四節気の略算式

扇形を描く(塗る)プラグインでやりたかったこと

 お分かりでしょうが、昼夜を色分けしたかったんです☆
 そんだけ!
 色は当初から付けたかったんだけど、今回、時計の昼夜を反転させたりできるようにしたことで、ますますどっちがどっちだかという感じになったので。

続々・なでしこ3のプラグインを作ってみたよ! ~扇形が描きたい!~

れすぽんしぶ的な(?)

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

続・なでしこ3のプラグインを作ってみたよ! ~今度は関数だ!~

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

ハンバーガーメニュー

 メニュー、まあまあそれっぽく出来た♪

なでしこ3とCSSで右側ハンバーガーメニューを作成する

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

PWAアプリにしてみた!

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

PWA をインストール可能にするには
サービスワーカーで PWA をオフラインで動作させる

インストールが可能になるための最低限のウェブサイト(PWA)を作る
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

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

おわります

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3