Google Chrome に入れている11+αの拡張機能
新しく入れた拡張機能は、入れたまましばらく利用しないと「これなんだっけ？」と思い出せなかったり、似たような拡張でもっと良さそうなものを調べたい時のために、2020年1月現在でインストールしている拡張機能をメモっておきます。
1. Awesome Screenshot
ブラウザ画面を画像で書き出したり、書き出した画像にテキストや図を描いたりもできます。ブラウザ以外だとMacでは「プレビュー機能」で同じことができますね。
2. The QR Code Extention
https://chrome.google.com/webstore/detail/qr-code-generator/ebpgklajhmppeobdbgnmdicladcjgakk?hl=jachrome.google.com
ブラウザで表示しているページのURLをQRコードで表示してくれます。 「パソコンで見てるページをスマホで確認したいけど、URLを打つのが面倒・・・」という時に、URLを手打ちする手間が省けて便利です。 他にも同種の拡張機能や、ウェブを制作工程であれば、タスクランナーや BrowserSync でも可能ですが、サッと確認したい時などに使います。
3. Respoisive viewer
最近知りました。 普段は Win/Mac、Android/iOS 対応範囲すべて実機確認してるので、複数スマホのレイアウトの確認が一度にできるようなので、試してみようと思い入れてみました。 （Safari の拡張のように、実は実機では崩れていただと残念ですが、、、） 他にも、Sizzy・Responsive Web Design Tester（Firefox、Opera対応）・Emmet Re:view があります。
4. Dimensions
ブラウザからWebページ内にある各要素の距離などを測ることができます。 最近入れたばかりでまだ出動機会が少ないですが、数値を指定して依頼する時に便利そうです。
5. Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkmechrome.google.com
表示されている画像やブラウザの幅などを定規で測るように簡単に計測できるようです。最近入れて、イマイチ使い方がわからず・・・もう少し使ってみよう・・・！
6. CSS Peeper
サイト内の色アセット一覧がわかるだけでなく、サイト内で使われている画像のダウンロードもできるます。 デザインもオシャレで見てキモチがいいです。
7. Site Palette
CSS Peeper に似ていますが、指定したページからPhotoshopやSketchのカラーパレットを生成できるようです。配色パターンも作れます。 最近入れました、デザイン提案の際に使おうと思いました。
8. PerfectPixel
デザインデータを透かしで配置して、ピクセル単位の精度でWebサイトを開発する時に便利そうです。昔は自前でやっていました。。便利な世の中になったものです。
9. Spectrum
表示しているページに対して、ワンクリックで色覚多様性をシミュレートできる拡張機能です。最近入れてまだちゃんと試していません。アクセシビリティのことも考えて他にも同類の拡張があるのでまず試してみようと思います。
10. Window Resizer
ウィンドウの各サイズを1クリックで変更してくれます。レスポンシブ表示の確認の際に便利です。
11. Fonts Ninja
ページで使われているフォントを教えてくれます。フォントがフリーか、画像フォントの検索などできたりします。デザイン検証や確認の時に便利です。
Ecosia
番外編「検索するたびに森林が守られる」という検索エンジンの拡張機能？のようなもの←のようです、検索するたびに発生する収益の一部で森林を守ることができるようです。本当なのかどういう仕組みなのかわからないですが、検索するたびに右上に木がカウントアップされると、目に見えて楽しいです。
以上が主に使っている・使おうとしている拡張機能でした。 半年に1回くらいは見直しできたらいいなと思います。
ではでは。
