Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/10/02 (月)

なこタイマー(Chromeでもちゃんと鳴らす!)

| 12:15 | なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 なこタイマー(Chromeでもちゃんと鳴らす!) - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前に「秒毎」の実験で、お試しに作ってみたラーメンタイマーが、Firefoxならいいんですが、Google Chromeだと音が鳴らないとゆう話を書きました。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20170922/1506085208

 アラートのポップアップが優先されて、オーディオの再生などが後しになっちゃうラシイというコトで、たとえばaudioにonplayingのイベントをつけて、のイベントでポップアップさせてみたらどうだろうと思ったら、ちょこっとだけ音が鳴って止まり、ポップアップが上がり、ダイアログを消すとまた音が鳴り始めてonplayingが発生して、またポップアップが・・・とゆうひどいことになりました;;;

 くっ、くろーむさぁん・・・ヽ(;´Д`)ノ

 どうやら後しっていうよりか、ポップアップが開いてるは、再生がとまっちゃうようです。


 ・・・とゆうわけで、やっぱりもう諦めて言わせるのはやめました;

 だいたい、追加のダイアログを表示ない的なチェックボックスをオンにしてしまったら、表示されんくなっちゃうしね。(言う無限ループが発生しちゃった時なんかは助かるけどねw)

 canvasの上にボタンを置いて、それっぽくしてみたw

 こんなものでも表示する位置を決めるに付いては、前学んだ重ね合わせやpositionの設定などで結構無駄に知恵を使いました。

 してして、近頃のラーメンは、3分とは限らないですよねぇ~。

 ちょっと良さげなのはたいてい4分とか長めになっているし、新幹印のなんと1分で出来る焼きば弁当もあるしね~。3分待つのだよって時代じゃナイ!

 とゆうワケで、丸いボタンとかも使ってちょっと可愛くしてみたりと、最近学んだことをいろいろ盛り込んで、キッチンタイマーに改造してみた。

 100ショップに売ってそうなチープさですが、電池切れの心配がない点がすぐれていますwww

<!-- うぇいくさまの日付時計算プラグイン -->
<script src="http://weyk.la.coocan.jp/weyk/nadesiko3/release/plugin_weykdatetime.js"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# なこタイマー
#-----------------------------------------------------------------------

#---宣言------
分=0を2でゼロ埋め。秒=0を2でゼロ埋めタイマーオフ終了=0。

#-----ポップアップウィンドウ表示位置------------------------------------
「#popup_base」の「width」に「160px」をDOMスタイル設定。
「#popup_base」の「margin」に「auto」をDOMスタイル設定。  #子要素でポジションを絶対にしてもleftの値をつけなければこのマージンが反映される

#-----タイマー設置------------------------------------------------------
「#timer」の「background-color」に「#FFEEEE」をDOMスタイル設定。
「#timer」の「width」に「200px」をDOMスタイル設定。
「#timer」の「padding」に「10px」をDOMスタイル設定。
「#timer」の「margin」に「auto」をDOMスタイル設定。
「#timer」の「border-radius」に「20px」をDOMスタイル設定。
「#timer」の「border」に「2px ridge #FF9999」をDOMスタイル設定。
タイマー部品配置。

●タイマー部品配置
  #readonlyは、設置時に指定しないとダメっぽい? disabledはできるのに、なんでだ;
  タイマー部品=「
<ul class="btn_base" style="height:50px">
  <li><input id="time" type="text" readonly="readonly"></li>
  <li><a id="reset" class="btn">リセット</a></li>
</ul>
<ul class="btn_base">
  <li><a id="mb" class="btn">分</a></li>
  <li><a id="sb" class="btn">秒</a></li>
  <li><a id="start" class="btn">スタート</a></li>
</ul>
<div id="alarm"></div>」
  「#timer」にタイマー部品をDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  「#start」に「スタート」をDOMテキスト設定。
  「#time」に「{分}:{秒}」をDOMテキスト設定。

#---スタイル設定------
  「#time」の「width」に「110px」をDOMスタイル設定。
  「#time」の「font-size」に「32px」をDOMスタイル設定。
  「#time」の「text-align」に「center」をDOMスタイル設定。
  「#start」の「width」に「78px」をDOMスタイル設定。
  「#reset」の「width」に「45px」をDOMスタイル設定。

#---イベント設定------
  「#mb」の「onclick」に「分設定」をDOMイベント設定。
  「#sb」の「onclick」に「秒設定」をDOMイベント設定。
  「#start」の「onclick」に「タイマーオフオン」をDOMイベント設定。
  「#reset」の「onclick」に「リセット」をDOMイベント設定。
ここまで。
#-----------------------------------------------------------------------

#-----タイマー本体------------------------------------------------------
「ナコタイマー」を1秒毎。

●ナコタイマー
  もしタイマーオンならば、
    終了秒差を残秒数に代入。
    もし、残秒数<0ならば、
      「#title」に「時です!! - なこタイマー」をDOMテキスト設定。
      「#alarm」に「<audio src="http://www.geocities.jp/snowdrops890/audio/alarm_75_8C.mp3" autoplay></audio>」をDOM_HTML設定。
      タイマーオフ。ポップアップウィンドウ表示。
    違えば、
      分=残秒数/60を切捨を2でゼロ埋め。秒=残秒数%60を2でゼロ埋め。
      「#time」に「{分}:{秒}」をDOMテキスト設定。
    ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------

#-----ボタンイベント----------------------------------------------------
●タイマーオフオン
  もし、(分=0)かつ(秒=0)でなければ、
    もしタイマーオフならば、
      タイマーオン。
      に「+0:{分}:{秒}」を時間加算して終了代入。
      「#start」に「一時停止」をDOMテキスト設定。
      「#mb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#sb」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#reset」の「color」に「#EEEEEE」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow: 0 2px 0 #CC6666; top:0px;」をDOM_HTML設定。   #ボタン押した時の動きをオフ。
      「#on_btn」に「#start:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。        #スタートボタンだけは押せるようにする。
    違えば、
      タイマーオフ。
      「#start」に「スタート」をDOMテキスト設定。
      「#mb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#sb」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#reset」の「color」に「#FFFFFF」をDOMスタイル設定。
      「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
    ここまで。
  ここまで。
ここまで。

●分設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  分はそれの2だけ文字左部分整数変換。
  もし、分が99ならば、分=0。
  違えば、分=分+1。
  分=分を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●秒設定
 もしタイマーオフならば、
  「#time」のDOMテキスト取得。
  秒はそれの2だけ文字右部分整数変換。
  もし、秒が59ならば、秒=0。
  違えば、秒=秒+1。
  秒=秒を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

●リセット
 もしタイマーオフならば、
  分=0を2でゼロ埋め。秒=0を2でゼロ埋め。
  「#time」に「{分}:{秒}」をDOMテキスト設定。
 ここまで。
ここまで。

#-----------------------------------------------------------------------
●ポップアップウィンドウ表示
  ポップアップ=「<div id="popup_area">
<canvas id="alart" width="160px" height="120px"></canvas>
<button id="stop">OK</button>
</div>」
  「#popup_base」にポップアップをDOM_HTML設定。

  「#popup_area」の「position」に「absolute」をDOMスタイル設定。  #絶対位置指定でポップアップを表示する位置を指定。
  「#popup_area」の「width」に「160px」をDOMスタイル設定。
  「#popup_area」の「top」に「350px」をDOMスタイル設定。

  「#alart」の「position」に「absolute」をDOMスタイル設定。     #絶対位置指定したエリアの子要素にすると、子の絶対位置指定は親が基準になる。
  「#alart」の「z-index」に「2」をDOMスタイル設定。
  「#stop」の「position」に「absolute」をDOMスタイル設定。
  「#stop」の「width」に「60px」をDOMスタイル設定。
  「#stop」の「top」に「90px」をDOMスタイル設定。
  「#stop」の「left」に「50px」をDOMスタイル設定。
  「#stop」の「z-index」に「3」をDOMスタイル設定。
  「#stop」の「onclick」に「アラームストップ」をDOMイベント設定。

  「canvas#alart」のDOM要素取得。それへ描画開始。
  「#FFFFEE」に塗り色設定。
  [0,0,160,120]に四角描画。
  「#224477」に塗り色設定。
  [0,0,160,18]に四角描画。
  「bold 12px Aria」に描画フォント設定。
  白色塗り色設定。
  [5,15]に「なこタイマー」を文字描画。
  黒色塗り色設定。
  [50,60]に「時です!!」を文字描画ここまで。

●アラームストップ
  「#title」に「なこタイマー」をDOMテキスト設定。
  「#popup_base」にをDOM_HTML設定。
  「#alarm」にをDOM_HTML設定。
  タイマー部品配置。
  「#on_btn」に「.btn:active{波カッコ}box-shadow:none; top:2px;」をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>
<style type="text/css">
<!--
a.btn {
    position:relative;                 /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                    /* カーソルを手の形に。 */

    width:30px;                        /* ボタンの幅。 */
    height:30px;                       /* ボタンの高さ。 */
    border-radius:18px;                /* 角丸設定(ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい) */
    background-color: #FFCCCC;         /* ボタンの色。 */
    border:1px solid #FF9999;          /* ボタン線色。 */
    box-shadow:0 2px 0 #CC6666;        /* ボタンの影設定。 */

    color: #FFFFFF;                    /* 文字色。*/
    font-weight:bold;                  /* 文字太さ。*/
    font-size:14px;                    /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0, 0, 0, .3);      /* 文字の影設定。*/
    text-align:center;                 /* 横方向文字揃え。 */
    vertical-align:middle;             /* 縦方向文字揃え。 */
    text-decoration:none;              /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
ul.btn_base{
    list-style:none;            /* noneにしないリストの●が付いちゃう。 */
    padding:0px;                /* 左を0にしないリストのインデントが入っちゃう。 */
    height:35px;                /* ボタンのサイズ+ボーダー+影 */
    margin-top:5px;
    margin-bottom:0px;
}
ul.btn_base li{
    float:left;                 /* 左にり込む(横に並べる) */
    margin-left:20px;
}
ul.btn_base li:first-child{
    margin-left:10px;
}
 -->
</style>
<style type="text/css" id="on_btn">
<!--
.btn:active {
    top: 2px;
    box-shadow: none;
}
 -->
</style>

  <center><H1 id="title">なこタイマー</H1></center>
  <HR>
  <div id="timer"></div>
  <div id="popup_base"></div>
  <HR>

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

※リンク先のものは、違うタブを開いていてもそれと分かりやすいよう、アラームが鳴ると同時にタイトルの文字を変えているのですが、掲載したコードでは、eznavi.netの制作サイトのエディタに貼付けて動くように、H1の文字を変えるようにしています。



 15パズルの成績発表も、のうちこんな感じで直す予定だけど、それよりも、なんとか画像を使って出来ないかを考え中~。

 重ね合わせで、裏画面は使えそうだけど、画像部分コピーみたいな命令が追加されないと、やっぱり難しいかなあ・・・?

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