俺のクソレシピ

おもにプログラミングについて俺の趣味についてテキトーに書いています。

JavaScriptで時計を作る(アラーム編)

はい、コンニチハ。今回は「JavaScriptで時計を作る」第三弾、アラームを作っていきたいと思います。

f:id:myprogramming:20170626201822p:plain

アラームを作る

ではアラームを作っていきます。コードはこんな感じでしょうか。

けっこう長くなってしまったのでがんばってください!

今回はアラームをオンにするかどうかのチェックボックスと時間を設定するためのセレクトボックス、設定を保存するためのボタンを作っています。セレクトボックスは全部書いているとものすごく長くなってしまうので、JavaScriptのfor文で書いていて現在時刻に合わせるようにしています。

そして、main関数で1秒毎に更新しています。ここで、alarm_setがtrueでalarm_hourとalarm_minuteが現在時刻だったらアラームを鳴らして、メッセージとアラームを止めるためのボタンを表示します。そして、そのボタンが押されたら非表示にしてアラームを止めるのですが、アラームを鳴らしたときに1回alarm_setをfalseにしないと止めても止まらなくなってしまうので気をつけてください。しかもfalseにしたままだと、次その時間になっても鳴らないので、設定を保存する時、アラームをオンにするならばalarm_set2もtrueにしておいて、alarm_set2がtrueでアラームをセットしている時間でないならばalarm_setをtrueにするというようにすれば、アラームを止めるとちゃんと止まるけど次にその時間になったらちゃんと鳴るというふうになります。

また、アラームが鳴り終わったときもendedイベントでメッセージなどを非表示にしています。

ちなみに、設定を保存するときにalarm_setがtrueならsoundをロードしていますが、これはスマホだとユーザーからのイベントがあったときしか音声を再生できないので、このときにロードすることで解決しています。

デモ

前回説明したウェブクロウで今回のデモページを作ってみました。

http://myrecipe.webcrow.jp/alarm/

前回の記事
myprogramming.hatenablog.com

まとめ

今回はアラームを作ってみましたが、少し長くなってしまったものの、基本的には難しいことはやっていないのでけっこう簡単だと思ったのではないでしょうか。こんな感じで、ちょっとしたものなら書き方がわかっていれば簡単に作ることができてしまいますし、わからないことがあっても調べれば大抵すぐ出てきます。なので、みなさんもこんな感じのちょっとしたものをたくさん作っていると自分の知識も上がるしモチベーションも上がると思うのでぜひやってみたらどうでしょうか。今回はこのぐらいにしといて、また今度!