今回はJavascriptで時計を作ってみた。
Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。
ウェブ屋としてはHTMLと親和性も高いことから必然的に習得した技術の賜物である。
そこでJavascriptを少しでも短に感じれる様に定期的に何かプログラムを使って作品を作っていくことにする。
その第一弾はありがちだが時計を作成した。
Javascriptでデジタル時計を作成【.jsファイル】
今回はシンプルなデジタル時計を作成することにする。
(完成したイメージ)
必要な情報は「日付」と「時刻」だけだ。
シンプルなデジタル時計を作るために必要なファイルは3つ。
「.html」「.css」「.js」ファイルだけ。
これでブラウザ上に時計を出現させることが可能だ。
まずは時計に必要な関数をJavascriptで構成していく。
必要な情報は「年」「月」「日」「曜日」「時」「分」「秒」の7種類だ。
これらの変数を定義する。
変数の定義は「y＝年」や「d＝日」など分かりやすいもので良いと思う。
曜日に関しては配列にて格納する。
「Array(“Sun”,”Mon”,”Thu”,”Wed”,”Thr”,”Fri”,”Sat”);」
と言った感じにする。
次にイメージの様に月日や時間などを常に2桁(0を頭につける)表示させる。
最後はjavascriptの「document.getElementById」で変数を結合して表示させてやれば完了。
完成したjavascriptファイルはこんな感じで仕上がった。
「.js」ファイルの完成。
Javascriptでデジタル時計を作成【.cssファイル】
次に画面の調整役である「.css」ファイルの作成について。
ここからは「.html」ファイルと同時進行で調整していく。
記事なので別々の見出しで書くが、「.html」ファイルと同時進行で作成する。
まずはイメージと合わせるのであれば全体のカラーを決定する。
「body」タグにカラーと背景カラーを設定する。
その他にも画面の表示幅の設定や、文字のフォントなどを「.css」ファイルで指定する。
作成した「.css」ファイルはこちら。
「.css」ファイルは比較的簡単。
Javascriptでデジタル時計を作成【.htmlファイル】
最後に「.html」ファイルの設定。
と言ってもこれまでのjavascriptとcssの設定が完了していれば何もすることはない。
それぞれのファイルを「head」タグで読み込ませてお終い。
「.js」や「.css」ファイルの読み込みは「<link rel=””>」や「<script src=””>」を使用する。
また「body」タグではjavascriptで定義した関数を呼び出して表示させる。
javascriptで定義した関数は3つ。
(clock_date, clock_time, clock_frame)
これらを「.html」ファイルの「body」タグ内に記述して終了。
最後は同じフォルダに全てのファイルを配置して完成。
Javascriptでアナログの時計を作成【.jsファイル】
今度はアナログの時計を作成してみることにしよう。
目標イメージはこんな感じで作成する。
本物の時計はデジタルの方が高度な技術だが、Javascriptで時計を作成する場合アナログ時計の方が高度な技術が必要になる。
この難しさとは画像を使うことにある。
デジタルでは数字だけを取り扱うのでプログラミングの場合、より簡単なのだ。
だがアナログ時計では画像ファイルが必要になる。
この点を考慮した作りにしなければならない。
まずは「.js」ファイルから作成する。
いくつかやり方があるのだが、わたしはパターンとしてjavascriptに全てを投入した。
画像の定義をjavascriptで表示することにする。
(htmlやcssで画像を読み込むことは可能)
作成した「.js」ファイル。
画像のサイズに合わせて作成する必要がある。
よりリアルな時計を目指すのであれば指針の画像の横幅は狭い方が良い。
Javascriptでアナログの時計を作成【.cssファイルと.htmlファイル】
次に「.css」ファイルだがこちらは特に必要な項目はない。
センタリング用のタグを設定しただけだ。
「body」タグに「text-align」と「margin」で好みの指定値を施すだけ。
最後に「.html」ファイルだがこちらも特に必要な項目はない。
必要な項目と言えば、「head」タグ内で「.js」ファイルと「.css」ファイルのインポート。
あとは「canvas」タグの設定だろう。
「canvas」タグの縦横幅の設定はjavascriptで読み込む時計の基盤となる画像に合わせれば良い。
ほぼ全てをjavascriptに完結する形で今回はアナログ時計を作成した。
今回はデジタル時計とアナログ時計の両方の作成を紹介した。
個人的にはデジタル時計の方が遥かに簡単に作ることができる。
物理的な画像が必要ないのは大きい。
世の中全てデジタルなら簡単なのだが、、、
とは言えないのが人生である。
今日も良い1日を。
