なでしこさんで「砂」時計

今週はほぼ毎日 Qiita の投稿を行い、無事 Qiita Tech Festa 2026 の必要条件である 20 記事を達成した。
(審査で落ちる可能性がなくはないので、十分条件ではない)
しかし、今週も note は書けなかった。
いつも通り雑プログラムで繋ぐよ。今週も文字シリーズ……とはちょっと違うなこれ。

今回やったこと

なでしこで、『「砂」時計』を作った。

これは、「砂」という文字を使って時刻を表現する時計である。
表示形式を検討した結果、簡単にできそうな2進数を使うことにした。

プログラム

「砂」時計 (プログラム貯蔵庫)

ポイント

画面の用意

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
時刻表示は空のラベル作成。

時刻表示用のラベルを用意し、中央に配置する。

「砂」を用いた2進数に変換する関数の用意

●(VをDで)砂表現とは
  Vの二進をDでゼロ埋め。
  それの「0」を「□」に置換。
  それの「1」を「砂」に置換。
  それを戻す。
ここまで。

与えられた数値を2進数にして指定の桁数まで伸ばし、文字を置換することで、「砂」を用いた表現にする。

時刻の表示

●更新とは
  定数の時刻は今を「:」で区切る。
  時刻表示に「{時刻@0を5で砂表現}：{時刻@1を6で砂表現}：{時刻@2を6で砂表現}」をテキスト設定。

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

更新。

毎フレーム、「今」で現在時刻を取得し、「砂」を用いた表現に変換して表示する。

おわりに

なでしこで、『「砂」時計』を実装できた。
2進数表示の時計は既にあるし、砂時計とは全く関係ない。
しかもプログラムが短い。
にゃーん。