{開発}{開発記録}{}{サービス}{デライト}{デライトはoEmbedに対応している?}{描写下見機能}{希哲17年1月16日の副日記}{この手の}{埋め込み献典}(243)

{希哲17年1月16日の開発 K#F85E/E74C-6ADB}

作業方針検討4歩閲覧専用模動実装検討5歩デラング整備埋め込み記法処理改良8歩13歩

埋め込み記法処理改良

これまで埋め込み記法処理の中でも oEmbed利用したものについては,Dex 内で埋め込み交度取得直接描写 HTML埋め込んで返していたが,埋め込み交度取得処理専用 API /mbd委ね前縁 Aejs から利用することにした。結果として応答速度改善成功した

埋め込み記法+[URL]URLoEmbed必要とする場合Dex では適当な分類名付与した <div>出与え属性URL埋め込んで描写 HTML返すAejs ではそれを検知し,URL/mbd転送する/mbdURL対応したサービス埋め込み交度oEmbed取得して返す,という流れになる。過剰な立求抑止するため,Aejs には簡易的な隠し持たせておいた

想像していたよりすっきり実装出来た


そもそもきっかけは,先日の SlideShare 対応だった。oEmbed必要になったので,埋め込みツイート使っていた Dex 内の oEmbed 埋め込み方法取り急ぎ使った。ただ,記法処理範枠同期通信処理組み込むというのは正気の沙汰ではないなんでこんな実装になっているのか,引っかかりはあった。

KNEST 隠し使った SSR 的なことを考えていたことはあるので,その辺の都合だったのだろうと思ったが,現状そこまで最適化する必要時間も無い出来たとして,隠し有効利用出来る握接パターン限られているいずれにせよこの種の埋め込み記法利用増えてくれば破綻目に見えている。ということで,いったん埋め込み処理前縁移すことにした。

読み込み中...
{進捗記録}{一通り}{進捗}{希哲17年1月7日の開発}{希哲17年1月7日の進捗}{希哲17年1月6日の開発}{なくもない}{怪しいところ}{大きく進めた}{ここは}(90)

{希哲17年1月7日12歩 K#F85E/E74C-C272}

{開発}{開発記録}{最悪}{最大}{}{十分}{知番}{サービス}{希哲16年7月}{希哲16年6月}(238)

{希哲16年9月18日の開発 K#F85E/E74C-5BA7}

新生全知検索整備

最初の中間出振るい成功これにより全知検索応答速度柔軟性交度品質大きく向上した出振るい作業円滑に進み,手溢れ無く全体として大成功だった。

輪郭情報取得改良

まず,期待通り輪郭情報取得方式改良により応答速度大きく向上した体感的にもこの種のサービスとしてはという程度から,はっきり速い言える程度になり,快適度数段上がった感覚がある

これまでのデライト高速化施策の中でも最大級の効果感じるが,これはボトルネック解消によるところが大きい6月Cμ 文字列処理改良あたりから,領下手定め環境での高速化効果大きさ比べて本番環境での効果かなり小さい感じるようになっていた。考えられるボトルネックは,相振り出場間の通信回数多過ぎる輪郭情報取得処理だった。

これまでページ表示される輪郭情報の取得は,相振りから大体流れ行っていた

  1. 輪郭隠しにない吊るし輪郭があれば輪郭情報取得するdg_oln()
    1. 自我隠し存在しなければ自我情報取得するdg_ego()
    2. 前景輪数n_fg1以上なら前景輪情報取得するdg_fg()
    3. 後景輪数n_bg1以上なら後景輪情報取得するdg_bg()
  2. 輪郭一覧輪郭情報取得するdg_fnd() か,吊るし輪郭初期状態dg_fg()dg_bg()
  3. 各輪郭自我情報前後景輪情報個別に取得する
    1. 自我隠し存在しなければ自我情報取得するdg_ego()
    2. 前景輪数n_fg1以上なら前景輪情報取得するdg_fg()
    3. 後景輪数n_bg1以上なら後景輪情報取得するdg_bg()
読み込み中...
{開発}{開発記録}{知番}{希哲16年6月14日}{第二次知番改良}{処理する}{これまで通り}{第零番節付き}{良い影響を与えている}{関わりが深い}(76)

{希哲16年6月14日の開発 K#F85E/E74C-8799}

{進捗記録}{一段落}{十分}{}{進捗}{CSS}{希哲16年2月6日}{デラングの文字サイズ}{HTML}{::after}(121)

{希哲16年2月6日12歩 K#F85E/E74C-06F4}

デライト装体調整終了

見分けにくかった見出し装体視認性大きく向上した修正前修正後

見出し装体固定化

まず,これまで中景輪符<h1>始まる<h2> で始まる前後景輪一覧かで描写内見出し装体1階層ずつずれていたが,これはいったん固定することにした。

ずれるのも HTML文書構造からみれば間違った表現ではなく,中景輪符表現も少し変えるべきかと考えていたが,これもなかなか難しい中景輪符知名部は,現状 <h1> でも <h2> でも font-size: 1.4emfont-weight: boldletter-spacing: 0.05em という装体になっている。輪郭という情報単位粒度考えた時,これ以下は小さ過ぎ,これ以上は大き過ぎという所だ。

他の要素も,要素同士の対比考えて細かく装体調整しているため,それらまで見出し装体変化合わせる保守性悪影響を及ぼす。将来的にどうかはともかく,現時点でそこまでする利点は無いだろう。

CSS では h1 ~ .dln h2, h2 ~ .dln h3 のように兄弟結合子使えば簡単に実装出来る。

装体調整

あくまでも描写内での見出し階層装体固定することにした上で,第1階層から第4階層までの描写内見出しには二本線一本線破線点線4種類下線を付けることにした。これまでは第1階層2px第2階層1px一本下線のみだった。

二本線border-styledouble では制御しにくいため ::after使い,1px2px間隔をあけた。また,点線舞覧によって破線より目立ってしまう場合があるため,調整することにした。

最初は,第1階層二本線第2階層一本線があれば十分かと思ったが,結局文字サイズだけの変化ではぱっと見分かりにくい。各描写内見出し図形的特徴があった方が良い。

文字サイズは,これまで 1.3em1.2em1.1em1.05em1em だったのを 1.3em1.2em1.15em1.1em1.05em とした。

1.3em から 1.1em まで0.05em刻みの方が数字的には綺麗かと思ったが,下線特徴を付けても,特に第1階層第2階層一見して見分けにくかった画面撮り。それ以下は使用頻度も低いので0.05em刻みでも大きな問題はないだろう。

letter-spacingfont-weight調整余地はもう少しありそうだが,視認性改善という目的十二分果したのでここで一段落とした。

2px一本線よりも1px二本線の方がすっきりした印象になるのが意外だった。

{大きく向上した}

{}