今回はWebサイト制作の際に個人的に重宝しているGoogle Chromeの拡張機能「ColorPick」と「Page load time」の導入方法と操作方法をご紹介致します。

「ColorPick」について

「ColorPick」はWebページの画面上のカラーコードを文字列で出力してくれるツールとなっています。

私はプログラマーなので、基本的なお仕事はphpやJavaScript等のプログラムをいじることなのですが、軽い修正として文字や背景の色の変更を実施することがよくあります。
色の修正を行う際には、カラーコードが決まっていれば楽なのですが、「〇〇のサイトのような色」あるいは「メールで送った画像みたいな色」という指定をいただいた際に、色に疎い私にとって色の再現は難しく、時間がかかる作業となってしまいます。
そういったことを解消してくれるのが「ColorPick」という拡張機能になります。

「ColorPick」の導入方法

GoogleChromeのブラウザを使用して下記サイトにアクセスします。
https://goo.gl/RhyaNV

上記サイトにアクセスするとツールの概要が表示されますので、画面のやや右上にある「CHROMEに追加」のボタンを押します。

ポップアップでメッセージが表示されますので「拡張機能を追加」のボタンを押します。

正常にインストールが終わると、ブラウザの右上にアイコンが表示されます。

以上で「ColorPick」の導入は完了となります。

「ColorPick」の操作方法

「ColorPick」のアイコンをクリックしてください。
アイコンをクリックするとマウスカーソルの先を拡大表示した画面が表示されます。

カラーコードを知りたい箇所にマウスカーソルを合わせてクリックすると、クリックした位置にカラーコードが表示されます。
表示されたコードをコピーしてカラーコードの取得は完了となります。

「Page load time」について

「Page load time」はページの読み込みにかかった時間を算出してくれる拡張機能になります。
Webサイトの表示速度は検索順位にも影響を与えるほどに重要な要素となりますので、Webサイトを制作する際には気をつけなければなりません。
そういった読み込み速度に関わるおおまかな要素を知る際に「Page load time」が役立ちます。

「Page load time」の導入方法

GoogleChromeのブラウザを使用して下記サイトにアクセスします。
https://goo.gl/zqQg59

上記サイトにアクセスするとツールの概要が表示されますので、画面のやや右上にある「CHROMEに追加」のボタンを押します。

ポップアップでメッセージが表示されますので「拡張機能を追加」のボタンを押します。

正常にインストールが終わると、ブラウザの右上にアイコンが表示されます。

以上で「Page load time」の導入は完了となります。

「Page load time」の操作方法

表示速度を知りたいページにアクセスしてアイコンをクリックします。
アイコンをクリックすると下図のような画面が表示されます。

各項目に関してですが「多分こんな感じなんだろうなぁ」という程度に理解して使っています。（下記参照）

・Redirect（リダイレクトに要した時間）
・DNS（DNSの処理時間）
・Connect（サーバーへの接続に成功するまでの時間）
・Request（サーバーへ要求するまでの時間）
・Response（サーバーの応答が返ってくるまでの時間）
・DOM（DOMツリー構築の時間）
・Interactive（？）
・Content loaded（？）
・Load event（DOMツリー構築後の表示までの処理時間）

「Interactive」と「Content loaded」の部分はDOMの中の何かしらの要素だと思うのですが……よくわかりません！
間違っていたらコメントにてご指摘願います！

これだけ見ることができれば、表示速度に異常が発生した際に、どこに問題があるのかおおまかに把握することができます。

「もっと細かく各要素の処理時間を知りたい！」という方はGoogleChromeの検証機能（デベロッパーツール）でNetworkを確認することで、より細かく処理時間を見ることができます。

ここまで細かくなると調査も一苦労しそうですね…。

GoogleChromeの拡張機能を活用して作業時間を短縮しましょう！

いかがでしたか。

今回はプログラマーの自分がWebサイト制作の際に重宝している二つのツールをご紹介しました。
GoogleChromeの拡張機能は今回説明したもの以外にも、ページのスクリーンショットを撮る「Awesome Screenshot」や、Webサイトのおおまかなアクセス状況が分かる「SimilarWeb」等、役に立つツールが多くあります。
今までに時間がかかっていた何かしらの作業も、GoogleChromeの拡張機能でなんとかなってしまうこともあるかもしれません。
月に一度はこういった便利ツールの調査をしてみると、役立つ情報を取得できるかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。