{踏み切れた}{`radial-gradient()`}{作れた}{理想的な陰影}{簡単なようで}{実験していた}{画段}{色々な場面}{稀に起こる}{外していた}...=}(203)

{希哲16年3月28日の開発 K#F85E/A-E74C-5B9D}

KNEST 隠し実装の再開金風といった出来事中断していた昨年9月以来,初めての Aejs出振るい終えた最初微調整程度でとりあえず出振るい目指すつもりだったが,あっという間下見機能陰影付きスクロール形になり,一応の新輪郭選り手」が出来た

外観操作性ともに洗練された新輪郭選り手日々の描出がより快適になることはもちろん下見機能手定め領当て調整大幅に効率化することによりデラング整備加速するだろう。そもそも Aejs出振るい出来なかったことで前縁関して出来ること限られていたため,その障害無くなったことが大きい

新輪郭選り手

今回出振るい以前を「旧輪郭選り手」,以後を「新輪郭選り手」と仮に呼んでいる

新輪郭選り手では,@oln.bld詰め込んでいた選り手関連機能@oln.edr_dln.bld@oln.edr_knm.bld整理し,複雑な機能見通し良く管理出来るようになった。これにより,保守性もちろん全体として見触れ大きく改善した。

まず,これまで知名選り手角丸長方形で,描写選り手吹き描き合わせた眼形表示していたが,両方開いている場合は「合体選り手」として眼形になるようにした画面撮り新規描出フォーム再描出フォーム旧輪郭選り手では単独開いた場合外観変わらず調和感欠けていた画面撮り新規描出フォーム再描出フォーム挙動もより連動的になり,自然になった。

描写選り手右脇適当に付けていた取り消しボタンも,合体選り手では知名選り手描写選り手同時に閉じる機能分かりやすくなり,見た目洗練された

描出ボタン22日9歩方針まとめ目障りにならないデザイン保ちつつ初心者にも分かりやすいものに出来た

挙動面では,違了処理整備若干表示タイミングなどに出来ていたぎこちなさ解消出来た外していた選り手溶暗溶明動き付け復活させ,滑らか見えるようになった。

まだ様子見必要だが,違了処理整備のあたりから出来ていた不具合解消期待出来る。特に描写選り手二重いたり,デラング記法消去して再描出してしまう不具合稀に起こるのが気になっていた

今回目玉となった下見機能は,思わぬ形あっさりまとまった感触く,色々な場面活躍してくれるだろう。

陰影付きスクロール

26日14歩出来た陰影付きスクロール同時に出振るいした画面撮り下見機能にも有用気付いたことで実装踏み切れた

背景色溶暗していく「溶暗付きスクロール」として考え始めたのは昨年3月11日9歩だったが,空行続くこともあり閲覧性必要な描写部には不向き気付いてからは,薄い陰影付ける方向実験していた

これも簡単なようで調整難しかった陰影がかかる高さ濃さ画段微妙な緩急調整繰り返し,さりげなく,かつ分かりやすい理想的な陰影ようやく作れた一時linear-gradient() ではなく radial-gradient() を使って中央丸みのある陰影試したが,交度部区などに重なった時に視認出来なくなるためやめた

諸場舞覧などスクロールバー出ない舞覧スクロール可能であることが非常に分かりにくいという用合い上欠陥がこれで解消したスクロールバーの出る舞覧でもより直感的スクロール可能であることが分かるようになり,効果大きい

{希哲16年3月22日の開発}{希哲16年3月22日の進捗}{タブ式}{`#BBEEBB`}{使わずに}{縦に並べる}{下見表示}{目障りにならない}{右端}{最小限の変更}...=}(76)

{希哲16年3月22日9歩 K#F85E/A-E74C-3F9D}

{色見本}{色見本記法}{進捗記録}{希哲16年2月21日}{略す}{希哲16年2月21日の開発}{希哲16年2月21日の進捗}{まとめたい}{同時指定}{表記し分ける}...=}(52)

{希哲16年2月21日13歩 K#F85E/A-E74C-37C1}

進捗時限記録中略

色見本記法と,タグ記法にも応用出来る広義の色記法」について少し進展があったのでまとめて終了

色記法に関しては,背景色前景色をどう表記し分けるかが課題だったが,色見本記法でどうせ %使うのであれば,同時指定[fg]%[bg] として,それぞれ [fg]%%[bg]書けるようにするのが良いかもしれない。

さらに,[fg]%[fg]してもいいことにし,CSS との整合性考え ;区切り文字として使えるようにすれば,%[bg];[fg] のようにも書ける色見本%[bg]%書けるとすれば,%[bg];[fg]%短縮形ともみなせる

この考え方なら,十分な柔軟性明示性持たせられそうだ。以下のような記法概ね整合的解釈出来る。

%black%    <!-- 小さな色見本を表示 -->
%%`black`  <!-- 指定内容の前に色見本を表示 -->
`black`%%  <!-- 指定内容の後に色見本を表示 -->

%%`black;white`%% <!-- 大きな色見本を交度付きで表示 -->

%%black;white
白文字に黒背景
%%

<{white%black}>白文字に黒背景</>
<{white;%black}>白文字に黒背景</>
<{%black;white}>白文字に黒背景</>
<{black}>黒文字</>
<{black%}>黒文字</>
<{%black}>黒背景</>

ただ,まだ確信には至っていない。もう少し煮詰める必要がある

色見本記法がどれだけ必要とされるかは分からないが,デライト装体調整有用なことは間違いないので出来るだけ早くまとめたい

=}
{進捗記録}{希哲16年2月15日10歩}{検討を続ける}{閉じタグ}{区切り記号}{スペース区切り}{希哲16年2月15日の開発}{希哲16年2月15日の進捗}{希哲16年2月15日の進捗時限}{希哲16年2月15日}...=}(40)

{希哲16年2月15日12歩 K#F85E/A-E74C-3C2C}

進捗時限記録中略

10歩検討関連して,タグ記法略記法前景色背景色をどう書き分けるかについて少し検討して終了

廃案となった色記法では,順序はともかく)%%black white%% のようにスペース区切りがいいかと思っていたが,これだとどちらか一方だけを指定したい時に困る。どちらを省略したか分かりやすい区切り記号欲しい

<{black:white}> では直感的にどちらがどちらだか分かりにくい。単純に一つだけ指定した場合は前景色にしたいことを考えると,<{前景色/背景色}> がいいかもしれない(ただ,後で考えると閉じタグ記号紛らわしいか)

<{前景色<背景色}> のように <> を使えれば関係性分かりやす順序にも自由度持たせられるが,そもそもタグ記法で使う記号なので美しくはない

もう少し検討を続ける

=}
{進捗記録}{文字装飾記法}{`<small>`}{置き換えられる}{補足部区}{注意部区}{一段階目}{希哲16年1月24日4歩}{強調度}{注意記法}...=}(73)

{希哲16年1月24日16歩 K#F85E/A-E74C-1FEF}

注意記法補足記法についての再検討終了

4歩を以下のように修正した。強調度に応じて三段階となる補足記法同様

!--
小さな注意書き
--

!!--
通常の注意書き
--

!!!--
重要な注意書き
--

装体は,23日2歩下敷きに,境界線背景色無しで font-size: 0.8em 程度にした小書きのものを加える。この場合,一段階目注意部区補足部区装体的に区別出来なくなるが,そもそも小さな注意書き補足違い曖昧なものなので自然といえば自然だ。


そもそも注意書き目立つように書かれるものばかりではない,というところに引っかかっていた

二段階三段階かは迷ったが,二段階にして後から追加出来なくなるよりは,三段階にして一段階目無用の長物になる後悔の方が小さい


当初,記号の数で「重要度」を表すことにしていたが,内容重要性装体目立たせ方は必ずしも一致しないので,「強調度」程度の意味合いにしておくべきかもしれない。


ダッシュ記法への応用考えた

例えばデラング文書では,目次項目末尾<small>----輪郭記法</small> などと書いているが,これを ?----輪郭記法置き換えられるかもしれない。

23日12歩書いた小書き括弧記法を使わずに文字を小さくしたいと思うことはたまにあった」とはこのことだったが,あくまでも文字装飾記法の一種である文字サイズ記法フォント記法<small> 相当の表現完全に代替は出来ない。

=}
{色見本}{色見本記法}{進捗記録}{文字装飾記法}{簡易的}{直感的に使える}{出揃った}{希哲16年1月23日12歩}{色記法}{希哲16年1月23日の進捗時限}...=}(36)

{希哲16年1月23日16歩 K#F85E/A-E74C-79E5}

進捗時限記録中略

12歩で概ね文字装飾記法出揃ったが,ここまで来たら「色記法」も欲しくなってきたので急遽検討して終了

流石にもう直感的に使える記号残っていないだろうと思ったが,% がまた悪くない原色割合とその組み合わせだ。

例えば,%red%赤い文字%%%#FFFFFF%白い文字%% という表現が出来るかもしれない。%white:red%白い背景に赤い文字%% というように背景色指定出来るようにすれば,簡易的色見本も出来る。装体調整について考えることはく,色見本記法考えていたので丁度良い

{`black`}{進捗記録}{`WhiteSmoke`}{`gray`}{デライト}{希哲15年3月8日の開発}{th 要素}{td 要素}{border-collapse: collapse}{装体調整}...=}(23)

{希哲15年3月8日6歩 K#F85E/A-E74C-68B1}

デライト装体調整

途中で終了。

ほとんど使わなかったこともあり描写内 table 要素装体適当過ぎるため軽く修正

border-collapse: collapse を設定,td 要素背景色WhiteSmoke に,各セルの境界線1pxtd 要素grayth 要素black。th 要素はもともと太字になっている。

これでそれなりに見えるようになった。

=}
{デラング}{進捗記録}{`WhiteSmoke`}{`gray`}{引用部区}{デライト}{稲妻形引用部区}{希哲15年3月8日の開発}{洒落た}{linear-gradient()}...=}(33)

{希哲15年3月8日5歩 K#F85E/A-E74C-8287}

デライト装体調整

途中で終了。

引用部区の装体修正

これまでは適当なマージンgray で太い左境界線を付けただけの装体改良前)だったが,ぱっと見何を意味するのか分かりにくかった。

二重括点を使った装体もよく見られるが,特定言語文化依存した表現は避けたい。

そこで,左境界線を稲妻形にする装体を考案デラング引用記法とも調和する。

背景色WhiteSmoke にし,左境界線を linear-gradient() を使った方法で gray稲妻形にしてみると,だいぶ視認しやすくなり,洒落た感じになった(改良後)。

{背景色}

{}