なでしこさんで色見本
素材撮って、書こうと思っていたネタがあったのに、今週も致命的にクソ頭が悪いので、作業から逃げ続けて書けず……
仕方ないので今週もなでしこで適当なプログラムを書いて繋ぐか……
……と思ったが、なんとクソ頭がクソ致命的にクソ悪すぎて、繋げなかった。
23時 (残り1時間) の時点で、プログラムは完成し、記事もあとは最終ブロックの解説を書くくらいのところまでできていた。
しかし、このクズ、クソ致命的にクソ頭がクソ悪いので、このタイミングで油断して横になりやがった。
理性ではダメだ、事故るリスクが高い、と思いつつ、それでも衝動を抑えられず……
そして失格が確定した。
復帰し、あと15分くらいあるなと思い、気合を入れて記事の執筆を再開しようとした。
しかし、時計をよく見ると、もう23時59分。
仕方ない、こうなったら記事を一旦公開してしまって、後から修正すればいいか……
……と思って焦って公開を試みたが、公開操作を完了する前に無念のタイムアップ……
これまで100週ちょっと連続だったはずだけど、これにて一旦終了か。あーあ。
今回やること
赤・緑・青のそれぞれの要素の値を指定して、それに対応する色を表示する。
プログラム
なでしこさんで色見本 (なでしこ3貯蔵庫)
実装のポイント
「DIV」のDOM部品作成してDOM親要素設定。
それに{
display: "grid",
gridTemplateColumns: "auto",
width: "100%",
maxWidth: "40em",
}をDOMスタイル一括設定。
色表示は空のラベル作成。
それに{
border: "1px solid black",
boxSizing: "border-box",
height: "3em",
backgroundColor: "#ffffff",
marginBottom: "1em",
}をDOMスタイル一括設定。
「DIV」のDOM部品作成してDOM親要素設定。
それに{
display: "grid",
gridTemplateColumns: "auto 1fr 6em",
alignItems: "center",
}をDOMスタイル一括設定。「色を表示する場所」と「操作する場所を入れる枠」を入れる枠
色を表示する場所
操作する場所を入れる枠
を用意する。
色情報は{赤:255, 緑:255, 青:255}。
●(要素から)色更新とは
定数の要素情報は要素のDOMポケット取得。
定数の要素値は要素のDOMテキスト取得して整数変換。
もし、論理NOT(NAN判定(要素値))ならば
定数の補正後値は要素値の0から255までのCLAMP。
定数のパートナーは要素情報$パートナーIDのDOM要素ID取得。
パートナーに補正後値をDOMテキスト設定。
色情報[要素情報$要素名]は補正後値。
色表示の「背景色」にRGB(色情報$赤, 色情報$緑, 色情報$青)をDOMスタイル設定。
ここまで。
ここまで。表示する色と、色を更新する処理を用意する。
操作された際、色を更新するだけでなく、同じ要素に対応するバーと入力欄の値を相互に同期させる。
不正な値が混ざらないよう、チェックや補正を行っている。
色情報の辞書キー列挙して反復
対象のラベル作成。
要素バーは[0,255,255]の値指定バー作成。
要素欄は「255」のエディタ作成。
それの「type」に「number」をDOM属性設定。
それの「min」に「0」をDOM属性設定。
それの「max」に「255」をDOM属性設定。
要素バーIDは要素バーの「id」をDOM属性取得。
要素欄IDは要素欄の「id」をDOM属性取得。
要素バーに{
要素名: 対象,
パートナーID: 要素欄ID,
}をDOMポケット設定。
要素欄に{
要素名: 対象,
パートナーID: 要素バーID,
}をDOMポケット設定。
要素バーの「input」がDOMイベント発火した時には
対象から色更新。
ここまで。
要素欄の「input」がDOMイベント発火した時には
対象から色更新。
ここまで。
ここまで。色の各要素について、操作用の部品を用意する。
number の入力欄を作成する命令は標準では無さそう (『フォーム作成』の一部としてならあるが、単独では無さそう) なので、『エディタ作成』命令で input 要素を作成し、『DOM属性設定』命令で type を切り替えた。
なでしこではJavaScriptと違ってローカル変数にはネストされた関数内からはアクセスできず、『DOMポケット設定』命令ではDOM要素をそのまま格納することはできないので、同期先のID (自動で振られるようである) を記録し、同期に使用することにした。
『変更時』命令で監視できるのはリアルタイム性が比較的低い change イベントであり、よりリアルタイム性が高い input イベントを監視できる命令は標準では無さそうだったので、『DOMイベント発火時』命令で直接指定して監視を行うようにした。
まとめ
なでしこで、色の各要素の値を指定してその色を表示するプログラムを作った。
しかし、記事の完成が近づいたところで油断して休んでしまい、結果週の終わりに間に合わず、約2年分の積み上げを台無しにする結果になってしまった。
「うさぎとかめ」のうさぎだなあ。
Q. これを機に、週streakチャレンジ辞める？
A. 将来またチャレンジしたくなったときに困らないよう、辞めないでおくよ
コメント