Carpe Diem

備忘録

Webフロントの実装で利用したChrome extension

概要

Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。

Chrome extension

Page Ruler

chrome.google.com

画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。

ColorZilla

chrome.google.com

カラーピッカー。デザイナーさんからPNGだけ頂いた時など。
ただ opacity は区別できないので、それはPSDで確認が必要。

Whatfont

chrome.google.com

フォントの確認用

CSS Peeper

chrome.google.com

フォントやカラー、paddingやmarginなどがサクッと分かるシンプルなAll in one的ツール。
個人的にはassets一覧が表示できるため、レスポンシブ時にちゃんとretina用画像が出ているかどうかなどをサッと確認する時に使ってました。

Clear Cache

chrome.google.com

キャッシュをクリアしたい時に。デフォルトだとキャッシュのみで、CookieやLocalStorageを消したい時はオプションで細かく設定できるのでそちらで。

PerfectPixel

chrome.google.com

Webページに透過させた画像データをかぶせてデザイン通りに一致するかどうか確かめる。
かぶせた状態でCSSを1pixelずついじって一致させていく。

Viewport Resizer

chrome.google.com

レスポンシブなサイトを作る上で、手軽にスマホタブレットのサイズに切り替えて検証できるツール

User-Agent Switcher for Chrome

chrome.google.com

User Agentに基づいて画像や文言の出し分けを行う時、簡単に切り替えるためのツール

まとめ

サーバサイドで実装している時はvimさえあればそこまで問題はありませんでした。
一方Webフロントを実装する際は、PhotoShopのショートカットキーを覚えたりこういったExtensionを使うのとそうでないのは効率の良さが段違いでした。