皆さんインターネットをパソコンで閲覧する時はどんなソフトを利用していますか？
私はWEB制作を担当していて、制作したものの実際の見え方を検証するためにブラウザ（WEB閲覧ソフト）は様々なものを利用しています。
例えばパソコンでは「Firefox」「Google Chrome」「Internet Explorer」「Microsoft Edge」などを使用していて、その中でも「Google Chrome」は、動作も軽くて使いやすいので仕事上通常使うブラウザとしてよく利用しています。
この「Google Chrome」は、単なるWEB閲覧の道具として利用している方がほとんどだと思いますが、WEB制作者にとってはとても便利な機能が最初から備わっていたりします。
前回でご紹介したGoogle Chromeのデベロッパー ツール (検証モード)もその一つです。
どのようなものか知らないという方は
「Google Chromeの機能でウェブ制作の業務効率アップ」をこの記事を読む前に一度読んでみてください。
そして、この「Google Chrome」には、さらに便利な事があります。それは機能を拡張する事によって様々な機能が簡単に追加できるようになっているという事です。
このChrome拡張機能（エクステンション）は、世界中の人々が「Google Chrome」に最初から備わっていないような機能を自ら開発して公開をしているもので、その多くの機能は無料でインストールする事ができます。
Chrome拡張機能は、挙げればきりがないほど多くのものがあって、全てをご紹介する事ができませんが今回はWEB制作者の観点から見て入れておけば業務効率に繋がるものや、制作者側から見てこんな機能があれば便利だなと思うようなちょっとしたエクステンションなどに焦点をあててご紹介したいと思います。
Google Chrome エクステンションのインストール
まず基本的なところからですが、Chrome拡張機能を利用するためには「Google Chrome」にインストールする必要があります。
そのインストール方法は以下の方法で行います。
Google Chromeウェブストアにアクセス
まずGoogle ChromeウェブストアにChromeでアクセスします。
Google Chromeウェブストア
左上の検索窓から目的のエクステンションを探して表示させるか、グループ分けされているので目的のエクステンションのジャンルから探して表示させます。
目的のエクステンションを表示してインストール
目的のエクステンションが見つかったら、それをクリックします。
すると、エクステンションの説明が表示されますので、そのエクステンションをインストールしたい場合は右上に下の画像のように、赤丸で囲った部分「Chromeに追加」というボタンがありますのでそちらをクリックします。
すると、エクステンションによっては機能するために権限を許可する必要があるため、権限が必要になる場合はダイアログボックスが表示されますので「拡張機能を追加」のボタンを押します。
（やめる場合はキャンセル）
たったこれだけでインストールが完了です！とても簡単ですね。
WEB制作者から見たオススメ拡張機能
Google Chromeウェブストアには、先ほどもお話した通り膨大な数のエクステンションが存在しています。この中の物を一つ一つ探してはインストールして試すというのは大変な作業となりますので、今回はWEB制作者目線でおすすめを厳選してご紹介していきます。
EYE DROPPER
EYE DROPPER
サイトを閲覧している際に、サイトの色の構成を調べたい時があります。そのサイトで使用されているHTMLカラーコードやRGBAカラーを知りたい時にこの拡張機能を使用すると、すぐに調べられる優れものです。
What Font
サイトに使われているフォントが何かを知りたい時に、フォントを知りたいと思う文章にカーソルを合わせるとその部分に使用されているフォントを表示してくれます。また、クリックするとさらに詳細なフォントの情報を表示する事ができるので便利です。
使用するには、インストール後に右上に出てくる「what font」のアイコンをクリックすると、表示されるようになります。終了したい場合は、「exit what font」ボタンを押します。
Page Ruler
Page Ruler
こちらの「Page Ruler」は、サイトの構成要素のサイズを表示してくれるとても便利な拡張機能です。
通常であれば、調べたいときはCSSを見て、構成要素にどの大きさが指定されているかを調べる必要がありますが、これを使用するとすぐに表示しくれます。
インストールすると、右上に「Page Ruler」のアイコンが表示されますのでクリックします。
すると、下の画像のようにページ上に青い帯が表示されます。
この状態で、調べたい場所をドラッグして範囲指定すると大きさがその青い帯に表示されます。
さらに便利なのが、下の画像の赤丸で囲った部分（画像左上）をクリックすると、カーソルを動かすと自動的にその部分の要素のブロックが表示されて、自動的にサイズを調べて表示してくれます。
Web Maker
Web Maker
ブラウザ上で使えるエディタです。いちいちエディタソフトを立ち上げなくても、この拡張機能のアイコンをクリックすると、すぐにコーディングできるタブが立ち上がってコードがかけます。HTML,CSS,javascriptなどの言語に対応しています。
しかも、その場で結果をリアルタイムプレビューしてくれるので確認するのもとても簡単です。
書いたコードは保存もできますので、後から再度編集する事も可能です。これは本当便利でお勧めです！
check my link
サイトを作成しているとボタンの飛び先を指定し忘れたり、間違った場所を指定していたりして飛ばなかったって事がたまにあります。この「check my link」は、そのページにあるリンクを自動的に調べてくれて色で表示してくれます。リンク切れになっているものは赤で表示してくれます。ソースを確認することなく、すぐに調べてくれるのでとても重宝します。
Awesome Screenshot
スクリーンショットを作成してくれる拡張機能はたくさんありますが、こちらの「Awesome Screenshot」は、スクリーンショットを作成する際に文字や図形を入れる事ができます。
例えばページのスクリーンショットをとって、変更したい部分に赤丸をつけて、その場で変更依頼をするといった使い方ができますので業務効率のアップにつながります。
まとめ
Google Chrome エクステンションは、様々なものがあって普段使用しているブラウザが使いやすくカスタマイズできるとても便利なものです。私のようにWEB制作を仕事にしている人にとっては、このエクステンションを利用する事によって日ごろの業務を効率化できるものが多数ありますのでとても重宝します。WEB制作をしたいと思っていらっしゃる方がいたら是非インストールして試してみてください。
また、私のような職業でなくても、もしかしたら日頃少し不便だなと感じている事も、エクステンションを入れる事によってとても快適になる事もあるかもしれませんので、是非色々な機能を探して試してみてください。
コメント