WEB制作で便利なchromeの拡張機能5選
WEB制作をしていて「こんな機能があったらいいのに！」と思ったことはありませんか？初心者から中級者の方向けにおすすめしたい、WEB制作で便利なchromeの拡張機能5選をご紹介します。簡単な使い方も紹介していますので是非実践しながらご覧になってください。
①Wappalyzer – Technology profiler
1つ目に紹介するのは「Wappalyzer – Technology profiler」です。
「Wappalyzer」は、サイトがどんなフレームワークやライブラリで構成されているかを確認できる拡張機能です。
サイトが利用しているCMSや集計ツール、JavaScriptライブラリやウェブフォント、バックエンドのデータベースやウェブサーバまで確認することができます。
※ただ必ずしも全てのサービスが見られるというわけではなく、サイトによっては見られないものもあるようです。
調べたいサイトにアクセスし、本拡張機能アイコンをクリックすると、以下のように各サービスが一覧で表示されます。
項目はリンクになっていて、飛び先でそのサービスについての概要も確認する事ができます。
サイト制作にあたり既存のサイトを参考にするケースも少なくないと思いますが、個人的にはそういった場合に、特にフレームワークやライブラリをすぐに確認できる点は作業効率も上がり非常に便利な拡張機能だと思います。
また、独自の各サービス概要を説明したページも割と作りこまれているので、一覧に聞いたことの無いサービスがでてきても、つまずく事なく全体のイメージを把握しやすいのも利点です。
②HTML5 Outliner
2つ目に紹介するのは「HTML5 Outliner」です。
「HTML5 Outliner」は、サイトのアウトラインを確認できる拡張機能です。
使い方は非常にシンプルで、アイコンをクリックすると以下のようにページ全体のアウトラインが確認できます。
「Untitled xxx」となっているところは、HTMLタグ構成が正しく設定できているか確認のうえ、適宜修正を行いましょう。
アウトラインの定義や重要性は長くなるので割愛しますが、アウトラインが整ったページは、画面を見たユーザーはもちろん検索エンジンにも正しく解釈され、より適切なユーザーに提示されるようになります。
特に、更新を頻繁に行うようなサイトでは、アウトラインが気づかぬ間に崩れていたりもするので、日ごろから手軽に確認できるこちらのような拡張機能を導入しておくのも良いかと思います。
③ColorPick Eyedropper
3つ目に紹介するのは「ColorPick Eyedropper」です。
「ColorPick Eyedropper」はWEB上のカラーコードを簡単に教えてくれる拡張機能です。この拡張機能を使うと瞬時にカラーコードがわかります。使い方も簡単で、拡張機能のアイコンをクリックして「ColorPick Eyedropper」を選んでカーソルを気になる色の部分に当ててクリックするだけです。
１．拡張機能から「ColorPick Eyedropper」を選択
２．十字のアイコンが出るので、中心を調べたい色の箇所に合わせる
３．クリックして色を表示させる
今までは色が気になるサイトやバナーがあったときは検証ツールを使って調べたり、キャプチャを撮ってPhotoshopでカラーコードを調べていたりしたのですが、この拡張子に出会ってからは瞬時にカラーコードがわかるようになったので非常に重宝しています。16進数のカラーコード表記だけではなく、RGB値でも教えてくれるのも地味にありがたいです。
また、自分が確認したカラーコードは歴史という機能で履歴を見ることもできます。何個か気になる色を集めておいて、右側のパレットで色の組み合わせを試すのも面白いですよ。
④FireShot
4つ目に紹介するのは「FireShot」です。
「FireShot」は今見ている画面のウェブページをカスタマイズしてスクリーンショットしてくれる拡張機能で、「ページ全体」「表示部分」「選択範囲」の3つの方法でスクリーンショットをしてくれます。
１．拡張機能から「FireShot」を選択
２．「ページ全体をキャプチャ」「表示部分をキャプチャ」「選択範囲をキャプチャ」から用途に合わせて選択してキャプチャを撮る
「表示部分」のスクショをとるなら「PrintScreen」キーで済むのですが、WEBエンジニアともなると全画面のスクリーンショットが必要な場面がたくさんあると思います。今までは「F12」を押して「Ctrl+Shift+P」で「full」と入力してフルスクリーンショットを取っていたのですが、FireShotを使えばキーボードを使って入力することもなく、クリックするだけでスクリーンショットが取得できます。
あと一番この拡張機能で使い勝手がいいのが「選択範囲」のスクリーンショットが撮れるところだと思っています。
３．「選択範囲をキャプチャ」からキャプチャしたい範囲をドラッグして選択してキャプチャを撮る
私はよくお客様に自分の画面をスクリーンショットして説明したりすることがあり、そこで見せる必要のない箇所などを消すのに毎回Photoshopで編集する工数が発生してしまっていたのですが、FireShotを使えばあらかじめキャプチャに含みたくない部分を除くことができるのでキャプチャを撮ってすぐお客様に共有できるようになりました。かゆいところに手が届いて大変ありがたい限りです。
⑤User-Agent Switcher
最後に紹介するのは「User-Agent Switcher」です。
昨今はデバイスの多様化も進み、制作時や検証時にUA偽装を行って確認する、といった事も多いかと思います。
「User-Agent Switcher」は、ユーザーエージェント（以下「UA」）の偽装に便利な拡張機能です。こちらの拡張機能では、標準で特に利用頻度の高い、IE / Firefox / Opera / Safari / iPhone / iPad / Android などへのUA偽装が可能です。
また、オプションから以下項目を設定することで、任意のUAも登録可能です。
●「New User-agent name」⇒追加するUser-Agent（デバイス）の名前
●「New User-Agent String」⇒サーバーに送るUA情報
●「Group」⇒登録先のグループ
●「Append」⇒指定したUAを、追加するか置き換えるか
●「Indicator Flag」⇒ボタンにオーバーレイ表示するラベル（3文字以下の文字列）
下の画像は通常の検索画面と、User-Agent Switcherを使用してAndroid表示にした検索画面です。
▼通常の検索画面
▼User-Agent SwitcherでAndroidを選択した画面
このように表示の確認を行うことができます。
本拡張機能の個人的なお勧めポイントは、上記の任意で設定したUA含め、登録されたUA一覧を外部ファイル化し入出力可能な点です。
チームメンバー内での共有や、引っ越しなどで環境が変わった際も、1つ1つ設定するのはかなりの手間ですが、こちらであれば1度ファイルをインポートするだけで済みます。
以上、WEB制作で便利な拡張機能5選をご紹介しました。
これで制作の作業効率も上がるのではないでしょうか？この記事を読んで「作業効率が上がった」「サイトの品質が向上した」などと思っていただけたら嬉しいです。今回ご紹介した拡張機能以外にも便利な拡張機能が多くあるので是非Chromeのウェブストアで調べてみてください。
▼Chrome ウェブストア▼
https://chrome.google.com/webstore/category/extensions?hl=ja&
