Warning: Trying to access array offset on value of type bool in /home/r1029599/public_html/engineer-log.net/wp-content/themes/simplicity2/lib/customizer.php on line 5404

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

目次

概要

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

Chrome extension

Page Ruler

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

ColorZilla

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

Whatfont

フォントの確認用

CSS Peeper

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

Clear Cache

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

PerfectPixel

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

Viewport Resizer

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

User-Agent Switcher for Chrome

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

まとめ

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

投稿日:May 17th 2017

元記事:http://christina04.hatenablog.com/entry/2017/05/17/015739

– PR –
– PR –