More than 5 years have passed since last update.

おてがる！JavaScriptでシンプルなデジタル時計をつくってみよう(Webフォント使用/サイズ自動調整)

Last updated at 2016-04-02Posted at 2016-04-01

#はじめに
ふだんはhtmlをほとんどさわらないのですが、簡単なデモを作る機会があったので、ブラウザで動作するデスクトップクロックのコードを書いてみました。
新人プログラマ応援というタグを見つけたので、いつもはコメントを書かない自分への戒めも兼ねてかなり細かくコメントをつけてみました。
これからJavaScriptを書こうとしている方々へのわずかな参考にでもなれば幸いですが、わかりづらいところや間違いなどあればすみません。

(4/2追記)ご指摘いただきまして、表記ゆれやソースコードの一部を修正、および文章の体裁を少しばかり整えました。ありがとうございました。var宣言忘れるとかなにやってんだ自分…orz

#とりあえず使ってみる
下記のHTML,CSS,JavaScriptのコードをそれぞれ
index.html
style.css
clock.js
の三つのファイルに保存し、同じフォルダ(ディレクトリ)に置いてください。
index.htmlをお手持ちのブラウザで開くと時計が表示されます。

#HTML

##コード

index.html

<!DOCTYPE html>
<html>

<head>
	<!-- 文字コードの宣言 -->
	<meta charset="UTF-8">
	<!-- ページのタイトル(ブラウザのタイトルバーに表示) -->
	<title>jsClock-simple</title>
	<!-- スタイルシート(CSS)読み込み -->
	<link rel="stylesheet" href="./style.css">
	<!-- JavaScript読み込み -->
	<script src="./clock.js"></script>
</head>

<body>
	<!-- 時計枠 -->
	<div id="clock_frame">
		<!-- 日付部分 -->
		<span id="clock_date"></span>
		<!-- 時刻部分 -->
		<span id="clock_time"></span>
	</div>
</body>

</html>

##ポイント
###構成

<head>~</head> : ヘッダ
このデジタル時計を作るうえで最低限必要となるCSSとJavaScriptの各ファイルを紐付けています。
また、必須である<title>要素と<meta charset="UTF-8">のメタ要素も内包させています。(コメント参照)
<body>~</body> : 本体
- <div id="clock_frame">~</div> : 時計の枠組み(フレーム)
  - <span id="clock_date">~</span> : 日付文字列
  - <span id="clock_time">~</span> : 時刻文字列

###改行タグの要不要

下記のCSSにおいて、spanをブロックレベル要素として指定、かつfloatしているため、日付と時刻は2段で表示されます。
もしインライン要素のままだと「文章」扱いとなるので、日付と時刻を改行させるにはこれらふたつのspanのあいだに<br>が必要となります。

#CSS

##コード

style.css

/* Google Webフォントを利用設定するCSSをインポート */
@import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps);

/* body要素(全体) */
body
{
	/* 文字色を白に */
	color: white;
	/* 背景色を黒に */
	background-color: black;
}

/* id="clock_frame" のdiv要素 */
div#clock_frame
{
	/* 横幅を親要素であるbodyの100%(同じ幅)にする */
	width: 100%;
}

/* span要素のデフォルト */
span
{
	/* 本来はインライン要素であるspanをブロック要素として扱う */
	display: block;
	/* ここでは親要素であるdivの内部で右に寄せて配置させる */
	float: right;
	/* 横幅を親要素であるdivの85%にする */
	width: 85%;
	/* フォントの種類を一番上で指定したGoogle Webフォントに設定する */
	font-family: 'Oleo Script Swash Caps', cursive;
}

/* id="clock_date" のspan要素 */
span#clock_date
{
	/* この要素の中におけるテキストを右詰めにする デフォルト値のtext-align:leftを上書き */
	text-align: right;
	/* フォントの大きさを親要素であるdivで設定されたサイズ(px)の0.5倍にする */
	font-size: 0.5em;
	/* 右のパディングの幅を親要素であるdivで設定されたフォントサイズ(px)の0.5倍にする */
	padding-right: 0.5em;
}

/* id="clock_time" のspan要素 */
span#clock_time
{
	/* フォントの大きさを親要素であるdivで設定されたサイズ(px)の2倍にする */
	font-size: 2em;
}

##ポイント
###プロポーショナルフォント

プロポーショナルフォント(文字によって幅が違う)を利用しているため、時刻によっては時刻文字列の幅が変化し、すべて右詰めのままだと秒が進むにつれて時刻表示部分が左右に揺れてしまいます。
(例: 1時11分11秒は短いが、23時58分50秒などは長い、など)
時刻の枠は右に寄せつつ(float:right)、時刻文字列そのものは左詰めとする(text-align:left)ことでこの現象を回避することができます。
ただしはじめからすべて左詰めで作成したい場合、および等幅フォント利用の場合は考慮の必要はありません。

###Google Web Fonts

すこしおしゃれに見せたかったのでGoogle Webフォントを使ってみました。
使い方はこちら(英語ページ)を参照。
WebフォントはCSSにおいては通常@font-faceでいろいろと設定するのですが、Google Webフォントにおいては用意されたCSSを読み込むだけですぐに使うことができます。
そのため、単に外部ファイルを読み込む@importを利用します。

###div

divのフォントサイズははじめは指定されていませんが、あとからJavaScriptにより動的に設定されます。

###span

spanはdisplay:blockによりブロック要素にしていますが、実際の挙動ではこれを記述しなくても表示は変わりません。
(参考:[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方)
本来はfloat:rightを効かせてspan#clock_dateとspan#clock_timeを画面の右に寄せるためです。
フォントサイズ指定は、「親要素であるdivのフォントサイズの何倍のサイズか」といった指定のできる"em"を使っています。
例: divが20pxでspanが0.7emのとき -> spanの実際のフォントサイズは14px相当に

#JavaScript

##コード

clock.js

// 時計のメインとなる関数
function clock()
{
	// 曜日を表す各文字列の配列
	var weeks = new Array("Sun","Mon","Thu","Wed","Thr","Fri","Sat");
	// 現在日時を表すインスタンスを取得
	var now = new Date();
	// 年
	var y = now.getFullYear();
	// 月 0~11で取得されるので実際の月は+1したものとなる
	var mo = now.getMonth() + 1;
	// 日
	var d = now.getDate();
	// 曜日 0~6で日曜始まりで取得されるのでweeks配列のインデックスとして指定する
	var w = weeks[now.getDay()];
	// 時
	var h = now.getHours();
	// 分
	var mi = now.getMinutes();
	// 秒
	var s = now.getSeconds();

	// 日付時刻文字列のなかで常に2ケタにしておきたい部分はここで処理
	if (mo < 10) mo = "0" + mo;
	if (d < 10) d = "0" + d;
	if (mi < 10) mi = "0" + mi;
	if (s < 10) s = "0" + s;

	//　HTML: <span id="clock_date">(ココの日付文字列を書き換え)</span>
	document.getElementById("clock_date").innerHTML =  y + "/" + mo + "/" + d + " (" + w + ")";
	//　HTML: <span id="clock_time">(ココの時刻文字列を書き換え)</span>
	document.getElementById("clock_time").innerHTML = h + ":" + mi + ":" + s;
	//　HTML: <div id="clock_frame"> の内部要素のフォントサイズをウインドウサイズの10分の1ピクセルに設定
	document.getElementById("clock_frame").style.fontSize =  window.innerWidth / 10 + "px";
}

// 上記のclock関数を1000ミリ秒ごと(毎秒)に実行する
setInterval(clock, 1000);

##ポイント

###割り込み関数setInterval()

一番最後のsetInterval()は割り込みの関数で、1000ミリ秒ごとに指定されたコールバック関数(ここでは下記のclock())を呼び出します。

###自分で作る関数clock()

####new Date()
clock()は上記のとおりsetInterval()によって毎秒実行されます。
そのたびに内部でnew Date()することでその瞬間の日付時刻情報をもったインスタンスが作成され、ここから数値を引き出し文字列に加工しています。

####document.getElementById(指定ID名).innerHTML
指定ID名のついた要素で囲まれたhtmlを読み書きできるものです。
ここでは日付と時刻を示す文字列をそれぞれ毎秒更新することで数値を進めています。

####document.getElementById(指定ID名).style.fontSize
指定ID名のついた要素のスタイルシートのうち"font-size"を読み書きできるものです。
ここではwindow.innerWidthでウインドウの横幅のピクセル数を取得して10分の1にし、その値をhtmlの<div id="clock_frame">内のフォントサイズとして設定しています。

divのフォントサイズが変化すると、連動して
日付<span id="clock_date">ではその0.5倍のフォントサイズ(CSSで0.5emと指定)に
時刻<span id="clock_time">ではその2倍のフォントサイズ(CSSで2emと指定)に
それぞれ変化します。

#サンプルページ

サンプル (GitHub Pages)

こんな感じです！
ウインドウの横幅を変えたり、スマホやタブレットで見たりしてもフォントの大きさがちょうど良い具合に自動で調整されます。
とても簡単なので、適当にコードを書きかえてみたりしてオリジナルクロックをつくってみてくださいね〜〜

注釈
このページのコードは標記のデジタル時計が最低限作れるよう極力簡潔に書いており、Webのフロントエンド開発において必ずしも適切でないと思われる点がいくつかありますがご了承ください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up