{一日一文}{デライト}{👍}{知番}{10代}{洞窟}{🎉}{デライター}{どこの}{開発上の都合}...=}(422)

{全てのデライターへ K#F85E/E74C-CA32}

デライト公開から2年半ほどち,色々な人興味を持ってくれたり,使ってみてくれたりした。遠くから眺めているだけの登録してみただけのたまに使ういつも使っている……風変わりデライトでも,出会った人多様性他のサービスさして変わらない

感謝

私は,そんな全てのデライター”とデライターの卵達に深く感謝している付き合い長さ深さ関係ないデライト否定的な人ですら,知ってくれただけでありがたい思う

これがよくある社交辞令ではないということは,前回の一日一文,「デライトの歩み」を読めば分かるだろう。そもそも全く無謀な挑戦として始まったのがデライトだ。成功どころか,誰にも認められず終わるかもしれない。それならまだいい。弾圧暗殺命を失うかもしれない。10代の内にそこまで想像して葛藤乗り越え20年かけてここまで来た

たとえるなら,デライトの歩みとは,真っ暗な巨大洞窟一人彷徨うようなものだった。どこかに新しい世界つながる出口がある。生きている内辿り着けるかどうかは分からない。そんな洞窟歩き続けていた時に見えた聞こえた人の声。それが私にとってデライト利用者であり,デライトへのだ。

そしてデライトは「完全な成功一歩手前言えるところまで来ているすでに夢のようなことだ。感謝せずにいられるだろうか。

代表的デライター

読み込み中...
{希哲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変わらない上に,より柔軟性の低い参照方法でしかなくなる。

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

{デライト}{<path>}{希哲17年5月4日の副日記}{方針変更}{交代させる}{嬉しい所}{二大欠点}{何のことはない}{直接編集}{各部分}...=}(118)

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

CSS アイコン実装から動的引連 SVG アイコン実装切り替えることにした。軽く実験してみたやたら捗ったため,改めて早期実装目指すことにした。

昨日の開発記録書いてみてCSS アイコン調整かかる時間馬鹿にならないなと考えながら何気なく Google 検索素出覗いていたら,意外に上手くアイコンSVG表現出来ているなとは思ったが,やはり HTML出力している引連 SVG アイコン気持ち悪い感じたここで,「行き詰まり防ぐための選択肢」として残すことにしていた4月27日の開発記録動的引連 SVG凌ぐことを思い付いた

これまで見てきた解説悪かったか,「SVG煩雑」という先入観がありずっと苦手意識持っていたが,引連 SVG 関しては<path>中心に削ぎ落とせ十分簡潔出来ることが分かった例えば従来のデライト+ アイコン以下の記述十分表現出来る

<svg viewBox="0 0 32 32">
  <path d="M 4 16 H 28 M 16 4 V 28" fill="none" stroke-width="5.5" stroke-linecap="round"/>
</svg>

引連 SVG なので,CSSJavaScript での各部分操作容易だ。直接編集やたら難しい言われているので面倒臭そうだなと思っていたが,何のことはないすぐに習得出来てしまったCSS アイコン調整比べれば直感的ですらあるし,拡縮時品質比べ物にならない。これで外部通類への依存という懸念払拭出来たあとはHTML の肥大化保守性の低下という引連 SVG二大欠点スクリプト補えばいい。動的引連 SVG なら部品再利用十分柔軟に出来る

元々 CSS アイコン中心とした枠組み応付だったので,作ってきた枠組みそのまま活かせるのも嬉しい所だった。動的引連 SVG中心にCSS アイコン応付として交代させるだけで大きな方針変更必要なかった

{希哲17年5月6日の開発}{希哲17年5月6日の進捗}{希哲17年5月6日}{制御したい}{1つの}{座標指定}{当面は}{表示要素}{変化させる}{外部 SVG}...=}(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>複数必要になるため,やはりスクリプトでの補完欲しい

=}
{アイコン}

{}