KoniSanのBlog

自分の趣味を発信していきます。

JavaScriptで時計を作る(完成編)

はいこんにちは。今日は2回目ですけど・・・さっき作ったアラームと前に作ったデジタル時計、アナログ時計を組み合わせて、全体的に見やすくして作り変えてみました。

f:id:myprogramming:20170626201822p:plain

どんな感じになったのか

今回、作ったものを早速デモページにアップしてみたんですけど、どんどん改良していくうちにめちゃくちゃ読みにくくなってしまったので、解説はしません。スイマセン。でも、これは俺的にはまあまあ自身があるのでぜひ見てください。これには、俺が作ったモーダルウィンドウ的なものを使ってたり、アラームの時間の設定にSwiperというJavaScriptで簡単にスライドショーを作れるものを使っていたり、Cookieで設定を保存したりと、けっこう色々やってみました。

Swiperについてはコチラ
Swiper - Most Modern Mobile Touch Slider

ダウンロード

一応ダウンロードできるようにしておきました。

時計.zip

まとめ

どうでしょうか。俺的にはまあまあのできかなとは思っているのですが、皆さん的にはどうでしょうか。もし、もっとここをこうした方がいいと思うという所があればぜひコメントを下さい。JavaScript初心者の方はこんぐらいのものは簡単に作れるぜ~っていうぐらいになれるように頑張ってください。あと、JavaScriptだけじゃなくて結構CSSとかも使っちゃってるのでそこんとこはすんません。では、さようなら~。

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

ダウンロード

アラーム.zip

まとめ

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

JavaScriptでdocument.getElementByIdを使わずid取得

みなさんこんにちは。次のJavaScriptの記事はアラームだとか書いたんですが、ちょっと面白いこと見つけたので、この記事を先にアップしちゃいました。

f:id:myprogramming:20170626201822p:plain

document.getElementById

皆さん、JavaScriptでidを取得するときどうしていますか?俺は、document.getElementByIdを使っています。ですが、さっきdocument.getElementByIdを書き忘れていることに気づいて、しかも、それでエラーも起きないでちゃんと動いていたんです!

document.getElementByIdを使わないid取得

詳しく説明させてもらうと、そのままなんですが、document.getElementByIdを使わないで、他にも何も使わないで、idを取得できたんです。実際にプログラムを載せておきます。

f:id:myprogramming:20170715184037j:plain

これで、ちゃんと画像のようにalertされるんです。ちなみに、確認したのはandroidwindowschromeです。

まとめ

皆さん、どうでしょうか、あの長いメソッドを書かなくてもすみますよ!でも、どのブラウザが対応しているのか分からないので、これが本当に使えるかは分かりません。俺も普段、document.getElementByIdを使っていて、考えもしなかったので、よく分かりません。何か詳しく知っている方がいたら、ぜひ教えてください!!では、さようなら!

JavaScriptで時計を作る(アナログ編)

さて、前回はJavaScriptでデジタル時計を作りましたが、今回は予告どおりアナログ時計を作ってみたいと思います。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

時刻を表示するベースを作ろう

まず、時刻を表示するベースが必要ですね。ベースは、前回使ったベースを少し変えて使います。

あらら、前回とだいぶ変わっちゃいましたね。まず、今回は時計の針を画像で表示するので文字盤、短針、長針、秒針の4つの画像を表示するための、それぞれidを設定したimgタグを用意します。画像のサイズは300px×300pxにしています。4つの画像は重ねて表示する必要があるのでpositionと座表を指定します。画像を、親要素内に絶対配置するabsoluteで上から0px、左から0pxのところの配置しますが、親要素のpositionがstatic(デフォルト)だと親要素の位置を無視して絶対配置してしまうので(他の要素がある場合その要素とかぶってしまったりすることがあります。)、親要素のpositionを相対位置で配置するrelativeにします。ちなみに、ここで画像はhtmlファイルと同じディレクトリに配置しています。

※前回とdiv要素のidがclockからbaseに変わっていることに注意してください。

cssのpositionについて

position-スタイルシートリファレンス

時刻を取得しよう

ここは、前回の記事でも全く同じことをやっているので詳しい解説は載せません。

はい、前回と全く同じ(JavaScript)ですね。コンソールに取得した時刻を表示しています。
詳しくは、前回の記事を参照してください。

時刻を表示しよう

では、実際に取得した時刻をアナログ時計で表示してみましょう!

今回は前回と違って時刻をテキストで出力するのではなく、それぞれの針をidで指定してcssで画像を回転させて時刻を表しています。要素を回転させるには
transform:rotate(回転角度deg);
を指定して回転させることができます。2D(平面)回転でプラスで時計回り、マイナスで反時計回り回転します。このとき、短針の角度の計算に+が含まれているのでカッコでくくらないと数値が文字列に自動変換されて、計算されないで連結されてしまうので注意してください。ちなみに、degとは度のことです(例 90度=90deg)。

それぞれの針の角度の求め方の一覧。

説明 計算方法
短針 12時間で360度回転し、1時間(60分)で30度回転、1分で0.5度回転します。 時×30+分×0.5
長針 1時間(60分)で360度回転し、1分で6度回転します。 時×30+分×0.5
秒針 1分(60秒)で360度回転し、1秒で6度回転します。 時×30+分×0.5

JavaScriptでのidの取得方法について

id名で要素を特定してその属性を操作してみる | JavaScript入門編

JavaScriptでのcssの操作方法について

JavaScriptでCSSを操作する方法 | スターフィールド株式会社

cssでの画像の回転方法について

CSSでテキストや画像を回転させる方法

時刻を更新しよう

時刻はちゃんと表示できたでしょうか?できたら前回と同様、時刻が更新されないので更新しましょう。

やっていることは前回となにも変わらないので詳しい説明は前回の記事を参照してください。ちなみに、このコードでは針がスムーズに動きませんが、もしスムーズに動かしたかったら短針と同様に長針は秒、秒針はミリ秒の角度を考えて足して更新する時間をもっと細かくすればスムーズに動くはずです。応用としてやってみてもいいと思います。

デモ



ダウンロード

ここからプログラムと画像ファイルをダウンロードできます。

アナログ時計.zip

まとめ

今回は前回のデジタル時計に引き続きアナログ時計を作ってみましたが、どうでしたでしょうか。前回とは時刻の表示が全く違うので新たにいろいろなことを知ることができたのではないでしょうか?でも、全くと言っていいほどこの時計は機能がないですね。なので、次回のJavaScriptの記事ではデジタル時計とアナログ時計を組み合わせてアラーム機能をつけていきたいと思います。では、また今度!!

JavaScriptで時計を作る(デジタル編)

今回の記事では、JavaScriptでデジタル時計を作ってみたいと思います。この記事ではHTMLとJavaScriptがある程度理解できる人を対象にしていますが、理解できなくても一応コピペして動かすこともできます。

f:id:myprogramming:20170626201822p:plain

時刻を表示するベースを作ろう

さあ、作っていきたいのですがまず時刻を表示する場所がなければどうにもなりませんね。実際に書いたコードはこんな感じです。

divタグ内に取得した時刻を表示します。あとでJavaScriptで指定するためにidをclockとしておきます。

時刻を取得しよう

JavaScriptで時刻を取得するにはnew演算子を使ってDateクラスをインスタンス化します。Dateクラスにはたくさんのメソッドがありますが今回は使うメソッドだけ紹介しておきます。

メソッド 説明
getFullYear() 西暦を取得する(現地時間)
getMonth() 月を取得する(現地時間) (0 ~ 11)
getDate() 日を取得する(現地時間) (1 ~ 31)
getHours() 時を取得する(現地時間) (0 ~ 23)
getMinutes() 分を取得する(現地時間) (0 ~ 59)
getSeconds() 秒を取得する(現地時間) (0 ~ 59)
getMilliseconds() ミリ秒を取得する(現地時間) (0 ~ 999)

詳しくは以下サイトで説明されています。

JavaScriptプログラミング講座【日付/時間について】

では、実際にJavaScriptで時刻を取得してみましょう。

取得した時刻をコンソールに表示しています。ここで注意が必要なのが、月です。月のデータは、0~11の数値で、出力されるので+1をしなければなりません。

時刻を表示しよう

では、取得した時刻を、body内に表示してみましょう。今回はidがclockのdiv要素内に表示します。コードは以下のようになります。

まず、document.getElementById()でidがclockのdiv要素を取得します。そして取得した時刻をinnerHTMLを使ってdiv要素内に取得した時刻を表示するHTMLを追加します。でも、これを実際に実行して見るとわかると思いますがこれでは左上に小さく表示されてしまいます。皆さん自由に見た目をカスタマイズしてみてください。

document.getElementById()について

id名で要素を特定してその属性を操作してみる | JavaScript入門編

innerHTMLについて

HTML要素の中身を変えるinnerHTML | JavaScript入門編

時刻を更新しよう

さて、時刻はちゃんと表示されましたが、実行したときの時刻になったまま、時刻が変わりません。時刻を更新してないからです。では、時刻を更新してみましょう。

今回はsetTimeout()で繰り返すので、時刻を取得して表示するプログラムを関数にします。そして、問題の繰り返す時間ですが、1秒毎に繰り返していくと処理速度によっては少しずつずれていって1秒飛ばしてしまうというようなことが起きてしまいます。なので、1000ミリ秒から現在時刻のミリ秒を引いて次の秒になるまでの時間待って時刻を更新することによってズレをなくしています。

setTimeout()について

JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン

デモ

 

ダウンロード

ここから、プログラムをダウンロードできます。

デジタル時計.zip

まとめ

今回は、JavaScript(とHTML)でデジタル時計を作ってみました。今回の内容が理解できれば、JavaScriptはだいぶできていると思います。また、今回ではJavaScriptの基本的な機能をほぼ使っているので、わからないと思っている人でも調べながら理解していけばJavaScriptがだいぶ得意になると思います。まずは、❝習うより慣れろ❞です。いろんなプログラムに触れながら覚えていくといいと思います。次回は、アナログ時計を作ってみたいと思います。わからないことがあったら是非コメントください。では、さようなら!