{進捗記録}{}{HTML の要素}{一対一}{}{進捗}{希哲17年5月7日の進捗}{希哲17年5月7日の開発}{希哲17年5月7日}{一番楽}(87)

{希哲17年5月7日5歩 K#F85E/E74C-BDDE}

動的引連 SVG アイコン実装

途中で終了

SVG スプライトbackground-image などでも利用出来るようにする実装について考えていたが,ここは割り切って原則SVG アイコン引連 SVG としてのみ扱う方針決めた

実装上の都合background-image使っているだけのアイコンとして,現状背景アイコン二つ役割持たせている二輪鎖念頭に置いた検討だったが,背景としての二輪鎖特定要素端っこ置いているだけなので,一番楽方法ではあるが background-image使う必要は無い

<view>舞覧対応状況不安があることはさておきフラグメント識別子付ける多重立求発生する舞覧があることがどうしても気になる手元Linux 版 Firefox でも発生するbackground-image使いたいのが二輪鎖だけだったのでまだ問題小さいが,SVG スプライト十分に軽量フラグメント識別子での参照十分に少ないという状況でしか効率的ではない手法範枠化出来ない

スクリプト補完した要素background-image設定することも検討したが,そうすると実装コスト動的引連 SVG変わらない上に,より柔軟性の低い参照方法でしかなくなる。

結局アイコンアイコンらしく要素一対一扱うものと割り切った何かとすっきりする

{進捗記録}{十分}{進捗}{希哲17年5月6日の開発}{希哲17年5月6日の進捗}{希哲17年5月6日}{制御したい}{1つの}{座標指定}{当面は}(91)

{希哲17年5月6日10歩 K#F85E/E74C-DDBB}

進捗時限記録中略

動的引連 SVG アイコン実装

途中で終了

SVG スプライト手法取り入れSVG アイコン定義icn.svg集約することにした。

SVG 出与えAejs組み込んで直接挿入してしまうことを考えていたが,舞覧隠し適切な分離出来なくなる要素の再利用必要な id 属性使いにくい,といった問題があった外部 SVG<use>利用すれShadow DOM になるので,id 属性衝突などを気にせず要素整理しやすくなる

スプライト画像として background-image利用しやすいというのも大きい:targetフラグメント識別子利用して表示要素変化させる技術があることを知ったが,舞覧によっては効率的に隠し出来ないことがあるらしく,今回は見送った<view>使えればいいが,Safari対応難がある当面は古典的な座標指定行くことにした。

アイコン制作では,アイコン並べて全体ばら成し見ながら調整することが多いため,見本兼ねられるのも便利だ。

SVG スプライトだけで十分かもしれないと思いかけたが,<use> 1つでも若干冗長な上に,1つのアイコン要素細かく制御したい場合<use>複数必要になるため,やはりスクリプトでの補完欲しい

{開発}{開発記録}{十分}{}{希哲17年5月4日}{希哲17年5月3日の副日記}{CSSアイコンは拡縮時に歪みやすい}{歪みにくい}{表示の乱れ}{ズーム機能}(81)

{希哲17年5月3日の開発 K#F85E/E74C-5BB8}

{進捗記録}{進捗}{デライト}{希哲17年4月28日の開発}{希哲17年4月28日の進捗}{希哲17年4月28日}{保たれている}{高めず}{渡配無し}{調整出来る}(121)

{希哲17年4月28日6歩 K#F85E/E74C-9EF4}

進捗時限記録中略

デライトにおける νSJavaScript渡配トランスパイルについての検討などで終了

しばらくES5 への渡配やめて様子見することにした。備立環境調整済み次回の前縁出振るい本番環境にも反映されるだろう。

希哲13年8月23日の開発以来νS では ES2015基礎にしているが,同時に Babel導入し配信スクリプトES5渡配していた。それから4年近く経ちデライトの舞覧対応方針洗練されES2015対応舞覧十分な市影有しているもはや ES5 との互換性引きずるべきではないと判断した

とりあえず--presets 応付子外してbabel --no-babelrc --minified --no-comments だけで換配するようにしてみると,ae.js譜類サイズ20kB近く減った譜類サイズ削減以上にスクリプト複雑化伴うオーバーヘッド増加抑制期待出来る

ES2016 以上交度うっかり紛れ込む紛れ込んでいる可能性考えるES2015 への渡配をしておいた方がいいかと思ったが,どうもそういう考え方をする時代でもなく,Browserslist使った手法主流らしい。確かに舞覧対応状況非常に流動的なので実態合わせる方が合理的ではあるが,ブラックボックス化避けたいこれまで通り導入付徴対応状況個別に把握しておくことにした。デライトの能力活かせるだろう。

いずれにせよ Babel の設定後からいくらでも調整出来るので,いったん渡配無し様子見する


ついでに変数名などの短縮などについても再検討したが,やはり外部通類への依存度高めず保守性維持するのは難しいため見送った交度英語おかげで一定の短縮性保たれている

{舞覧}

{}