なでしこさんで日付が変わるまでの残り時間を表示

今週は、ようやく枠審査をした。
各枠既に2～3本程度投入されており、中には6本も投入されている枠もあり、枠審査をサボり散らかしたツケとして一気にデキューの負荷がかかる。
とはいえ、note の記事を書くための作業は日付が変わる前にすればいいので、その影響は少ないはず。
にもかかわらず、今週も作業をしなかったのは完全に怠慢である。
ああ、頭が悪い。
その上、島村卯月だ櫻木真乃だなどと言い訳をして(？)、日曜も出かけて潰すことを決定。
ほんと頭悪いね。
まあ、とはいえ今週は Qiita の記事は早めに書く程度のかしこさはあったがな。

さて、というわけで今週も雑プログラムで繋ぐのが良さそうだが……何にしよう？
23時前に書ききって日付が変わる前に佐々木琴子を消化しておきたかったが、残念ながら頭が悪くて達成できず。
どんどん残り時間が減ってくる……そうだ、これにしよう。

今回やったこと

なでしこで、今日が終わるまでの残り時間を表示する。

現在時刻を「今」と「システム時間ミリ秒」を用いて取得し、それに基づいて残り時間を表示する。
それにはあまり関係ないが、日付も「今日」で取得して表示する。

プログラム

日付が変わるまでの残り時間を表示 (プログラム貯蔵庫)

ポイント

画面の用意

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
日付ラベルは「？年？月？日」のラベル作成。
「　終了まで」のラベル作成。
改行作成。
「あと　」のラベル作成。
時間ラベルは「??：??：??」のラベル作成。
それの「文字サイズ」に「200%」をDOMスタイル設定。
時間ミリ秒ラベルは「.???」のラベル作成。

各種情報を表示するラベルを用意する。
ミリ秒を除く残り時間を表示する部分は、文字を大きめにした。

情報の計算と表示

●表示更新とは
  定数の年月日は今日を「/」で区切る。
  定数の年は年月日@0を整数変換。
  定数の月は年月日@1を整数変換。
  定数の日は年月日@2を整数変換。
  日付ラベルに「{年}年{月}月{日}日」をテキスト設定。

「今日」で日付を取得し、「区切」で要素に分解する。
これはリーディングゼロを含みうる文字列なので、「整数変換」でリーディングゼロを省いてから表示に回す。

  定数の時分秒は今を「:」で区切る。
  定数の時は時分秒@0を整数変換。
  定数の分は時分秒@1を整数変換。
  定数の秒は時分秒@2を整数変換。
  定数の一日ミリ秒は24×60×60×1000。
  定数の経過時間は((時×60＋分)×60＋秒)×1000＋(システム時間ミリ秒を1000で割った余り)。
  定数の残り時間は一日ミリ秒から経過時間を引く。
  定数の残り時は残り時間を(60×60×1000)で割って切り捨て。
  残り時間を(60×1000)で割って切り捨て。
  定数の残り分はそれを60で割った余り。
  残り時間を1000で割って切り捨て。
  定数の残り秒はそれを60で割った余り。
  定数の残りミリ秒は残り時間を1000で割った余り。
  時間ラベルに「{残り時を2でゼロ埋め}：{残り分を2でゼロ埋め}：{残り秒を2でゼロ埋め}」をテキスト設定。
  時間ミリ秒ラベルに「.{残りミリ秒を3でゼロ埋め}」をテキスト設定。

「今」で現在時刻を取得し、日付と同様に要素に分解して整数に変換する。
これを「システム時間ミリ秒」の情報と組み合わせ、1日の中で何ミリ秒経ったかを計算する。これを定数「経過時間」とする。
1日のミリ秒数からこれを引くことで、今日あと何ミリ秒あるかがわかる。これを定数「残り時間」とする。

これが求まったら、これを時・分・秒・ミリ秒に分解し、「ゼロ埋」で桁数を固定して表示する。

  {関数}表示更新を画面更新時実行。
ここまで。

表示更新。

「画面更新時実行」を用いて、いい感じのタイミングで更新処理が自動で実行されるようにする。
最初の1回は、普通に関数を呼び出す。

おわりに

なでしこさんで、今日の残り時間を表示できた。
シンプルながら、刻一刻と減っていく残り時間を意識させられるかもしれない。