Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/04 (月)

バイオリズム完成(なでしこ3~0.1.5)

| 11:11 | バイオリズム完成(なでしこ3~0.1.5) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - バイオリズム完成(なでしこ3~0.1.5) - 雪乃☆雫のなでしこ日和 バイオリズム完成(なでしこ3~0.1.5) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 とゆうわけで、イベントが使えるようになりましたので、なでしこ1で作ったのと同様に、ボタンで、前月や翌月の表示を行えるようにできました☆

 そうそう、この一月ずつ移動するような計算の時、日付加算が便利だったんですよ~。

 は、うぇいくさまに作って頂いた、日付時計算プラグインを入れてみています。

 ちゃんと動きました。素晴らしい!

日数差が自前の関数のままなのは、日付が「2017/09/04」を「2017/9/4」と入った時エラーとなってしまうので、ゼロ埋めして避するように直すのがめんどーだったからw)

 ついでに、ローカルストレージに、デフォルトの生年月日を覚えさせたり消したりするボタンもつけて、完成♪\(^▽^)/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>バイオリズム0.1.5</title>
    <style type="text/css">
        <!--
        body {background-color: #FFEEEE;}
        div.biorhythm {width: 640px; margin:auto;}
        
        /*画面幅が767px以下*/
        @media (max-width: 767px) {
          div.biorhythm {width: 100%;}
          canvas#cv {width: 100%;}
          h1 {font-size: 150%;}
        }
        -->
    </style>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
    <!-- うぇいくさまの日付時計算プラグイン -->
    <script src="http://weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
#--------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------
「canvas#cv」のDOM要素取得。それへ描画開始。
白色線色設定。白色塗り色設定。
[0,0,640,480]へ四角描画。

#宣言
当日=今日。当日=当日の2だけ文字右部分。 #「今日」は直接文字列として扱えない表示年=今年表示月=今月表示年月=「{表示年}年{表示月}月」
基準日=「{表示年}/{表示月}/01」
月末=31。

#文字描画
「12px MS ゴシック」に描画フォント設定。
文字高さ=14。黒色塗り色設定。
高調期=「高調期」を文字列分解。要注意=「要注意」を文字列分解。低調期=「低調期」を文字列分解。
3
 C=回数-1。
 [2,40-4+文字高さ*回数]へ高調期@Cを文字描画。
 [2,5*40+16+文字高さ*回数]へ要注意@Cを文字描画。
 [2,10*40-4+文字高さ*回数]へ低調期@Cを文字描画ここまで。
「bold 16px MS ゴシック」に描画フォント設定。
青色塗り色設定。[40,30]へ「■身体」を文字描画赤色塗り色設定。[40+70,30]へ「■感情」を文字描画緑色塗り色設定。[40+70*2,30]へ「■知性」を文字描画。
枠描画。

#イベント設定
「#zen」の「onclick」に「前月表示」をDOMイベント設定。
「#kon」の「onclick」に「今月表示」をDOMイベント設定。
「#yoku」の「onclick」に「翌月表示」をDOMイベント設定。
「#hyoji」の「onclick」に「生年月日入力」をDOMイベント設定。
「#toroku」の「onclick」に「生年月日登録」をDOMイベント設定。
「#del」の「onclick」に「生年月日削除」をDOMイベント設定。

#ローカルストレージ
生年月日=「生年月日」をローカルストレージ読むもし、生年月日=undefinedならば、
  「#title」に「誕生日を入力し、『表示ボタンを押して下さい」をDOMテキスト設定。
違えば、
  「#birthday」に生年月日をDOMテキスト設定。
  バイオリズム表示ここまで。
#-----------------------------------------------------------
●前月表示
  基準日=基準日に「-0/1/0」を日付加算。
  バイオリズム表示ここまで。

●今月表示
  表示年=今年表示月=今月。
  基準日=「{表示年}/{表示月}/01」
  バイオリズム表示ここまで。

●翌月表示
  基準日=基準日に「+0/1/0」を日付加算。
  バイオリズム表示ここまで。

●生年月日入力
  生年月日=「#birthday」のDOMテキスト取得。
  表示年=今年表示月=今月。
  基準日=「{表示年}/{表示月}/01」
  バイオリズム表示ここまで。

●生年月日登録
  生年月日=「#birthday」のDOMテキスト取得。
  「生年月日」に生年月日をローカルストレージ保存。
  「{生年月日}に設定しました」と言う。
  今月表示ここまで。

●生年月日削除
  「生年月日」をローカルストレージキー削除。
  「#birthday」にDOMテキスト設定。
  「#title」に「誕生日を入力し、『表示ボタンを押して下さい」をDOMテキスト設定。
  「削除しました」と言う。
  枠描画。
ここまで。
#-----------------------------------------------------------
●枠描画
 白色線色設定。白色塗り色設定。
 [20,40,620,440]へ四角描画。

 黄色線色設定。黄色塗り色設定。
 [20,(5*40+20),600,40]へ四角描画。

 31
  もし、(回数=1)と(回数=31)のORならば、
    黒色線色設定。3に太設定。
  違えば、
    線色RGB(204,204,204)。線色線色設定。1に太設定。
  ここまで。
  [((回数-1)*20+20),40]から[((回数-1)*20+20),440]へ描画。
 ここまで。

 11
  もし、(回数=1)と(回数=11)のORならば、
    黒色線色設定。3に太設定。
  違えばもし、(回数=6)ならば、
    黒色線色設定。1に太設定。
  違えば、
    線色RGB(204,204,204)。線色線色設定。1に太設定。
  ここまで。
  [20,((回数-1)*40+40)]から[620,((回数-1)*40+40)]へ描画。
 ここまで。

 黒色塗り色設定。「14px MS ゴシック」に描画フォント設定。
 (月末)
  [((回数-1)*20+15),460]へ回数文字描画。
 ここまで。
ここまで。

●バイオリズム表示
  一時=生年月日を「/」で区切る。
  生年=一時@0。生月=一時@1。生日=一時@2。
  誕生日=「{生年}年{生月}月{生日}日」。

  一時=基準日を「/」で区切る。
  表示年=一時@0。表示月=一時@1。
  表示年月=「{表示年}年{表示月}月」

  もし表示年%4=0でなければ、閏年=いいえ。
  違えばもし表示年%100=0でなければ、閏年=はい。
  違えばもし表示年%400=0でなければ、閏年=いいえ。
  違えば、閏年=はい。

  月末=31。
  もし表示月=2ならば、
    もし、閏年=はいならば、月末=29。
    違えば、月末=28。
  違えばもし、(表示月=4)と(表示月=6)のORならば、
    月末=30。
  違えばもし、(表示月=9)と(表示月=11)のORならば、
    月末=30。
  ここまで。

  「#title」に「{誕生日} 生まれの方の {表示年月} のバイオリズム」をDOMテキスト設定。
  枠描画。バイオリズム描画。
ここまで。

●バイオリズム描画
 3に太設定。
 31
  日付=「{表示年}/{表示月}/{回数}」
  結果=生年月日と日付でバイオリズム計算。
  身体2=(結果@0)*2。
  感情2=(結果@1)*2。
  知性2=(結果@2)*2。
  もし回数>1ならば、
    青色線色設定。[(20*(回数-1)),((-身体1)+240)]から[(20*回数),((-身体2)+240)]へ描画。
    赤色線色設定。[(20*(回数-1)),((-感情1)+240)]から[(20*回数),((-感情2)+240)]へ描画。
    緑色線色設定。[(20*(回数-1)),((-知性1)+240)]から[(20*回数),((-知性2)+240)]へ描画。
  ここまで。
  もし、(表示年=今年ならば、
   もし、(表示月=今月ならば、
    もし、(回数=当日)ならば、
     青色線色設定。青色塗り色設定。[(20*回数),((-身体2)+240)]へ5の描画。
     赤色線色設定。赤色塗り色設定。[(20*回数),((-感情2)+240)]へ5の描画。
     緑色線色設定。緑色塗り色設定。[(20*回数),((-知性2)+240)]へ5の描画。
    ここまで。
   ここまで。
  ここまで。
  身体1=身体2。
  感情1=感情2。
  知性1=知性2。
 ここまで。
ここまで。
#-----------------------------------------------------------
●バイオリズム計算(AとBで)
  日数=AとBの日数差。
  結果=配列。  #新しい配列代入する時は「配列」で初期化が必要。
  結果@0=SIN(日数/23*PI*2)*100。
  結果@1=SIN(日数/28*PI*2)*100。
  結果@2=SIN(日数/33*PI*2)*100。
  結果で戻るここまで。
#-----------------------------------------------------------
●日数差(AとBの|AからBまでの)
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(24*60*60)。
  もし、結果>0ならば、結果を切捨で戻る。
  違えば、結果を切り上げ戻るここまで。

●今月
  今日の6から2をMID戻る。 #「文字抜き出し」が出来ないのでMIDを使う。
ここまで
#-----------------------------------------------------------
    </script>

    <H1>なでしこ3でバイオリズム表示</H1>
    <HR>
    <div class="biorhythm">
    <P><div style="font-weight: bold; text-align: center;">
        <label>生年月日(yyyy/mm/dd):<input id="birthday" type="text" maxlength="10" size="10"></label>  
        <button id="hyoji"> 表示 </button>
        <button id="toroku"> 登録 </button>
        <button id="del"> 削除 </button>
    </div></P>
    <BR>
    <div id="title" style="font-size:large; font-weight: bold; text-align: center;"></div>

      <div style="text-align: right;">
        <button id="zen"> 前月 </button>
        <button id="kon"> 今月 </button>
        <button id="yoku"> 翌月 </button><BR>
      </div>
        <canvas id="cv" width=640 height=480></canvas>
    </div>
    <HR>
  </body>
</html>

http://www.geocities.jp/snowdrops890/wnako3_test/Biorhythm0_1_5.html

 たぶん、違いなく動いてると思うんだけど・・・

 うまく表示しなかった場合は、リロードしてみて下さい;



 あと、なでしこのことじゃないけど、スマホで見た時に、ちっちゃこく縮小されないようにする呪文を覚えたので、やってみました!

 「meta」要素で「viewport」とやらを指定すればいいラシイ。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

 コレは呪文なので、意味はよく知りません(えっ;)

 いや・・見たんだけど、あまり理解しませんでした;;;

 「user-scalable」は「no」にすると、ユーザーによる拡大縮小ができないようになるそうです。

 して、スタイルシートにスマホの場合の設定をします。

<style type="text/css">
    <!--
    body {background-color: #FFEEEE;}
    div.biorhythm {width: 640px; margin:auto;}
    
    /*画面幅が767px以下*/
    @media (max-width: 767px) {
      div.biorhythm {width: 100%;}
      canvas#cv {width: 100%;}
      h1 {font-size: 150%;}
    }
    -->
</style>

 画面幅が767px以下とゆうのは、タブレットを縦持ちしたときの幅が、だいたい768px以上となっているので、それ未満はスマホってことでいいんじゃね? という数値のようです。といっても、どうせ自分のスマホからしか確認出来ませんが;

 とりあえず、「width」的な値を、決め打ちではなく解像度に合わせて可変となるよう、%で指定すればいいようです。

 できました♪

 いちおう、縮小したのを拡大したり、はみ出たのを縮小したりすることなく見れるようになりました(≧▽≦)

 コレで気分良く、スマホからもバイオリズムがチェックできます。(なんか、もっと良いアプリがあるだろとか言わないで;)

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170904