私のお気に入りブラウザ拡張機能

Transcript

1. 私のお気に入り ブラウザ拡張機能 2021.03.06 ゆずぃー　　　@citrodesign
2. 自己紹介 ゆずぃー 初めてのHTMLはメモ帳で書き、ダイヤルアップでつないだポエムサイト。 小さなシステム会社でPHPとかJSとか書いたりしたあと、 某学校法人でヘルプデスク兼シスアド補助兼ウェブデザイナーに。 2015年にウェブ制作会社へ。 デザイナーで入ったはずが、気がつけばディレクター名乗り始めて4年目。 小3・小1・3歳児の母やってます。 2
3. 拡張機能とは？ 「拡張機能はブラウザーに新しい機能を追加したり、 特定のウェブサイトが持つ見た目やコンテンツを変更したりできます」 拡張機能とは何か？ - Mozilla | MDN 3
4. 拡張機能は、定期的に見直して 使い勝手のいいモノを厳選しよう 拡張機能には流行り廃りもある 自分の仕事のスタイルも変わる 手馴染みのよい道具を使っていこう！ 4
5. 2021.03.05 現在の布陣（Google Chrome） 5
6. Gyazo　https://gyazo.com/ 6 • URLでスクリーンショットが共有できるので、スクショでローカル環境が圧 迫されることがない • 画像ファイル名で共有もできるので、マークダウンで画像貼り付けできるの も超絶便利
8. 【SNS共有系】 LINE/Facebook/Pinterest/Feedly/Instapaper • FacebookはOGPが意図通り設定されているかの確認によく使う 8
9. Clear Cache • スーパーリロードでも消えないキャッシュがある時に使う EditThisCookie • Cookieに保存されている情報を確認できる ColorPick Eyedropper • カラーピッカー（もうちょっと使い勝手のいいやつ知りたい） 9
10. Copy URLs to clipboard • タブ開きすぎて閉じたいけど 全部URLは取っておきたいと きなどに。（ただしURLしか 取得できない） 10
11. disable-HTML • cssやjsが当たっていない素 のHTMLで正しく文書が把握 できるか確認したい時などに 使う 11
12. Alt & Meta viewer AltやMetaに入れた内容を確認したいと き、デベロッパーツールよりもぱぱっ と確認できる 12
13. HTML Coding Checker • 「リンク領域のハイ ライト」が便利（た だし、リンク先が正 しいかまでは分から ない） 13
14. Page Ruler Redux • コンテンツ幅測ったり、余 白測ったり… ◦ 参考にしたいサイトの サイズ感を知ることが できる 14
15. Image Downloader • 画像を一括ダウンロードで きる ◦ 「画像は現行サイトの ものを使って下さ〜 い」とか言われて画像 支給してもらえない時 などに便利 15
16. Perfect Pixel • ウェブページに画像を重ねることができる ◦ デベロッパーツールとの併用が可能なので、テストページにカンプ画像 を重ねて要素の位置調整を細かく行いたいときなどに便利 16
17. ＼ Thank you ／ あなたのおすすめ拡張機能もぜひ教えてください♪ 17