{デライト}{<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 アイコン応付として交代させるだけで大きな方針変更必要なかった

{デライト}{WebP}{pdftoppm}{譜類添付機能調整}{譜類添付機能}{希哲17年4月5日の副日記}{分かっていれば}{握接権限}{PDF 埋め込みの様子}{軽快な}...=}(116)

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

譜類添付機能調整など。

細かい挙動調整終えてから PDF 埋め込み対応完了譜類添付機能全体として完成形言える状態になり,ようやくエクスポート機能実装移れる

3月24日の開発時点では,添付ボタン埋め込み記法ラスター画像JPEG, PNG, GIF, WebP扱える程度機能実装一段落としたが,SVG動画音声までの埋め込み含めて対応その他主要文書譜類対応添付代置子導入貼り付けドロップ対応更に PDF 埋め込み対応と,現時点やりたいこと一通りやってしまった一段落とは言ったものの中途半端感残りいまいちすっきりせずデライト公式での機能紹介出来ていなかった


PDF 埋め込み対応関してはPDF.jspdftoppm優秀だったおかげで意外とあっさり実装出来た特に PDF.jsviewer.html場筋PDF 譜類場筋組み合わせ<iframe>src 属性渡せばいいだけで,スクリプト側対応簡単だった

最初のページpdftoppmJPEG に,cwebpWebP変換,その画像クリック縦サイズ合わせた <iframe>置換し viewer.html読み込む読み込み中進捗表示viewer.html行ってくれるので,これだけ違和感なく軽快な PDF 埋め込み実現出来た一応,「(.pdf 添付ファイル)」の小書き輪結添えるようにしておいたPDF 埋め込みの様子


一つ添付譜類握接権限課題残した現状場筋分かっていれば誰でも握接出来るが,デライト性質上大きな問題ではないエクスポート機能譜類握接制御実装するのでそれを応用することにした。

{調整}

{}