Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

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