お久しぶりです。
スピッカートの金山(@spicato_kana)です。
今回は、最近よく使用したいる Web ツール（アプリ？）を紹介しようと思います。
SvgPathEditor
こちらのサイトはその名の通り、path を簡単に編集できるツールです。
path をアニメーションさせたいときに頻繁に使用しています。
数字で厳格に調整できるし、パスツールで大きく調整できるし、プレビュー機能もありと非常に助かっています！
Clippy
CSS の clip-path を使用するときに、わかりやすいように GUI で編集できるツールです。
多角形や少し複雑な図形にしたいときは非常に便利です。
Fancy Border Radius Generator
簡単なモーフィングアニメーションを作成するときは border-radius を使用するときがあり、そのときによく使用しています。
ドイツの 9elements さんが作成したツールです。
Snyk Open Source Advisor
npm などのオープンソースパッケージの安全性を点数として表示してくれるサイトです。
更新頻度やダウンロード数、直近の脆弱性があったかどうかなどで判断し点数を出してくれています。
パッケージを使用するときはこちらの点数を参考にし、判断しています！
Inspect with Chrome Developer Tools
chrome://inspect/#devices
Web ツールではないと思いますが、Web 上で動いているので Web ツールとします（？）
上記の URL を Chrome で開くと開発者ツールを開くことが出来ます。
そして Android を USB で接続すると Android で開いているサイトの検証ツールを確認することが出来ます。
ただし、Android 側で開発者オプションを有効化し USB デバッグを ON にする必要があります。
だいたいの Android は、設定のビルド番号を 7 回タップすると開発者オプションを有効化できますが端末によりビルド番号の位置が違うので、ご注意ください。
snappify
SNS でコードを共有したいときに、いい感じのウィンドウ画像を作成できます。
SNS アイコンを追加もできます。
Feedly
RSS リーダーで、よく参考にしているサイトを登録してまとめて記事を見ています。
いろんなサイトをはしごしていたら見逃しが増えたりするので 2、3 日に一度確認しています。
番外編（Web サイト）
Sidebar
Sacha Greif さんが作成したサイトで、世界で話題になったデザイン記事を 5 選し、毎日更新してくれているサイトです。
なかなか日本語検索で見つけられない記事を見つけることができ、楽しんでいます。
Feedly に登録しているサイトの 1 つです。
codrops
実践的で独創的なアニメーションを紹介してくれす記事が多いサイトです。
もちろん英語ですが、めちゃくちゃ参考になるのでアニメーションが好きなコーダー必見です。
最近ツイートした、lenisもこのサイトから発見しました。
特におすすめな記事 3 選
最後に
今回は、直接的な技術の話ではなく『みんなに教えてぇ！』っていうものを紹介しました。
次からは小さな Tips をまとめて小出しし、投稿頻度を上げていきたいです。。。
Discussion