概ね満足出来る仕上がりになったので出振るい,手定めを済ませた。
- 一部舞覧でスクロール完了の正しい判定が出来ていなかった問題を修正。
- 下見内で拡縮ボタンが消えてしまう問題などを修正。
- 動的に変更された高さを認識しない問題に暫定対応。
- スクロール毎の処理を軽量化。
- 再描出後に縮小ボタンを表示するようにした。
- 周辺の交度整理。
resize: vertical
}{高過ぎず}...描写欄の高さの問題をきっかけに自動リサイズ機能と字数計の実装が出来た。ほか装体調整など。
旧輪郭選り手では,描写欄の出放りの高さを新規描出フォームで10em,再描出フォームで15emとしていたが,新輪郭選り手ではたまたま15emで統一されていた(画面撮り)。10emでは長文が書きにくいのでこれはこれでいいかと思ったが,やはり新規描出フォームは一言だけや知名だけの描出に使うことも多いためこの高さでは邪魔臭い。
ここで,予てからぼんやり検討していた自動リサイズ機能の導入を考えた。一応 resize: vertical
は設定してあるが,万能ではない。10emから20em程度までの範囲で,改行毎に自動リサイズさせる。導入予定の字数計では字数情報が必要になるため,一緒に行数も保持させることにした。
実際に試してみると,1em刻みでも2em刻みでも違和感があったため,10emから19emまで1.5em刻みでリサイズするようにした(画面撮り:初期状態,最大自動リサイズ)。19emだと個人機でも低過ぎず高過ぎず,スマートフォンの縦向きで柔品キーボードを表示させてもちょうど収まる程度の高さになる。折り返しの多い1行もありうるため,厳密にするなら字数も考えるべきだが,とりあえずはこれで様子を見ることにした。
再描出フォームに関しては,さほど目立つものでもなく,描写部の高さに合わせて描写欄が開くようになっている現仕様が悪くないので,現状維持で様子見しておく。
字数・行数の保持が出来たことで字数計も難無く実装出来た。描出ボタンか時印の左側に邪魔にならないように表示させてみた(字数計の様子)。
下見の字数と分けようかと思っていたが,下見を開いている時は下見の字数に置換すれば十分であることに気付いた。一応,見分けが付くように頭に「→」を付けるようにした。
これも,厳密に考えると特殊な文字符号などを考慮する必要があるが,キリがないのでとりあえず .length
による概算でよしとしておく。
字数計は,地味ながら意外に需要があることを市場調査を通して知った。自分でもたまに欲しくなることがあった。
radial-gradient()
}{作れた}{理想的な陰影}{簡単なようで}{実験していた}{画段}{色々な場面}...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()
を使って中央に丸みのある陰影を試したが,交度部区などに重なった時に視認出来なくなるためやめた。
諸場舞覧などスクロールバーの出ない舞覧でスクロール可能であることが非常に分かりにくいという用合い上の欠陥がこれで解消した。スクロールバーの出る舞覧でもより直感的にスクロール可能であることが分かるようになり,効果は大きい。
overflow: hidden
}{進捗記録}{希哲16年3月2日の開発}{希哲16年3月2日の進捗}{希哲16年3月2日}{position: relative
}{overflow: clip
}{調整していく}{揃わなくなる}{縦位置}...描写内 <code>
,<kbd>
の装体調整で終了。これまで適当にしていた高さと垂直位置を調整した。
特に,輪結の下線と枠が被っているのが気になっていたので直したかったが,意外に正確な調整が難しく,かなり試行錯誤した。
最終的に,<code>
と <kbd>
は position: relative;
display: inline-block
にし,下線との隙間は bottom
で調整することにした。あとは height
,line-height
,padding
で微調整を繰り返し,ようやくどの舞覧で見ても大きな問題はないようになった。
舞覧毎に僅かな癖は残るが,だいぶマシになったのでとりあえずここで区切る。課題は残ったので暇をみてまた調整していく。
<a>
の padding-bottom
での調整は断念。ルビとの相性が悪く,行間も現状の line-height: 1.8
は変えにくい。silver
}{dimgray
}{black
}{希哲16年3月1日}{進捗記録}{希哲16年3月1日の開発}{希哲16年3月1日の進捗}{bottom
}{救われた}{気になって}...前次部区装体では高さが固定されているため,ルビが含まれると下にはみだしていたが,昨日の装体調整後のパンくず記法でも似た問題があることに気付いた(区切り記号が上にずれる)。
前次部区に関しては Dex でルビ記法の有無を判定して調整するかと考えていたが,ここで,両方とも position: absolute
と bottom
で揃えればいいことに気付き,早速修正した。なんとなく気になって始めたパンくず部区装体調整に救われた。
ついでに,パンくず部区の中間区切り記号の色を dimgray
から black
に戻した(実装初期にも同じことをしていた:1月15日1歩)。表示環境によっては末尾の silver
と見分けにくい。線の太さなどを変えてみてもやはりしっくり来ない。