なでしこさんで回が回る回

今週は……何してたっけ？頭が悪くてよく覚えてないや……
とにかく、書こうと思うことは頭の中にけっこう溜まってきたのに、スケジューリングがクソ下手くそすぎて全然書けない。
今週も書けなかったという事実ははっきりある。
こうなると、まあいつも通り雑プログラムで繋ごうとなるが……何を書こう？雑プログラムを書くのにも何を書くか考えるコストがかかるんだよ……
比較的早い段階で1個思いついたが、あまり良くない気がするな……

そして、テレビを見ながら川柳を検出していく。
その中の一つがこれ。

「回」か……そうだ、「回」を回そう。
「回る回」だと短すぎて貯蔵庫のプログラム名に使えないが……「回が回る回」ならいけるはず。
文字を回すというのは前にもやった気がするが……うるせ～～～～～！！知らね～～～～～！！

今回やったこと

なでしこで、「回」を回す。

プログラム

回が回る回 (プログラム貯蔵庫)

ポイント

画面を用意する

外枠は「DIV」のDOM部品作成。
外枠にDOM親部品設定。
回ラベルは「回」のラベル作成。

外枠に{
  "幅": "20em",
  "高さ": "20em",
  "display": "inline-flex",
  "align-items": "center",
  "justify-content": "center",
}をDOMスタイル一括設定。

回ラベルに{
  "文字サイズ": "1500%",
}をDOMスタイル一括設定。

主役の「回」および、それが回るスペースを確保する。
「回」を回るスペースの中央に配置し、大きくする。

回を回す

●表示更新とは
  時間ミリ秒取得して1000で割った余りを1000で割る。
  回ラベルの「rotate」に「{それ}turn」をDOMスタイル設定。
  {関数}表示更新を画面更新時実行。
ここまで。

表示更新。

「表示更新」関数を定義し、「画面更新時実行」で繰り返し実行する。
「時間ミリ秒取得」で取得した時刻に基づいて「rotate」で回転の角度を設定し、1秒で1周するようにする。
角度の指定は、「1」で1周となる単位「turn」を用いた。

おわりに

なでしこで、回を回すことができた。

次は、CSS アニメーションを用いて、プログラムを書かずに回を回すのに挑戦したい。