書きたいことはあるのに、もう週末にゃ……
残り時間が少なく、高コストの記事を書こうとするのは危険だと判断するにゃ……
今週も雑プログラムで繋ぐにゃ……
ほんと頭が悪いクズだにゃ……

今回やることにゃ

なでしこで、「にゃーん」を左右に往復させるにゃ。

プログラムにゃ

往復にゃーん (プログラム貯蔵庫)

簡易エディタや貯蔵庫の編集画面では動いたのに、貯蔵庫の「プログラムを実行」や「アプリ」では動かなかったにゃ。
後者では、作った枠の大きさが最低限になってしまうようだにゃ。
もう面倒だから対策はしないにゃ。
ごめんにゃ。
実行する際はプログラムを簡易エディタなどにコピペするか、枠の大きさを開発者ツールなどでいじってにゃ。

ポイントにゃ

パラメータを用意するにゃ

周期ミリ秒は3000。

動作の仕方を決めるパラメータを用意するにゃ。
今回は、何ミリ秒で1往復するかの設定のみだにゃ。

画面の部品を用意するにゃ

外枠は「DIV」のDOM部品作成。
それにDOM親要素設定。
「にゃーん」のラベル作成。
それに{
  "文字サイズ": "300%",
  "grid-column": "2",
}をDOMスタイル一括設定。
外枠の「ボックス表示」に「grid」をDOMスタイル設定。

まず、「にゃーん」が中を往復するための枠となる部品を作るにゃ。
次に、「にゃーん」本体を作り、文字の大きさの設定をするにゃ。

また、枠と「にゃーん」に往復させる準備をするにゃ。
今回は、

1. 3列からなるグリッドを作る

2. 「にゃーん」をその真ん中の列に配置する

3. 左右の列の幅を調整する

という方法で「にゃーん」を動かすにゃ。

「にゃーん」を動かすにゃ

開始時刻はシステム時間ミリ秒。
●位置更新とは
  システム時間ミリ秒から開始時刻を引く。
  それを周期ミリ秒で割って360を掛けてラジアン変換。
  それのSINに1を足す。
  定数の位置はそれ。
  外枠の「grid-template-columns」に「{2-位置}fr auto {位置}fr」をDOMスタイル設定。
  {関数}位置更新を画面更新時実行。
ここまで。
{関数}位置更新を画面更新時実行。

まず、実行を開始した時刻を記録するにゃ。
フレームごとに、その時刻を基準に実行を開始してからの時間を求めるにゃ。
その時間を周期で割るなどの計算を行い、正弦 (sin) を 0～2 で求めるにゃ。
(最終的に割合として用いるので、-1～1 では扱いにくいが、0～1 にはしなくていいにゃ)
それに基づき、グリッドの左右の列の幅を調整することにより、中央の「にゃーん」を動かすにゃ。

おわりににゃ

にゃーん