Help us understand the problem. What is going on with this article?

なでしこ3で和時計アプリ作ったよ!

 アドベントカレンダーも、ついに最後の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の場合、「ホーム画面に追加」ってポップアップが上がってですねー、追加するとホーム画面にアイコンが表示されるのみならず、アプリドロワーに入っちゃうんですよ!
 ぽい~♪ かっこええ~❤

おわります

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

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

snowdrops89
こんぴゅぅたぁのこともぷろぐらむのこともよく分からないけど、日本語プログラミング言語「なでしこ」のおかげでプログラムが出来るようになって、毎日が楽しいドシロウト。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away