cosense-iconの自由度と実用性をもう少し高めた

前までの話

Scrapboxのアイコンをいい感じにサッと作るWebアプリをCloudflare Workersで作る

まだこれはshinyaoguri.iconの個人のプロジェクトだけにしか対応していないので

で確認できる

https://icon.soui.dev/bg-6c5427/fg-efe5d9/grad-7c3aed/%E8%83%8C%E6%99%AF%E3%82%92%5Cn%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%5Cn%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B.svg

画像を90度単位で回転させられるように対応

https://icon.soui.dev/bg-bbc7df/fg-091315/rotate-270/%E7%94%BB%E5%83%8F%E3%82%92%5Cn%E7%B8%A6%E3%81%AB%E3%81%97%E3%81%9F%E3%82%8A.svg

https://icon.soui.dev/bg-bbc7df/fg-091315/rotate-180/%E3%81%B2%E3%81%A3%E3%81%8F%E3%82%8A%5Cn%E8%BF%94%E3%81%97%E3%81%9F%E3%82%8A.svg

サイズをマウスでGUIから操作できるように対応

https://gyazo.com/2573fbd76dd82f3cd46336f6ebde27e3

文字にぼかしを入れる

https://icon.soui.dev/bg-cfeaf1/fg-141b43/padding-62/radius-72/shadow-000000/blur-5/font-Zen%20Antique%20Soft/%E6%96%87%E5%AD%97%E3%81%AB%5Cn%E3%81%BC%E3%81%8B%E3%81%97%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B.svg

縁取りに対応

https://icon.soui.dev/bg-8181f2/fg-171619/padding-62/radius-72/stroke-ff0000/stroke-w-10/font-BIZ%20UDPMincho/%E6%96%87%E5%AD%97%E3%82%92%5Cn%E7%B8%81%E5%8F%96%E3%82%8A%E3%81%99%E3%82%8B.svg

PWA対応

CosenseもPWA対応しているので，これも対応

お気に入り対応

https://gyazo.com/2cf9980bfb6ffe1245c4d46e9859f0e1

ただし，locakStorageなので，その端末だけで記録される感じ

画像のダウンロード機能に対応

https://gyazo.com/191fe483b066387ce27a0c41c54f9143

編集中の状態をURLに即座に反映するようにした

つまり

https://icon.soui.dev/bg-e2c2e8/fg-1e0f1f/w-461/h-258/padding-29/URL%E3%82%92%E8%A6%8B%E3%81%A6.svg

という画像の編集画面は

と同じということ

#publish #blog