{出振るい}{進捗記録}{分かる}{希哲16年2月15日24歩}{希哲16年2月9日の開発}{確信が持てなかった}{領当て}{ずらせない}{他要素}{空間的に}...=}(122)

{希哲16年2月9日15歩 K#F85E/E74C-ABAC}

進捗時限記録中略前後

デライト装体調整昨日7歩に関する整理終了

見出し段落よりも横幅両端0.5remずつ広げ区切り線<hr>段落よりも0.5remずつ狭めることにした見出しと区切り線装体・幅調整後

当初見出し下線区切り線見分けやすくするために,区切り線両端1emずつ狭める形にしかけたが,試しに出振るいしてみたこの形が想像以上しっくり来たので,基本方針として採用してしまうことにした。

文書構造視覚的にぐっと把握しやすくなった


段落に対して僅かに字上げするような見出し装体昔から気に入っていて,現状でも「はじめに」などのデライト文書<h2>1em<h3>0.5em字上げされている長らく更新していないため描写内見出しとは全体的に乖離している)月庭でどうしていたか忘れたが,特に理由がなければ似たような装体採用していたはずだ。

やはり,見出し直感的に把握しやすいのが大きな利点だが,描写内見出し採用出来なかった理由として,無駄な余白生じやすいという領当て上の問題大きかった。特に,諸場対応から強く意識するようになった幅狭領当てでは小さくない問題だった。

今回実験意外だったのは,全ての描写内見出し0.5remずらすだけでも十分な視覚効果得られたことだった。これなら,他の装体そのままに,見出し装体マージン削るだけで一応実現出来る。

そのうち領当て上の問題起きたとしても,幅狭領当てでは0.25emにするとか区切り線だけ調整するとか,調整やりよういくらでもあるので,基本方針としては問題ないだろう。


これだけ見出し分かりやすくなれば,区切り線短くする必要はないかとも考えたが,これはこれであった方がメリハリが付いて良い従来の他要素同じ長さだと,やはり直感的に区切りの大きさ把握しにくい

新装体なら,見出し見比べるまでもなく,見出し未満小さな区切りであることが分かる

空間的に見出しずらせない場合の備えにもなる。


昨日眠気が強い時間帯思い付いたのでこの新装体良さ確信が持てなかったが,認知機能低下している時に分かりやすい思ったのだから,分かりやすさに関しても間違いないだろう。

{進捗記録}{letter-spacing: 0.1em}{letter-spacing}{選り手}{交度}{知番}{希哲15年6月30日11歩}{見やすい}{複雑な表}{間延び}...=}(49)

{希哲15年6月30日10歩 K#F85E/E74C-5A0D}

一日一文の途中で,ふと描写選り手letter-spacing が気になり,調整してみた。

知名欄描写欄ともに letter-spacing: normal様子見することにした。これまでは letter-spacing: 0.1em が設定されていた。

一昨日表組み記法仕様検討で,半角全角混じりでは等幅フォントでも厳密に文字が揃わないことに気付いたが,この主な原因letter-spacing だった。全角1字に対して半角2字では1つ分の字間が余ってしまう。

CSS だけで簡単に解決する方法は無さそうなのでどうしようかと思っていたが,「日本はどう逆転するか」を書きながら選り手を眺めているうちに,意外字間が無くても良いかもしれないと思えてきた。

そもそも選り手では知番をはじめとして記号的半角文字列が並びがちになるため,これにいちいち字間が開くとかなり間延びして見える。間延びすれば当然行数も増え,全体把握しにくくなる。字間を無くしてみるとがぎゅっと凝縮されて意外と視認性は悪くない。縦に文字が揃いやすくなり,より整然として見える。

実は表組み記法仕様検討の際,少し複雑な表を作ろうとすると選り手横幅が足りないのではないかという気もしたが,字間が無ければこの問題も多少は軽減する。

交度部区ではもともと字間を開けないようにしていたが(たまたまそうなったのか,あえてそうしたのかは忘れたが,交度でもやはり横に間延びするのは問題),これと整合的になり,交度も書きやすくなるだろう。

知名欄も,少し長くなると横幅が足りなくなると感じていたため,同じ設定にしておいた。

そもそも編集欄にも字間を設定していたのは,その方が見やすいはずだという思い込みによるところが大きかったので,これに気付けたのは収穫だった。

=}
{開発}{デラング}{開発記録}{領当て}{scroll}{resize}{cornsilk}{希哲15年3月31日7歩}{窓間同期}{希哲15年3月30日}...=}(36)

{希哲15年3月30日の開発 K#F85E/E74C-045A}

主に共有ボタン微調整。その他,窓間同期3歩),デラング見出し記法仕様検討5歩)など。


共有ボタンは,挙動の怪しかった部分を概ね修正領当てもこれ以上動かしようがないところまで突き詰め,ほぼ完成形と言っていい形になった。

小窓の色はもう少し明るくてもいいかと思い cornsilk を試してみたが,周囲のが明るいため眩しい

ボタン間隔は少し開き過ぎているような気がしたため,小窓の横幅4px縮めた。これだけで少し引き締まって見え,これ以上縮めると詰まり過ぎに見える。1段目と2段目の間隔は16pxが丁度良かった。これ以上縮めると Pocket あたりがタッチしにくい。周辺の余白も16pxにした。これ以上狭くすると周囲と見分けにくい。視覚的にもタッチ操作的にもこれ以上は無さそうだ。

挙動に関しては,マウスオーバー小窓を表示した直後にわずかな時間ロックをかけ閉じられないようにした。マウスオーバーで開くという知識が無いとクリックしてしまう人が多いはずなので,干渉しないようにする。また,不自然に画面に残らないように,小窓からのマウスアウトに加え resizeorientationchangescroll でも閉じるようにした。

特に小窓改良はそのまま待っ読ボタン実装に活かせるだろう。

{デライト}{進捗記録}{領当て}{希哲15年2月12日の開発}{端末間}{横向き}{568px}{希哲15年2月12日の進捗時限}{希哲15年2月12日の進捗}{希哲15年2月12日}...=}(46)

{希哲15年2月12日5歩 K#F85E/E74C-974E}

デライト文書整備「使い方」構成を練る。

個人機向けと諸場端末向けで説明を分ける方向検討していたが,これは共通化してしまうことにした。

自我アイコン設定機能実装を通して鼻付き吹き描き領当てがほぼ共通化されたこと,昨日引き入れ操作をほぼ共通化したことで,表示操作ともに端末間での差異がほとんど無くなったことによる。併用することも多いはずなので,この状態で説明し分けるのは無駄だろう。

結果として今のデライト単純性柔軟性を極めて高度両立させている。これを強みとして活かしたい。

これに伴ない,画面撮り横幅統一することにした。個人機で見ても違和感がなく,スマートフォンで見ても細か過ぎないという点で,現在最小横幅の基準にしている iPhone 5横向き幅(568px)を採用することにした。今後は宣伝用の画面撮りも含めてこの横幅を基準にする。

画面撮り時の横幅は少し前からよく考えていたのでちょうど良かった。これまでは普段自分で使っているをそのまま使うことが多かったが,要点を伝えるには無駄が大きいと感じていた。適当に縮めると統一感が無くなるという問題もあった。

{デライト}{進捗記録}{iPhone}{希哲14年9月17日の開発}{320px}{色違い}{64px}{デライト画像素材}{希哲14年9月17日の進捗時限}{希哲14年9月17日の進捗}...=}(27)

{希哲14年9月17日3歩 K#F85E/5B28-63D9}

デライト用合い改良

イメージを練って終了。

デライト必要アイコンなどの素材が固まってきたため,視認性統一感向上のためにも使う可能性のある画像素材を一通り作っておくことにした。

拡縮高解像度対応などのため,アイコンは大きめに64px32pxの二種類と色違いも作っておく。

古い iPhoneiPhone 5 以前)では横幅が微妙に狭いため,スマートフォン横幅320pxを想定しておくことにした。

=}
{デライト}{進捗記録}{領当て}{希哲15年4月10日3歩}{輪括}{吹き描き}{右吹き描き}{希哲14年7月18日の開発}{あれ}{逆さ右吹き描き}...=}(74)

{希哲14年7月18日8歩 K#F85E/5B28-D190}

朝から前後景輪一覧領当てについて本格的な検討を始め,およそ6歩分かけて昼過ぎには概ね方向性が定まった。これで,デライト用合い設計にも死角がほぼ無くなった。

まず,6月30日の開発で検討していた,吹き描き前後景部の所定件数越えを「...」で表現し,そこから一覧に飛ばすという案は,一旦白紙とすることにした。一覧ではなく,知名だけざっと確認したいという場合が考えられるためだ。動的にただ追加するのではなく,所定件数以内で表示範囲を切り替えていく,というのであれば領当てを壊すこともない。

輪郭一覧ページ付け動的追加を検討してきたが,かえって重くなったりする懸念もあるため,いったん画面遷移で実現することにした。表示は一覧の左上と右下に ...上下矢印,ページ番号を組み合わせる形を検討。現状,録落ちボタンを使っているため紛らわしいが,これはすでに利用者情報ページに移動することを決めていたため無視していい。細かいことは実装しながら試行錯誤していく。

前景一覧については,4月14日7歩考案した逆さ吹き描き踏襲するが,最上部だけでなく一覧の各吹き描きも逆さにしてみることにした。

引き入れボタン引き外しボタン実装する上で,引き入れ状態をどう表現するかという問題もあったが,これも一応の目処が付いた。結局,くぐった輪郭と輪括関係にない輪郭線点線に変え,中景部と上にくる前後景部白煙色を入れ替えるとそれなりに見えることが分かった。この時,全て白煙色にしてしまうとぼやけ過ぎて視点が定まらないため,注目させるべき前後景部のみ白にする。これに加え,ボタンの状態が変わっていれば十分区別出来る。

他の案として,左右反転も脳裏をよぎったが,やはりこれは自他の区別に使うべきとして廃案。横にずらすなども,横幅に余裕のないスマートフォン等の端末を考えれば普遍性が無い。吹き描きはその輪郭を認識するために必要な情報が凝縮されているため,何らかの省略表示を取ることも出来ない。というわけで,表示位置・表示形式は変えず,輪郭線色彩ボタンの3要素に特徴を持たせることで輪括関係を表現するのが最良という結論になった。

引き入れボタン引き外しボタンは現状ですでに表示されている =} 形のボタン活用し,可能な限り単純性を保つ。

ついでに,輪郭をくぐった状態での検索挙動についても整理。現在,吹き描き内部の検索窓は全体検索になっているが,これは本来輪括関係のあるものに限定して検索するのが直感にかなっている。そこで,くぐっていない状態で最上部に表示されている検索窓をくぐった状態でも表示し,そこを全体検索として使い分けることにした。画面遷移時にページ内輪結で隠せば,必要な時だけ出てくるように出来る。最初は検索窓を画面に2つ表示するのは美しくない気がしたが,かといってチェックボックス検索語の特殊記法を導入するのが美しいとも思えない。これが一番直感には適っているだろう。

ここで,自他の区別に使うことを想定していた左右吹き描きもその方針確定した。

これを機に,4種の吹き描きに厳密用語を与えておくことにした。現状の左眼形を「左吹き描き」とし,左右反転させたものを「右吹き描き」,両者を併せて「左右吹き描き」と呼ぶ。さらにこれを上下反転させたものを「逆さ左吹き描き」「逆さ右吹き描き」と呼び,併せて「逆さ吹き描き」と呼ぶことにした。

{進捗記録}{領当て}{自我アイコン}{吹き描き}{希哲14年5月24日の開発}{ヒゲ付き吹き描きの様子}{div.knob}{希哲14年5月24日の進捗時限}{希哲14年5月24日の進捗}{希哲14年5月24日}...=}(19)

{希哲14年5月24日8歩 K#F85E/5B28-8BD1}

デライト離立補完輪郭ページ整理,吹き描き周り整理続き。

途中で終了。

自我アイコンはいいとして,名前をどこに表示するかが微妙に難しい。

アイコンの近くに置きたいが,後景部が大きくなると div.knob も下がってしまうため,常に横幅のある場所が無い。とりあえず時印と同じ高さに表示させておく。そもそも後景部の大きさに限度を設ける手もある。

いずれにせよ,大まかな領当ては決まったため細かいことはどうとでもなる(ヒゲ付き吹き描きの様子)。

自我アイコンをどこに表示するか,というのは最近困っていた問題だったため,これで大きく前進した。

{横幅}

{}