01.カレンダー時計をつくる

プログラミング

フロントエンド言語(HTML/CSS/JavaScript)のアウトプット練習帳です。今回は「和暦表記のカレンダー時計」を作ります。

1. 時計の動きを確認する

See the Pen
Japanese Clock
by design1096 (@design1096)
on CodePen.


上記の「Result」画面に、カレンダー時計が表示されています。ポイントとなるのは、和暦(元号)の表示方法と、現在時刻(画面初期表示時)からのタイマー形式での時計表示方法です。

2. Google Fontsを使う(CSS)

まず、CSSについて。Google Fonts(Google社のWebフォントサービス)を使いました。日本語も9種類と数は少ないですが、提供されています。詳細は「Google Fonts + 日本語」のサイトをご覧ください。
Noto Sans JP今回は「Noto Sans JP」を使っています。時計では、日本語は漢字しか使っていないので違いが分かりにくいですが、無料で使用出来るので試してみました。

3. 和暦(元号)表記を指定する(JavaScript)

和暦(元号)表記には、Intl.DateTimeFormatオブジェクトを使用しました。
let date = new Intl.DateTimeFormat([‘ja-JP-u-ca-japanese’], options).format(now);
第一引数の「ja-JP-u-ca-japanese」で和暦(元号)表記を指定し、第二引数の定数optionsで書式をカスタマイズしています。optionsのカスタマイズ方法は、こちらのサイト「Intl.DateTimeFormat」に複数の実例が記載されています。

4. タイマー形式で表示する(JavaScript)

タイマー形式の表示には、setInterval()メソッドを使用しました。
let timerID = setInterval(timer, 500);
第一引数の関数(アロー関数timer)が、ミリ秒(1/1000秒)単位で指定した第二引数の時間毎に実行されることを意味します。「1000」ではなく「500」を指定することで、時間のズレを軽減しています。詳しくはこちらのサイト「WindowOrWorkerGlobalScope.setInterval()」でご確認ください。

時計は様々な表示方法が可能かつ実用性もあるので、楽しくアウトプットが出来ると思います。


【参考サイト】
JavaScriptが令和に対応。Intl.DateTimeFormatで日付を和暦(元号)表記に変換する
JavaScriptで時刻の二桁目をゼロ埋めする

Photo by Dean Pugh on Unsplash

amiko
編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。プログラマーとしてもお仕事をしています。好きなことは、読書、音楽(主にジャズ)、旅行。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください