Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/21 (木)

15パズル完成☆ (なでしこ3 ver.0.1.5)

| 10:04 | 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 15パズル完成☆ (なでしこ3 ver.0.1.5) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 さて、んなわけでタイマーが使えるようになったので、タイムトライアル機能をつけまして、ローカルストレージに成績表の記録をして、表示できるようにした♪


 ・・・と、あっさり書きましたが、逆順での繰り返しが出来ないと知るまで、だいぶはまりました(ToT)

 なんで、できないんだろう・・・

 反復より繰り返すが圧倒的に便利な場面って、逆にカウントしたい時だとおもってたんだけど・・・

#-------------------------------------
Nを5から1まで繰り返す
  Nを表示ここまで。
#-------------------------------------

 エラーも出ませんが、何も表示されません~。

 1から5ならもちろん問題は無く・・・ってか、公式ページのサンプルのとうりなので;

https://nadesi.com/doc3/index.php?%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 まあ、出来ないと分かれば、最大値から回数を引いていけばOKなんですが~;


 それから、ついでに調子に乗って、効果音を鳴らす機能をつけましたw

 効果音を作るのに無駄に時を使ったケド、やっぱしょぼいな~;;;

 とゆうわけで、チェックボックスでオフオンできるようにwww

 ・・・など、これまで学んだことを色々盛り込んで、取りあえずこんな感じ。

<script type="なでしこ">
#---宣言------
駒=配列。
駒サイズ=100。
駒色=["#AAAAFF","#FFAAAA","#FFDDAA","#AAFFAA","#DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。
手数=0。経過=0。分=0。秒=0。
手数順位=0。タイム順位=0。
成績=配列表示順位数=3。
効果音フラグ=オン。
クリック音=「http://www.geocities.jp/snowdrops890/audio/click_116_6G.mp3」
エラー音=「http://www.geocities.jp/snowdrops890/audio/Bu_71_3C.mp3」
完成音=「http://www.geocities.jp/snowdrops890/audio/Fanfare_53.mp3」
ハイスコア音=「http://www.geocities.jp/snowdrops890/audio/Congratulation_53.mp3」

#---canvasとマウス押下関数の設置------
マウス押下関数。
キャンバスHTML。
数を0から15まで繰り返す。
  マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行}  {数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。
  もし回数%4=0ならば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>{改行}<BR>」を一行追加。
  違えば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>」を一行追加。
  ここまで。
ここまで。
マウス押下関数ナデシコする。
「#game」にキャンバスHTMLをDOM_HTML設定

#---イベント設定------
数を0から15まで繰り返す。
  「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。
「#newgame」の「onclick」に「新規ゲーム」をDOMイベント設定。
「#seiseki」の「onclick」に「成績表表示」をDOMイベント設定。
「#reset」の「onclick」に「成績リセット」をDOMイベント設定。
「#se」の「onchange」に「効果音オフオン」をDOMイベント設定。

#---データ読み込み------
成績=「15パズル成績表」をローカルストレージ読むもし、(成績=undefined)または(成績=ならば、成績初期化。

#---メイン------
「タイムトライアル」を1秒毎。
新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  手数=0。「#tekazu」に手数をDOMテキスト設定。
  経過=0。「#time」に「00:00」をDOMテキスト設定。
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  効果音フラグは効果音フラグ*-1。
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。
  効果音フラグは効果音フラグ*-1。
ここまで。

●駒描画
  #---画面描画------
  数を0から15まで繰り返す。
    「canvas#cv{数}」のDOM要素取得。それへ描画開始。
    もし、駒[数]<15ならば、色=駒色[駒[数]/4を切捨]
    違えば、色=駒色[4]
    色へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    「bold 48px MS ゴシック」に描画フォント設定。
    もし、駒[数]<9ならば、x=37。
    違えば、x=22。
    y=70。            #文字描画のyは、文字の下部なのか?
    もし、駒[数]<15ならば、
      黒色塗り色設定。[x,y]へ駒[数]+1の文字描画。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----駒入れ替え--------------------------------------------------------
●駒入替(方向で)
  もし、(方向=0)かつ(アキ/4≧1)ならば、
    駒のアキとアキ-4を配列入替。
    アキ=アキ-4。
  違えばもし、(方向=1)かつ(アキ/4<3)ならば、
    駒のアキとアキ+4を配列入替。
    アキ=アキ+4。
  違えばもし、(方向=2)かつ(アキ%4>0)ならば、
    駒のアキとアキ-1を配列入替。
    アキ=アキ-1。
  違えばもし、(方向が=3)かつ(アキ%4<3)ならば、
    駒のアキとアキ+1を配列入替。    #右の駒と入れ替え
    アキ=アキ+1。
  違えば、
    もし、効果音フラグ=オンならば、「#se」に「<audio src="{エラー音}" autoplay></audio>」をDOM_HTML設定。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  もし、効果音フラグ=オンならば、「#se」に「<audio src="{クリック音}" autoplay></audio>」をDOM_HTML設定。
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、手数=0ならば、
    新規ゲーム待ち=オフ。
  ここまで。
  もし、(新規ゲーム待ち=オフ)かつ(駒[No]<15)ならば、
    もし、No+4=アキならば、
      0で駒入替。駒描画。完成判定。
    違えばもし、No-4=アキならば、
      1で駒入替。駒描画。完成判定。
    違えばもし、No+1=アキならば、
      2で駒入替。駒描画。完成判定。
    違えばもし、No-1=アキならば、
      3で駒入替。駒描画。完成判定。
    違えば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{エラー音}" autoplay></audio>」をDOM_HTML設定。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
  手数=手数+1。「#tekazu」に手数をDOMテキスト設定。

  完成=0。
  数を0から15まで繰り返す。
    もし、駒[数]が数ならば、完成は完成+1。
  ここまで。
  もし、完成=16ならば、
    「canvas#cv15」のDOM要素取得。それへ描画開始。
    色=駒色[3]。色へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    x=25。y=68。黒色塗り色設定。[x,y]へ「★」の文字描画。
    新規ゲーム待ち=オン。
    成績表記録。

    #表示させる文字の設定
    もし、手数順位=0ならば、
      手数成績=「{改行} 手数{手数}手です」
    違えば、
      手数成績=「{改行} 手数{手数}手は{改行}   歴代{手数順位}位の成績です」
    ここまで。

    もし、タイム順位=0ならば、
      タイム成績=「{改行} タイム{分}分{秒}秒です」
    違えば、
      タイム順位=タイム順位-表示順位数
      タイム成績=「{改行} タイム{分}分{秒}秒は{改行}   歴代{タイム順位}位の成績です」
    ここまで。

    #表示させる
    もし、(手数順位=0)かつ(タイム順位=0)ならば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{完成音}" autoplay></audio>」をDOM_HTML設定。
      「おめでとう。完成です!{改行}{手数成績}{タイム成績}」と言う。
    違えばもし、(手数順位=1)または(タイム順位=1)ならば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{ハイスコア音}" autoplay></audio>」をDOM_HTML設定。
      「ハイスコアが出ました!{改行}おめでとう。新記録です!!{改行}{手数成績}{タイム成績}」と言う。
      成績表表示。
    違えば、
      もし、効果音フラグ=オンならば、「#se」に「<audio src="{ハイスコア音}" autoplay></audio>」をDOM_HTML設定。
      「ハイスコアが出ました!{改行}おめでとう。{改行}{手数成績}{タイム成績}」と言う。
      成績表表示。
    ここまで。
  「#se」に「<audio src="" autoplay></audio>」をDOM_HTML設定。    #音止める
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----タイムトライアル--------------------------------------------------
●タイムトライアル
  もし、新規ゲーム待ち=オフならば、
    経過=経過+1。
    分=経過/60を切捨。
    秒=経過%60。
    分=分を2でゼロ埋め。秒=秒を2でゼロ埋め。    #時を00:00で表示させる。
    「#time」に「{分}:{秒}」をDOMテキスト設定。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----成績表記録--------------------------------------------------------
●成績表記録
  #手数のハイスコア
  手数順位=0。
//  数を表示順位数から1まで繰り返す。   #逆順での繰り返しが出来ない?
  (表示順位数)
    数=表示順位数-(回数-1)
    もし、(成績[数-1]>手数)または(成績[数-1]=0)ならば、
      手数順位=数。
    ここまで。
  ここまで。
//  数を表示順位数から1まで繰り返す。
  (表示順位数)
    数=表示順位数-(回数-1)
    もし、手数順位=0でなければ、
      もし、手数順位=数ならば、
        成績[数-1]=手数。
      ここまで。
      もし、手数順位<数ならば、
        成績[数-1]=成績[数-2]。
      ここまで。
    ここまで。
  ここまで。

  #タイムのハイスコア
  タイム順位=0
//  数を(表示順位数*2)から(表示順位数+1)まで繰り返す。
  (表示順位数)
    数=表示順位数*2-(回数-1)
    もし、(成績[数-1]>経過)または(成績[数-1]=0)ならば、
      タイム順位=数。
    ここまで。
  ここまで。
//  数を(表示順位数*2)から(表示順位数+1)まで繰り返す。
  (表示順位数)
    数=表示順位数*2-(回数-1)
    もし、タイム順位=0でなければ、
      もし、タイム順位=数ならば、
        成績[数-1]=経過。
      ここまで。
      もし、タイム順位<数ならば、
        成績[数-1]=成績[数-2]
      ここまで。
    ここまで。
  ここまで。
  「15パズル成績表」に成績をローカルストレージ保存ここまで。
#-----------------------------------------------------------------------

#-----成績表表示--------------------------------------------------------
●成績表表示
  成績表=「★☆★成績表★☆★{改行}{改行}◎手数のハイスコア{改行}」  #どうも変数がアルファベット一文字の時、正常動作しないことがあるみたい?
  数を1から表示順位数まで繰り返す
    手=成績[数-1]
    もし、手が0ならば、
      成績表=「{成績表} {数}位  ---手{改行}」
    違えば、
      成績表=「{成績表} {数}位  {手}手{改行}」
    ここまで。
  ここまで。
  
  成績表=「{成績表}{改行}◎タイムのハイスコア{改行}」
  数を(表示順位数+1)から(表示順位数*2)まで繰り返す。
    分=成績[数-1]/60を切捨。
    秒=成績[数-1]%60。
    分=分を2でゼロ埋め。秒=秒を2でゼロ埋め。
    順位=数-表示順位数
    もし、成績[数-1]が0ならば、
      成績表=「{成績表} {順位}位  --分--秒{改行}」
    違えば、
      成績表=「{成績表} {順位}位  {分}分{秒}秒{改行}」
    ここまで。
  ここまで。
  成績表を言うここまで。
#-----------------------------------------------------------------------

#-----成績リセット--------------------------------------------------------
●成績リセット
  「リセットしてもいい?」と二択。
  もしそれはいならば、成績初期化。
ここまで。

●成績初期化
  成績=配列。
  (表示順位数*2)
    数=回数-1。
    成績[数]=0。
  ここまで。
  「15パズル成績表」にをローカルストレージ保存ここまで。
#-----------------------------------------------------------------------
●効果音オフオン
  もし、効果音フラグ=オンならば、効果音フラグ=オフ。
  違えば、効果音フラグ=オンここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
html, body		{ height: 100%; }
body			{background-color: #FFFFFF;}
div.cnt			{width: 420px; margin:auto;}
div.menu		{width: 420px; margin:auto;}
div.game		{width: 420px; margin:auto;}

/*画面幅が420px以下*/
@media (max-width: 420px) {
  body			{width:100%;}
  div.cnt		{width: 100%;}
  div.menu		{width: 100%;}
  div.game		{width: 100%;}
  canvas		{width: 23%;}
  h1			{font-size: 150%;}
}
/*画面高さが420px以下*/
@media (max-height: 420px) {
  div.game		{ height: 100%;}
  canvas		{ height:24%;}
  h1			{font-size: 150%;}
}
 -->
</style>
    <center><H1>15パズル</H1></center>
    <BR>
      <div class="cnt" style="font-weight: bold; margin-bottom: 5px">
        <label>タイムトライアル:<input id="time" type="text" maxlength="5" size="8"></label> 
        <label>手数:<input id="tekazu" type="text" maxlength="5" size="5"></label>
      </div>
      <div id="game" class="game"></div>
      <div class="menu">
        <button id="newgame">新規ゲーム</button>
        <button id="seiseki">成績表表示</button>
        <button id="reset">成績リセット</button>
        <BR>
        <label style="font-size:small;"><input type="checkbox" id="se" checked="checked">効果音を鳴らす?</label>
      </div>
      <div id="se"></div>

http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_50.html

 どうかな? だいぶ遊んだので、うまくいってると思うんだけど・・・

 やっぱりハイスコアの表示あると、俄然やる気がでるんですよwww


 好きな画像に変えるなどは、現状では難しそうな気がするため、取りあえずここまで~。

 なでしこ1と違って、座標がHTMLCSSで相対指定(?)みたいな感じだから、CSSが無いと、表示がへんちくりんなことになってしまう。

 CSSは学び始めたばっかりなんで、あんまり良い書き方じゃないもしないけど、気にしないで!

 とりあえず、自分の環境で思ったような表示になることだけ優先しましたΣ(゜д゜;えっ;

 スタイルシートの意味なし!(爆)

 DOMスタイル設定で出来そうな部分も多いけど、ちょこっとだとタグに直接書いちゃった方が早かったり、なでしこだと全部ID振らなきゃない(?)とか、まとめて指定出来ないっぽいことなどあって、HTMLのほうに書いちゃう方が、楽なんだよね~;

 なでしこでは、途中で変えたりするような部分だけすればいいかなあ・・・とか。

 プロパティ(?)も値もCSSのとうりだから、HTML埋め込みでやる場合には、全部なでしこで指定するメリットはあんまりないよね。出来れば、基本的なヤツだけでも、なでしこっぽく日本語で書けるようになったらいいですねぇ☆

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

2017/09/19 (火)

なでしこ3でラーメンタイマー。音も鳴らすよ!

| 07:58 | なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 なでしこ3でラーメンタイマー。音も鳴らすよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ1で作った15パズルは、手数のカウント機能とタイムトライアル機能がありました。

 手数のカウントは、すぐにもカンタンにつけれる予定なんだけど、タイマーはどうしたらいいんですかね・・・っと見ていくと、「秒毎」とゆう命令がありました!

 文字通り指定した秒毎に、指定した関数を繰り返し実行するというものです。

 マニュアルの利用例に、「」を1秒毎表示する、時計のサンプルが載っています。

https://nadesi.com/doc3/index.php?plugin_system%252F%E7%A7%92%E6%AF%8E

 ほぼ、コレだ! と思うところなのですが、しかし、コレを止める命令がないっぽい?

 なでしこ1のタイマー部品なら、「停止」が出来たんだけど・・・こっちは、一実行したら、もう永久に続けるしかない的な・・・???(´д`;

 時計と違って、完成したら、止めなくちゃ。

 でもまあ、フラグを立てて、必要の無い時にはなにもしないようにしておけば、取りあえずタイマーとして使えそう


 とゆうわけで、タイマーの実験として3分固定のカウントダウンタイマー。いわゆるラーメンタイマーを作ってみました。

 ところで、先に作った時間加算関数に、とんでもない違いが発覚Σ(゜д゜;

 なななんと、秒のところにもナゼか60を掛けてしまっていたので、秒を加算減算するような計算の場合は、結果が大変なことに・・・;;;

 既にモノスゴクこっりと直していますw

 でも、も実際に使っているのはプラグインの方。

 むむむぅ、便利~♪

#-----------------------------------------------------------------------
<!-- なでしこを使うために必要なスクリプト -->
<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="なでしこ">
#-----------------------------------------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------------------
分=3。秒=0。

終了=0。秒=秒を2でゼロ埋めタイマーオフ。
「#time」に「{分}:{秒}」をDOMテキスト設定。
スタートボタン作成。

「ラーメンタイマー」を1秒毎。

●タイマー開始
  タイマーオン。
  「#start」の「disabled」を「disabled」にDOM属性設定。  #スタートボタンを押せなくする。
  に「+0:{分}:{秒}」を時間加算して終了代入ここまで。

●ラーメンタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「ラーメンできたよ!!」と言う。
      タイマーオフ。「#time」に「{分}:{秒}」をDOMテキスト設定。
      スタートボタン作成。
    違えば、
      残分=残秒数/60を切捨。残秒=残秒数%60を2でゼロ埋め。
      「#time」に「{残分}:{残秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。

●スタートボタン作成
  「#button」に「<button id="start">スタート!</button>」をDOM_HTML設定。
  「#start」の「onclick」に「タイマー開始」をDOMイベント設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<body>
    <H1>なでしこ3てすと~ラーメンタイマー</H1>
    <HR>
    <input id="time" type="text" readonly="on" size="4" style="font-size:32px; text-align:center;">
    <span id="button"></span>
#-----------------------------------------------------------------------

 先に書いたとうり、タイマーとゆう変数オフオンをつけてラーメンタイマー関数し、オンの時だけ処理を行うようにしただけです。

 うまくいっているっぽいです。

 コレで同様にして、15パズルのタイムトライアルも作れそう


 タイマーってる時にスタートボタンを押すとリセットしてしまうので、押せないように、タイマー開始時にスタートボタンの属性を「disabled」にしてみました。

 とっところが、この「disabled」はオンオフするような性質のものではないらしく、属性「disabled」の値は「disabled」に固定・・・ってか、値なしで属性だけ書いてもOKなヤツらしいのですよ。

 一応念のため、「off」とか「false」とか「no」とかとか試したけどダメっぽい。一旦無効化したら、もう二度と有効化できないのかい???

 しようが無いので、やっつけで、もういちど<div>にスタートボタンを作り直すことに。

 上書きされて無効化した前のボタンは消えて、新しいスタートボタンが出来る感じですケド、見た目的には希望どうりです☆


 よしよし♪ ・・・と思ったのですが、ラーメンタイマー的には、タイマー終了時に音が鳴らないとかどうなんですか;

 タイマー終わるのを睨んでるくらいなら、時計見てるのといっこも変わらん;;;

 なでしこ3に音を出す的な命令は無いのですが、HTML5はなんと<audio>タグで音を鳴らすことが出来るようです!

 タイマー終了時に、このaudioを設置してやれば、音を鳴らせるんじゃないですか?!

 とゆうわけで、ボタンの下にアラーム用のdivを作り、「ラーメンできたよ!!」と言う前に、DOM_HTML設定でaudioを設置。

 「controls」属性をつけなければ、画面上には何も表示しませんが、「autoplay」属性をつけておくことで、設置と同時に鳴り始めます。

 よくある開くと同時に勝手に音が鳴り出すページは、こうゆう仕組みか?!

 アラームの停止は、やっぱりを設定することで、audioを消すコトにw

●ラーメンタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「#alarm」に「<audio src="alarm_75_8C.mp3" autoplay></audio>」をDOM_HTML設定。
      「ラーメンできたよ!!」と言う。
      「#alarm」にをDOM_HTML設定。
      タイマーオフ。「#time」に「{分}:{秒}」をDOMテキスト設定。
      スタートボタン作成。
    違えば、
      残分=残秒数/60を切捨。残秒=残秒数%60を2でゼロ埋め。
      「#time」に「{残分}:{残秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。

 そういえば、「サクラ」がバージョンアップしてたよ!

http://oto.chu.jp/top/

 ・・・といっても、素養が無いので、とうてい曲など作れないんですが、たったこんだけで、アラームっぽい音が完成w

 サクラは、ドレミで入れれんのが本当にいいよねぇ~♪

音色75 音階8 音符16 ン4【8【4 ド】【2 ッ】】

 なでしこ1ならこのまま鳴らせたんだけど・・・(なでしこで鳴らす場合は、音色は数値にしないとダメ)

 なでしこ3もストトン表記でMML演奏出来るようにならないかなぁ~w

 ともかく、MMLどころかaudioはMIDIファイルも鳴らせないっぽいので、何かでmp3とかに変換しなきゃないですねー。

 サクラでmp3保存できたらとても便利なんですが。

 でもまあ、無料で変換してくれるサイトもフリーソフトもいろいろありますからねぇ~☆


 でっ、ラーメンタイマー、音が鳴るバージョン。

http://www.geocities.jp/snowdrops890/wnako3_test/05_RamenTimer.html

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

2017/09/15 (金)

15パズル改 ~canvasと関数を動的に(?)作るよ!

| 08:31 | 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 15パズル改 ~canvasと関数を動的に(?)作るよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ひっ、ひらめきました!w

 DOMイベント設定に指定する関数には引数がつけれないっぽいとか、DOM要素作成canvasを作ると、後から(実際の)サイズは変えれないラシイとか、いろいろと散々ぼやいた末に、ほぼヤケクソでマウスクリックようの関数と<canvas>タグをそれぞれ16個並べて無理矢理感満載の15パズルを作ったわけですが・・・

 DOM_HTML設定はDOM_HTML設定で、上書きで前のが消えてしまうから出来ないと思っていたんだけど、何のことは無い、変数一行追加で作っていって、最後にまとめてDOM_HTML設定すればいいんじゃ?!

 してして、関数の方も同様にして「ナデシコする」で設置できました!

 っこー書き換え(^▽^;;

<script type="なでしこ">
#---宣言------
駒=配列。
駒サイズ=100。
駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。

#---canvasとマウス押下関数の設置------  ※ ココです★
マウス押下関数。
キャンバスHTML。
数を0から15まで繰り返す。
  マウス押下関数=マウス押下関数に「●マウス押下時{数}{改行}  {数}のマウス押下時。{改行}ここまで。{改行}{改行}」を一行追加。
  もし回数%4=0ならば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>{改行}<BR>」を一行追加。
  違えば、
      キャンバスHTML=キャンバスHTMLに「<canvas id="cv{数}" width="100" height="100"></canvas>」を一行追加。
  ここまで。
ここまで。
マウス押下関数ナデシコする。
「#game」にキャンバスHTMLをDOM_HTML設定

#---イベント設定------
数を0から15まで繰り返す。
  「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。新規ゲーム待ち=オフここまで。

●駒描画
  #---画面描画------
  数を0から15まで繰り返す。
    「canvas#cv{数}」のDOM要素取得。それへ描画開始。
    もし、駒[数]<15ならば、色=駒色[駒[数]/4を切捨]
    違えば、色=駒色[4]
    「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    「bold 48px MS ゴシック」に描画フォント設定。
    もし、駒[数]<9ならば、x=37。
    違えば、x=22。
    y=70。            #文字描画のyは、文字の下部なのか?
    もし、駒[数]<15ならば、
      黒色塗り色設定。[x,y]へ駒[数]+1の文字描画。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----駒入れ替え--------------------------------------------------------
●駒入替(方向で)
  もし、(方向=0)かつ(アキ/4≧1)ならば、
    駒のアキとアキ-4を配列入替。
    アキ=アキ-4。
  違えばもし、(方向=1)かつ(アキ/4<3)ならば、
    駒のアキとアキ+4を配列入替。
    アキ=アキ+4。
  違えばもし、(方向=2)かつ(アキ%4>0)ならば、
    駒のアキとアキ-1を配列入替。
    アキ=アキ-1。
  違えばもし、(方向が=3)かつ(アキ%4<3)ならば、
    駒のアキとアキ+1を配列入替。    #右の駒と入れ替え
    アキ=アキ+1。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、新規ゲーム待ち=オフならば、
    もし、駒[No]<15ならば、
      もし、No+4=アキならば、0で駒入替。
      もし、No-4=アキならば、1で駒入替。
      もし、No+1=アキならば、2で駒入替。
      もし、No-1=アキならば、3で駒入替。
      駒描画。完成判定。
    ここまで。
  ここまで。
  もし、新規ゲーム待ち=オンならば、   #なぜか「違えば」がうまく出来ない?
    「もう一度?」で二択。
    もしそれはいならば、新規ゲーム。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
  完成=0。
  数を0から15まで繰り返す。
    もし、駒[数]が数ならば、完成は完成+1。
  ここまで。
  もし、完成=16ならば、
    「canvas#cv15」のDOM要素取得。それへ描画開始。
    色=駒色[3]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    x=25。y=68。黒色塗り色設定。[x,y]へ「★」の文字描画。
    「おめでとう!」と言う。
    新規ゲーム待ち=オン。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
    </script>

    <H1>なでしこ3で15パズル ver.1.01</H1>
    <HR>
      <div id="game" class="game" style="text-align: center;"></div>

 どうでしょう。問題なく同じに動いてると、思うんだけど・・

http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_01.html


 無理矢理感が完全に払拭されたわけでもないけど、コードのダサい見た目も解消されて行数も節約できて、してコレなら100個とか作っても大丈夫・・かも?!(まぢか;)

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

2017/09/14 (木)

なでしこ3でも15パズルを作るよ!

| 07:31 | なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 なでしこ3でも15パズルを作るよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ちょっと無理矢理な感じもするケド、イベントが使えるようになったことで出来そう感がでてきたので、やっぱりゲームが作りたいなぁ~

 ・・・っとゆうわけで、でんせつの15パズルをなでしこ3でも作ってみたよ!

 ちなみに何が伝説かって、これがワタシが最初に作ったプログラムだったんだけど、それがなんと、の当時のなでしこコミュニティーコンテストで最優秀賞を頂戴してしまったとゆう・・・(自慢かよ!?;)

 ・・・いやしかし、一体ナゼなのか、もって分からんね;

 おらく、初心者のしろーとが、結構こだわってノリノリで作ってたので、後も精進しろよとゆうことだったに違いないね。

 っ、それはともかく15パズルです。

 そうそう、なんとなでしこ3では、「配列入れ替え」が無くなってしまったんだね。

 15パズルは基本的に、配列入れ替えをしてはそれを画面に反映するの繰り返しなのですよ。

 もっとも、考えたら、入れ替えたい二つを別々の変数に一時記憶して、ばくりっこするだけのカンタンな関数でしたが。

 とりあえず、単に15パズルの出来るver.1の段階まで。

<script type="なでしこ">

#---宣言------
駒=配列。
駒サイズ=100。
駒色=["AAAAFF","FFAAAA","FFDDAA","AAFFAA","DDDDDD"]
アキ=15。
新規ゲーム待ち=オン。

#---イベント設定------
数を0から15まで繰り返す。
  「#cv{数}」の「onmousedown」に「マウス押下時{数}」をDOMイベント設定。
ここまで。

新規ゲーム。

#-----新規ゲーム--------------------------------------------------------
●新規ゲーム
  #---初期化------
  アキ=15。            #アキ位置を初期化。
  数を0から15まで繰り返す。    #駒位置を初期化
    駒[数]=数。
  ここまで。

  #---問題作成------
  1000
    rは4の乱数。rで駒入替。
  ここまで。

  駒描画。新規ゲーム待ち=オフここまで。

●駒描画
  #---画面描画------
  数を0から15まで繰り返す。
    「canvas#cv{数}」のDOM要素取得。それへ描画開始。
    もし、駒[数]<15ならば、色=駒色[駒[数]/4を切捨]
    違えば、色=駒色[4]
    「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    「bold 48px MS ゴシック」に描画フォント設定。
    もし、駒[数]<9ならば、x=37。
    違えば、x=22。
    y=70。            #文字描画のyは、文字の下部なのか?
    もし、駒[数]<15ならば、
      黒色塗り色設定。[x,y]へ駒[数]+1の文字描画。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----駒入れ替え--------------------------------------------------------
●駒入替(方向で)
  もし、方向が0ならば、
    もし、(アキ/4≧1)ならば、      #アキが一番上でなければ
      駒のアキとアキ-4を配列入替。    #上の駒と入れ替え
      アキ=アキ-4。
    ここまで。
  ここまで。
  もし、方向が1ならば、
    もし、(アキ/4<3)ならば、      #アキが一番下でなければ
      駒のアキとアキ+4を配列入替。    #下の駒と入れ替え
      アキ=アキ+4。
    ここまで。
  ここまで。
  もし、方向が2ならば、
    もし、(アキ%4>0)ならば、      #アキが左端でなければ
      駒のアキとアキ-1を配列入替。    #左の駒と入れ替え
      アキ=アキ-1。
    ここまで。
  ここまで。
  もし、方向が3ならば、
    もし、(アキ%4<3)ならば、      #アキが右端でなければ
      駒のアキとアキ+1を配列入替。    #右の駒と入れ替え
      アキ=アキ+1。
    ここまで。
  ここまで。
ここまで。

#なでしこ3に「配列入れ替え」はない。
●配列入替(AのIとJを)
  II=A[I]。JJ=A[J]。
  A[I]=JJ。A[J]=II。
ここまで。
#-----------------------------------------------------------------------

#-----マウス判定--------------------------------------------------------
●マウス押下時(Noの)
  もし、新規ゲーム待ち=オフならば、
    もし、駒[No]<15ならば、
      もし、No+4=アキならば、0で駒入替。
      もし、No-4=アキならば、1で駒入替。
      もし、No+1=アキならば、2で駒入替。
      もし、No-1=アキならば、3で駒入替。
      駒描画。完成判定。
    ここまで。
  ここまで。
  もし、新規ゲーム待ち=オンならば、   #なぜか「違えば」がうまく出来ない?
    「もう一度?」で二択。
    もしそれはいならば、新規ゲーム。
  ここまで。
ここまで。

●マウス押下時0
  0のマウス押下時。
ここまで。

●マウス押下時1
  1のマウス押下時。
ここまで。

●マウス押下時2
  2のマウス押下時。
ここまで。

●マウス押下時3
  3のマウス押下時。
ここまで。

●マウス押下時4
  4のマウス押下時。
ここまで。

●マウス押下時5
  5のマウス押下時。
ここまで。

●マウス押下時6
  6のマウス押下時。
ここまで。

●マウス押下時7
  7のマウス押下時。
ここまで。

●マウス押下時8
  8のマウス押下時。
ここまで。

●マウス押下時9
  9のマウス押下時。
ここまで。

●マウス押下時10
  10のマウス押下時。
ここまで。

●マウス押下時11
  11のマウス押下時。
ここまで。

●マウス押下時12
  12のマウス押下時。
ここまで。

●マウス押下時13
  13のマウス押下時。
ここまで。

●マウス押下時14
  14のマウス押下時。
ここまで。

●マウス押下時15
  15のマウス押下時。
ここまで。
#-----------------------------------------------------------------------

#-----完成判定----------------------------------------------------------
●完成判定
  完成=0。
  数を0から15まで繰り返す。
    もし、駒[数]が数ならば、完成は完成+1。
  ここまで。
  もし、完成=16ならば、
    「canvas#cv15」のDOM要素取得。それへ描画開始。
    色=駒色[3]。「#{色}」へ塗り色設定。[0,0,駒サイズ,駒サイズ]に四角描画。
    x=25。y=68。黒色塗り色設定。[x,y]へ「★」の文字描画。
    「おめでとう!」と言う。
    新規ゲーム待ち=オン。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>



<CENTER><H1>なでしこ3で15パズル ver.1</H1></CENTER>
<div class="game" style="text-align: center;">
    <canvas id="cv0" width="100" height="100"></canvas>
    <canvas id="cv1" width="100" height="100"></canvas>
    <canvas id="cv2" width="100" height="100"></canvas>
    <canvas id="cv3" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv4" width="100" height="100"></canvas>
    <canvas id="cv5" width="100" height="100"></canvas>
    <canvas id="cv6" width="100" height="100"></canvas>
    <canvas id="cv7" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv8" width="100" height="100"></canvas>
    <canvas id="cv9" width="100" height="100"></canvas>
    <canvas id="cv10" width="100" height="100"></canvas>
    <canvas id="cv11" width="100" height="100"></canvas>
    <BR>
    <canvas id="cv12" width="100" height="100"></canvas>
    <canvas id="cv13" width="100" height="100"></canvas>
    <canvas id="cv14" width="100" height="100"></canvas>
    <canvas id="cv15" width="100" height="100"></canvas>
</div>

 マウスの判定が・・・・・・(爆)

 いろいろ試したけど、やっぱりこれ以外ではうまく出来なかった。

 15パズルくらいまでは、まだこれでもイイですけれどねぇ~;;;

 でもとりあえずは希望通りに、15パズルで遊ぶことは出来ます♪

http://www.geocities.jp/snowdrops890/wnako3_test/15puzzle_1_00.html


 いちおう、またスマホにも対応してみた。

 だけど、スマホの場合は、「onmousedown」も「onclick」も同じくタップ(?)指を離した時に発動するみたいなんだよね。してスマホだと、どうしてもフリック(?)しゅっと駒を動かしたくなっちゃうんで、かえって動かないってゆうね;

 ・・・だから、なんぼでもアプリが転がってるだろとか言わないで~。折角スマホとかでも動くよ!っていうのがウリなんだから、ちょこっと試してみたいってゆうか。

 でっ、結局一番時が掛かったのは、なでしこのことではなく、幅はいいんだけど、横持ちした場合に縦(狭い方)に合わせて縮小するには一体どうしたらいいんすかってことでしたとさ;

 縦の場合は、<html>や<body>はもとより、上位の要素全てに、「height」の設定が必要となるようです。

 幅420px以下と高さ420px以下と、別っこに設定してるので、どっちも420px以下の画面では、駒の比率が変なことになりますが、んなちっちゃこい端末って、ないよね?!


 そう言えば、文字描画」のyの値は、文字の下側の値みたいなんだよね。

 なでしこ1では、x,yで左上の位置を指定することになっていたんだけど、なでしこ3では文字の左下の位置を指定しなければならないようです。

 途中で文字の大きさを変えたりした時にも文字の底辺が揃えやすいから、こっちの方がイイかもしないけど、要注意です。

canvas#nako3_canvas_1」のDOM要素取得。それへ描画開始。
赤色線色設定。白色塗り色設定。
y=24。
[0,y]から[300,y]へ描画。
黒色塗り色設定。「{y}px Aria」に描画フォント設定。
[0,y]へ「いろはにほへと」の文字描画。
「12px Aria」に描画フォント設定。
[y*7,y]へ「ちりぬるを」の文字描画

公式ページの簡易エディタで動きます。

https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

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

2017/09/10 (日)

HTMLタグの実体参照変換

| 15:40 | HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 珍しく、実用の物を作った。

 なでしこ3では、HTML埋め込みにすることが多いので、ブログにUPする時には、タグの記号を変換しないと、おかしなコトになっちゃうんですよねぇ~。

 HTMLタグの使える掲示板なんかも、そうでしたね。

 のことを、ワタシは、わりと最近知ったのです(バカ;)

 これまでは、ふつーにエディタ置換機能を使っていたんだけど、タグは前と後ろがあるから、二やらなきゃならないしさー。毎、どっちがどっちだったか分かんなくなるしさー。

 ちなみに 「<」→「小なり」→「less than」→「&lt;」 と 「>」→「大なり」→「greater than」→「&gt;」 とゆうことらしく、のように意味と結びつけてようく覚えたつもりでも、次の時にはやっぱり「えぇっと・・?」となるダメダメっぷり;;;

 ・・・とゆうわけで、こんなことこなでしこさんにやってもらうのが、おらく世の中の正しい使い道なんだろう。

 なでしこ1のほうが、断然すぐに作れる気がしたけど、折角なので、なでしこ3でやってみた。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" href="../common.css">

<title>HTMLタグの実体参照変換</title>

<style type="text/css">
<!--
body		{background-color:#FFF0F0}
div.base	{width:640px;}
button		{padding:10px 20px;}
label		{font-size:large; font-weight:bold; padding-left:10px;}
h3			{margin:0; padding:0;}
textarea	{width:100%}
span.s		{font-size:x-small; font-weight:normal;}

 -->
</style>

</head>

<body>
<!-- なでしこを使うために必要なスクリプト -->
<script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------------------
データ=cb=[0,1,1,0,0]
元文字=[「&」,「<」,「>」,「"」,「((」]
実体参照文字=["&amp;","&lt;","&gt;","&quot;","&#40;&#40;"]

「#reset」の「onclick」に「テキストクリア」をDOMイベント設定。
「#henkan」の「onclick」に「実体参照変換」をDOMイベント設定。
5
 C=回数-1。
 「#check{C}」の「onchange」に「チェック{C}」をDOMイベント設定。
ここまで。

●実体参照変換
  データ=「#code」のDOMテキスト取得。
  5
    C=回数-1。
    もしcb[C]=1ならば、データ=データの元文字[C]を実体参照文字[C]に置換。
  ここまで。
  「#result」にデータをDOMテキスト設定。
ここまで。

●テキストクリア
  「#code」にDOMテキスト設定。
  「#result」にDOMテキスト設定。
ここまで。

#-----------------------------------------------------------------------
●チェックオフオン(Noで)
  もしcb[No]=オンならばcb[No]=オフ。
  違えばcb[No]=オンここまで。

●チェック0
  0でチェックオフオンここまで。

●チェック1
  1でチェックオフオンここまで。

●チェック2
  2でチェックオフオンここまで。

●チェック3
  3でチェックオフオンここまで。

●チェック4
  4でチェックオフオンここまで。
#-----------------------------------------------------------------------
</script>

<H1>HTMLタグの実体参照変換</H1>
<HR>
<div class="base">
  <fieldset>
  <legend><B>変換する項目</B></legend>
    <label><input type="checkbox" id="check1" checked="checked"> < <span class="s">(小なり)</span></label> 
    <label><input type="checkbox" id="check2" checked="checked"> > <span class="s">(大なり)</span></label> 
    <label><input type="checkbox" id="check0"> & <span class="s">(アンパサンド)</span></label> 
    <label><input type="checkbox" id="check3"> " <span class="s">(二重引用符)</span></label> 
    <label><input type="checkbox" id="check4"> (( <span class="s">(二重の丸括弧)</span></label>
  </fieldset>

  <P><h3>変換元</h3>
  <textarea id="code" rows="10"></textarea><BR>
  <button id="henkan">変換</button>
  <button id="reset">クリア</button></P>
  
  <P><h3>変換後</h3>
  <textarea id="result" rows="15"></textarea></P>
</div>
</body>
</html>

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

 ちょっとチェックボックスを使ってみましたよ☆

 チェックボックスのオフオンを取れる命令はのところ無いもようですが、フラグを立てて「onchange」でトグルさせています。


 実体参照文字自体をのまま表示したい時は、「&」を変換すればOK。

 二重の丸括弧は数値文字参照ですケド、これは何かとゆうと、はてな記法ではなんだか二重の半角の丸括弧で括られた部分が、脚注として認識されてしまうらしく、プログラムで括弧で括った計算が結構引っかかってしまうんだよね;

 これまでは、全角にしたりしてましたが、もののついでで変換できるようにしてみた。

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

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

2017/09/02 (土)

イベントを使うよ!

| 16:59 | イベントを使うよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - イベントを使うよ! - 雪乃☆雫のなでしこ日和 イベントを使うよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ3がバージョンアップして、イベントが使えるようになったので、早速お試ししてみます☆

 ついでに、前わからんと言ってた、スタイルシートも学んで、背景色の設定の仕方も分かった。

 実は、ワタシが違っていただけで、「background」は壁紙で、背景色は「bgcolor」だったとゆうオチだったんだけど(´д`;;;

 とっ、とにかく、そうゆうのは使うなとゆうことであるらしく、ちゃんとCSSで設定する術を覚えたので、それも活かしてこんなの。

 てゆうか前背景色を変えようとしたのは、単に、canvasの地色がどうやら白じゃなくて透明っぽいと気付いたので、それをちょこっと確認してみようとしただけだったんだけどねw

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと</title>
    <style id="bg" type="text/css">
        body {background-color: #FFCCCC;}
    </style>

    <title>なでしこ3てすと</title>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「#a」の「onclick」に「ボタン選択」をDOMイベント設定。
      「#RGB」に「#FFCCCC」をDOMテキスト設定。

      ●ボタン選択
        背景色=16777215の乱数。背景色=背景色のHEXを6でゼロ埋め。
        「#bg」に「body {波カッコ}background-color: #{背景色};」をDOM_HTML設定。 #{波カッコ閉じ}が使えない。無くても動いたからいいけどΣ(゜д゜;
        「#RGB」に「#{背景色}」をDOMテキスト設定。
      ここまで。
    </script>

    <H1>なでしこ3てすと~ボタンをクリック</H1>
    <HR>
    <button id="a">背景色変更</button>
    <input id="RGB" type="text">
    <HR>
  </body>
</html>

 ボタンを押したら、ランダムに背景色が変わります。

 http://www.geocities.jp/snowdrops890/wnako3_test/04_button.html


 ところで、「波カッコ閉じ」がつかえない~><;

 そういえば、前にも「カッコ」「波カッコ」はできるのに、「カッコ閉じ」「波カッコ閉じ」が、「undefined」となってしまうと騒いでいた気が;;;

 取りあえず、閉じなくてもちゃんと動いたからいいけど。

 (↑・・・それはともかく、DOMスタイル設定を使えばいいんじゃ?・・・ってことに最近気付いたよ・・・(バカ;)(9/20追記)


 そういえば、ボタンは押すに決まっているモノだけど、canvasなんかもonclickは使えるのかなー? と思って試してみたら、使えた!

 コレが出来ると、ちょっとゲームが作れそうな気がしてくるんじゃないですか?(喜)

 しかし、どうやら「DOMイベント設定」では、関数引数をつけては設定出来ないっぽいんだよね。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと~canvasをクリック</title>
    <style id="bg" type="text/css">
        body {background-color: #FFFFFF;}
    </style>

  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      色リスト=["FFEEEE","EEEEFF","EEFFEE","FFFFEE","FFEEFF","EEFFFF"]

      6
        C=回数-1。背景色=色リスト[C]
        「canvas#color{C}」のDOM要素取得。それへ描画開始。
        「#{背景色}」へ塗り色設定。[0,0,30,30]に四角描画。
//        「#color{C}」の「onclick」に「背景色選択({C})」をDOMイベント設定。 #関数引数をつけての設定は出来ない?
        「#color{C}」の「onclick」に「色ボタン押下{C}」をDOMイベント設定。
      ここまで。

      ●背景色選択(No)
        背景色=色リスト[No]
        「#bg」に「body {波カッコ}background-color: #{背景色};」をDOM_HTML設定。
      ここまで。

      ●色ボタン押下0
        背景色選択(0)
      ここまで。

      ●色ボタン押下1
        背景色選択(1)
      ここまで。

      ●色ボタン押下2
        背景色選択(2)
      ここまで。

      ●色ボタン押下3
        背景色選択(3)
      ここまで。

      ●色ボタン押下4
        背景色選択(4)
      ここまで。

      ●色ボタン押下5
        背景色選択(5)
      ここまで。
    </script>

    <H1>なでしこ3てすと~canvasをクリック</H1>
    <HR>
    <div id="a">
      <canvas id="color0" width="30" height="30"></canvas>
      <canvas id="color1" width="30" height="30"></canvas>
      <canvas id="color2" width="30" height="30"></canvas>
      <canvas id="color3" width="30" height="30"></canvas>
      <canvas id="color4" width="30" height="30"></canvas>
      <canvas id="color5" width="30" height="30"></canvas>
    </div>
    <HR>
  </body>
</html>

 どーなんですかこりゃwww

 でもまあ、とりあえず、押すとの色に変わる、やふーのトップページにあるみたいなヤツ。

 http://www.geocities.jp/snowdrops890/wnako3_test/04_canvas.html

 面倒だからしなかったけど、ローカルストレージを使えば、コレを覚えさせとくことも可能って訳ですね~。



 「onclick」に直接「背景色選択({C})」が設定できれば、とっても便利なように思われるんですけど・・・むむむ。

 てゆうか、だって、これにマウス入った時の処理もつけようとかなったら、当然、マウス出た時も必要だから・・・(´д`;

 ・・・それとも、なんかワタシが違ってるかにゃぁ・・・・・・;;;

 あるいは、他に何か、どれが押されたかを取得出来る上手い手があるのかしらん・・・


 あと、「DOM要素作成」などの命令が追加されたので、canvasも連番で動的に作成できるかなあと思ったんだけど・・・

 作成はできまして、「width」と「height」のDOMスタイル設定も出来て、連番のIDを使って、DOMイベント設定をして、押したら色が変わるようにまでは出来たんですけどね。

 なぜか、描画がおかしなコトになってしまうのですよ(?_?)

 どうやら、DOM要素作成した時点で、デフォルトの300*150のサイズで作成されてしまい、一旦作成した後は、変更しても変わるのは見た目だけで本当のサイズはかわらないっぽい。

 描画は、元のサイズの画像に行われて、それを「width」と「height」のサイズに拡縮して表示するだけなんだね。

 やっぱり、canvasはタグで、作成時に「width」と「height」を与えないとダメなのかも。

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

2017/08/31 (木)

なでしこ3でバイオリズム表示~0.1.0

| 00:24 | なでしこ3でバイオリズム表示~0.1.0 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3でバイオリズム表示~0.1.0 - 雪乃☆雫のなでしこ日和 なでしこ3でバイオリズム表示~0.1.0 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 気が付いたら、なんかもう九月だってw(゜o゜)w

 それはさておき、バイオリズムです。

 ボタンが使えなかったので、あんまりかっこよくはないけど、「尋ねる」と「二択」で開いた時に生年月日と表示月を設定することにして、とりあえず完成させてUPしようとしていたら、なななんとなでしこ3がバージョンアップしていたよ!

 イベントが使えるようになってます!!!

 ・・・でっでも、今日のところはこんな感じ~;;;

 イベントの使い方を学んだら、こっちもばーじょんあっぷだ~☆

    <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 ゴシック」に描画フォント設定。
青色塗り色設定。[440,30]へ「■身体」を文字描画赤色塗り色設定。[440+60,30]へ「■感情」を文字描画緑色塗り色設定。[440+60*2,30]へ「■知性」を文字描画。
枠描画。

#ローカルストレージ
生年月日=「生年月日」をローカルストレージ読むもし、生年月日=undefinedならば、生年月日登録。 #「undefined」は「」で括ったらダメ。
違えば、
  「生年月日は『{生年月日}』でよろしいですか?」で二択。
  もしそれいいえならば、生年月日登録。
ここまで。

「今月のバイオリズムでよろしいですか?」で二択もしそれいいえならば、
  「表示年月は?{改行}(yyyy/mm)」と尋ねる。
  一時=それを「/」で区切る。
  表示年=一時@0。表示月=一時@1。
  表示年月=「{表示年}年{表示月}月」
  基準日=「{表示年}/{表示月}/01」
ここまで。
バイオリズム表示。

//「生年月日」をローカルストレージキー削除。
#-----------------------------------------------------------
●生年月日登録
  「生年月日は?{改行}(yyyy/mm/dd)」と尋ねる。
  「生年月日」にそれをローカルストレージ保存。
  生年月日=それここまで。
#-----------------------------------------------------------
●枠描画
 白色線色設定。白色塗り色設定。
 [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。
  誕生日=「{生年}年{生月}月{生日}日」。

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

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

  「DIV#title」のDOM要素取得。
  「  {誕生日} 生まれの方の {表示年月} のバイオリズム」を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ならば、結果を切捨で戻る。
  違えば、結果をCEIL戻る。 #なぜか「切り上げ」が出来ないのでCEILを使う。→0.1.5ではできるようになってる!
ここまで。

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

    <H1>なでしこ3でバイオリズム表示~0.1.0</H1>
    <HR>
    <B><DIV id="title"></DIV></B>
    <canvas id="cv" width=640 height=480></canvas>

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


 わざわざ「日付加算」ができるようにしてみたりしたケド、よく考えたら、基準日を月初めにしたいだけだったので、は別に全然無くても良かった(^▽^;

 「描画フォント設定」は、フォントサイズとフォント名は省略できない順番が決まっており、フォントスタイル→フォントサイズ→フォント名の順で書かないと無効になるCSSの仕様ラシイ?)

 文字色の設定は、「塗り色設定」でできる。

 ところで、なでしこのことじゃないけど、HTML5では、<BODY>タグのbackground属性なんかは、廃止されてしまったんだね。

 ちゃんと、全部スタイルシートを使えよってことなんだね(><;

 スタイルシートが全然分からないので、てすとページの背景色を変えることさえ出来ないってゆう・・・。しくしくしく。

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

2017/08/28 (月)

ローカルストレージを使うよ!

| 14:17 | ローカルストレージを使うよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ローカルストレージを使うよ! - 雪乃☆雫のなでしこ日和 ローカルストレージを使うよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 てゆうか、ローカルストレージってなんすか;

 ・・・っと思っていたら、これcanvas同様、HTML5から追加になったヤツみたい。

 cookieよりも大容量で、有効期限も無いとゆう、便利機能ラシイ。

 もっとも、cookieのことも別によく知らないし、とりあえず、ようするにバイオリズムで毎生年月日を入力するのは面倒だから、覚えさせておきたいなー・・・なんてコトが、なでしこ3でも出来る的な?

 こういったことは、なんとなく、とてもめんどーそうに思ってたけど、実際にやってみたら、わざわざ記事にすることなど何も無いくらいに、ものすごくカンタンでした♪

 しかし、とりあえず、折角新しいことを学んだので、ココへ記しておく。

#ローカルストレージの使い方
「名前は?」と尋ねる。
「名前」にそれをローカルストレージ保存。
ローカルストレージキー列挙して言う。
「名前」をローカルストレージ読むそれ言う。

「名前」のローカルストレージキー削除。
ローカルストレージキー列挙して言う

 有効期限が無いとゆうことは、消さない限りはエディタのページに「名前」というキーが残ってしまうので、削除して終わっていますが、残しておけば、次開いた時にもの名前を引っ張り出して使うことが出来るとゆうことだね。

 こんな感じ?

    <script type="なでしこ">
#-----------------------------------------------------------
名前=「名前」をローカルストレージ読む。
名前=それもし、名前=undefinedならば、
  「名前は?」と尋ねる。
  名前=それ。
  「名前」にそれをローカルストレージ保存ここまで。
「DIV#name」をDOM要素取得。
「  いらっしゃいませ。{名前}さん!」をDOMテキスト設定。
#-----------------------------------------------------------
    </script>

    <H1>なでしこ3てすと~ローカルストレージ</H1>
    <HR>
    <DIV id="name"></DIV>
    <HR>

 よくある、ユーザー名でご挨拶してくれる的な。

http://www.geocities.jp/snowdrops890/wnako3_test/03_localStorage.html

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

2017/08/24 (木)

なでしこ3で日付時間計算

| 22:04 | なでしこ3で日付時間計算 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なでしこ3で日付時間計算 - 雪乃☆雫のなでしこ日和 なでしこ3で日付時間計算 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ1にはあった、便利な日付時計算関数https://nadesi.com/doc/cmd-func.htm#k45)が、なでしこ3には無くなってしまいました。

 もしかしたら、後のバージョンアップで追々追加されていく予定なのかもしないけど、バイオリズムを作るに当たって、無いと不便なのでとりあえず作ってみた。

 だって、マイナビ連載9目の「オリンピックまであと何日?」(http://news.mynavi.jp/series/nadeshiko/009/)は、「日数差」の命令があれば、一行で出来る計算だったのに、わざわざUNIXTIMEを使った計算方法を解説されてるってコトは、たとえ追加されるとしても近日ってことは無いだろうからね。


 特に、「日付加算」と「時間加算」の命令は、書式がカンタンで便利な物でした。

 必要なのは、日付加算だけでしたが、時間加算の方がカンタンそうだったので、っちを先に作りました。

 日付加算は、UNIXTIMEを足していく方式だと、閏年の計算を入れなきゃならないのが何気に面倒そうだったので、年と月は単純に足してから合成することにしました。

 たぶん、なでしこ1と同様に動いていると思うんだけど・・・

日付加算時間加算
#-----------------------------------------------------------
●日付加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「/」で区切る。
  y=A@1/12を切捨。m=A@1%12。
  S=Sを「/」で区切る。
  もし、記号=「+」ならば、
    y=y+(S@1+m)/12を切捨。
    S@0=S@0+A@0+y。
    S@1=(S@1+m)%12。
  違えば、
    S@0=S@0-A@0-y。
    S@1=S@1-m。
  ここまで。
  d=(A@2)*(24*60*60)。
  年=S@0。月=S@1。日=S@2。
  S=「{年}/{月}/{日}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+d。
  違えば、S=S-d。
  S=Sを日時変換。
  S=Sの10だけ文字左部分。
  Sで戻るここまで。

●時間加算(SにAを)
  記号=Aの1だけ文字左部分。
  A=Aの1から1だけ文字削除。
  A=Aを「:」で区切る。
  時=(A@0)*24。分=(A@1)*60。秒=(A@2)。
  S=「{今日} {S}」をUNIXTIME変換。
  もし、記号=「+」ならば、S=S+時+分+秒。
  違えば、S=S-時-分-秒。
  S=Sを日時変換。
  S=Sの8だけ文字右部分。
  Sで戻るここまで。
#-----------------------------------------------------------
#以下はテスト
「2017/01/01」に「+0/1/0」を日付加算して表示。 #2017/02/01
「2017/01/01」に「-0/1/0」を日付加算して表示。 #2016/12/01

「10:30:00」に「+00:30:00」を時間加算して表示。 #10:00:00
「10:30:00」に「-00:30:00」を時間加算して表示。 #11:00:00

 続いて、「日数差」です。

 切捨は出来るのに、切り上げが出来ないとはこれいかに(?_?) ←バージョン0.1.5で、できるようになりました!

 まあ、CEILが使えるからいいけど。

 して、のところは使う予定は無いけど、もののついでで「時間差」「分差」「秒差」と全部作ったw

 ところで、四捨五入の仕様が変わってる?!

 なでしこ1の四捨五入は、「0.5を四捨五入して言う」とすれば答えは1で、小数点以下四捨五入して整数にするヤツでしたが、なでしこ3では答えが0となり、「5を四捨五入して言う」の答えが、10になるんですよ。 ←バージョン0.1.5で、なでしこ1と同様になりました!

 命令の説明に「整数Aの一桁目を丸めて返す」とゆうことは、それであってるのかなー・・・??

 まあ、ROUNDあるからいいけど。

 して、色々とお試ししてみると、時間差分差の計算は、四捨五入ROUND)かと思いきや違うみたい。

 30分差や30秒差(0.5)の場合は0となり、31分差や31秒差の時は1とゆうことになってるみたいなんだよね。5捨6入・・・?

 これタブン、なでしこ1と同じ結果になってると思うんだけど・・・

日数差時間差分差秒差
#-----------------------------------------------------------
●日数差(AとBの|AからBまでの)
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(24*60*60)。
  もし、結果>0ならば、結果を切捨で戻る。
  違えば、結果をCEIL戻る。 #なぜか「切り上げ」が出来ない…。まあ、CEILが使えるからいいけど。
ここまで。

●時間差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/(60*60)
  もし、結果=0.5ならば、結果を切捨で戻る。
  違えば、結果をROUND戻るここまで。

●分差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  結果=(B-A)/60
  もし、結果=0.5ならば、結果を切捨で戻る。
  違えば、結果をROUND戻るここまで。

●秒差(AとBの|AからBまでの)
  Aで「/」を文字検索。
  もしそれ=0ならば、A=「{今日} {A}」。
  Bで「/」を文字検索。
  もしそれ=0ならば、B=「{今日} {B}」
  A=AをUNIXTIME変換。B=BをUNIXTIME変換。
  (B-A)で戻るここまで。
#-----------------------------------------------------------
#以下はテスト
来年今年+1 #なでしこ3では{}の中の変数は展開されるが{今年+1}のような書き方は出来ない今日と「{来年}/01/01」の日数差表示。 #元日まで何日か。
今日と「{今年}/01/01」の日数差表示。 #元日から何日か。

「00:00:00」と時間差表示。
「00:00:00」と分差表示。
「00:00:00」と秒差表示

 ・・・どうかなぁ?

通りすがり通りすがり2017/08/29 21:28ためしにpluginの形にしてみました。
wnako.jsもしくはeditor.jsxの後にscriptタグで読み込むと使えます。
(取り込み方はタートルグラフィクスのプラグインと同様)
でも、なんか動きは違うような気もするのですが、オフィシャルのpluginではないので気にしないことにしました。
下記のデモのトップにある簡易エディタではこのpluginを取り込んでいるので、命令がそのまま使えます。

でもとっぷ
weyk.la.coocan.jp/weyk/nadesiko3/demo/index.html

ぷらぐいん単体
weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js

kujirahandkujirahand2017/08/30 07:49貴重な情報ありがとうございます。
次の版では、切り上げが使えない問題とか、四捨五入の問題とか直します。

雪乃☆雫雪乃☆雫2017/08/30 08:06 おおぉ、プラグイン!
 すごいです。さすがです☆
 あっ、しかし「日数差・時間差・分差・秒差」の結果の+と-が、真逆になっているのでございます。
 あああ、なんかスミマセン;
 それこそ、自分で-1を掛ければいいだけなのですが;;;

雪乃☆雫雪乃☆雫2017/08/30 08:17 kujirahandさま、コメントありがとうございます!!!
 なんか、一人でぼやきまくっていてスミマセンm(_ _)m
 どこに報告を上げたらいいのかもよく分からず・・・イヤ、それ以前に、問題なのか仕様なのか、それとも自分が間違っているのかすら、よく分からず・・・なのです;;;
 でも、とてもとても応援しています☆

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