ウェブに携わる仕事をしていると様々なブラウザを使用して日々仕事をしている事が多いのですが、最近はGoogle Chromeを使用して作業をする、仕事のやり取りをする事が増えています。
そんな中で、「こんな事ができたら便利なのに」とか「もっと効率を上げる方法ってないのかな？」とか日常の業務をこなす中で困る事がいくつか出てくる事があります。
もちろん、ウェブ関連の仕事をしている場合は専用のソフトを立ち上げて本格的な作業を行う事が多いのですが、ブラウザを立ち上げて見ている最中にブラウザの中で完結できる事があるのであれば、わざわざ専用ソフトを立ち上げたりする必要もないので非常に便利で仕事の効率があがります。
そんな時に便利なのがデフォルトでは存在していない機能でも拡張機能をブラウザにインストールするだけで、新たな機能を追加する事ができるのがこのChrome拡張機能です。
拡張機能は様々な方が色々なものを作成して公開していますのでちょっと便利にしたいなとか、こんな機能ないのかな？と思ったときは拡張機能がないかを調べると簡単に解決できたりするのでまずは探してみるのもいいかもしれません。
ただ、この拡張機能は様々な方が作成をしていて相当たくさん存在しているので色々探すのも大変ですし、どれがいいのかわからないという事もよくあります。
そこで今回はウェブに関係する仕事に携わっている人間が感じた不便な点などを解決するのに役立った拡張機能で個人的に便利だなと感じたものを厳選してご紹介したいと思います。
Google Chromeの拡張機能のインストールの仕方
まずは拡張機能ってどうしたら入れる事が出来るの？という方もいらっしゃるかと思いますが、インストールの仕方はいたって簡単です。
Google Chromeウェブストア
https://chrome.google.com/webstore/category/extensions?hl=ja&
にもちろん前提条件としてブラウザはChormeを使用している事は当たり前ですが、こちらにアクセスをしてインストールしたい拡張機能を探してクリックして、「chromeに追加」ボタンを押すだけでインストールできます。（追加する拡張機能によってはそのあと設定をしなければいけないものもあります。）
仕事がはかどるおすすめ拡張機能
先ほども言いましたが、一般の方でも、ウェブに携わる人間にとってもブラウザは必ず使用する必須のアイテムです。そのブラウザで便利に仕事がはかどるようにしていくことは、とっても重要なことです。知らないと効率が極端に落ちることもありますので、自分自身が気に入った主に同じような仕事に携わっている人が便利になるであろう拡張機能をご紹介していきます。
CSSViewer
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce
ウェブの仕事をしていると避けては通れないのがCSSです。このCSSはウェブのデザインを決める重要なもので、どのように構成されているのかをチェックしたりすることもよくある話です。そのようなCSSがこのサイトのこの部分ではどう定義されているかをすぐに表示してくれるのがこのCSSVIEWERです。
使い方はいたって簡単で、拡張機能をインストールするとブラウザの右上にアイコンが表示されますので、調べたいサイトを表示させた状態でCSSViewerのアイコンをクリックします。
そして、調べたい個所にカーソルを持っていくとそこの部分のブロックのCSSで定義されているものを全てポップアップで表示してくれます。
普段はデベロッパーツールなどを用いてみることも多いですがデベロッパーツールは専門的でソースから見ていく必要があるため、サクッと調べてみたいなと思ったときはこちらを使用することで、知りたい情報をすぐ見ることができるので非常に便利です。
Page Ruler Redux
https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal
こちらもサイトのチェックで使用することが多いツールですが、こちらはCSSではなくページを構成しているブロックがどれくらいのサイズなのかを直感的に調べてくれる拡張機能です。ページの構成要素のサイズをブロックごとで表示してくれるのでソースを追って調べる必要がないので、考える必要もなく簡単に知りたい情報を知ることができます。
こちらも使い方は非常に簡単で、使用したいサイトを表示させた状態で「Page Ruler Redux」のアイコンをクリックするとページ上部にサイズを表示するバーと、現在カーソルがある位置のブロック要素のCSS情報などを表示するエリアが現れます。（最初に左上にあるElement modeをオンにしておく必要があります）
ブロックに限らず直感的にサイズを測りたい場合はElement modeをやめて、測りたいところをドラッグするとそこの部分のサイズを調べて表示してくれます。
AWESOME SCREENSHOT
ブラウザのスクリーンショットが取れる拡張機能。顧客とのデザインなどの確認や修正の指示をするのによく使用します。ただスクリーンショットを取るだけではなく、画面に図形や文字を入れることができるので非常に便利です。
また、スクリーンショット機能だけではなく、ブラウザの動きも動画でキャプチャする機能があり、５分までの動画であれば無料で使用することができます。
使い方
●キャプチャ
キャプチャしたいサイトを表示後、「AWESOME SCREENSHOT」のアイコンをクリックするとキャプチャかレコードかを選ぶタブがあるので、キャプチャの場合は、「表示部分」「ページ全体」「選択部分」と好みに応じてキャプチャする部分を選択できるようになっています。
表示部分はブラウザの見えている部分のみをキャプチャ、フルページはそのページ全体、選択範囲はドラッグして選択した部分をキャプチャします。キャプチャされた画像は別タブで表示されて、そこで図形や文字などを書き込むことができます。
●レコード
動画として保存したい場合はこちらの機能を使用します。
（動画を作成・保存したい場合はGoogleアカウントにサインインしておく必要があります）
先ほどと同じようにサイトを表示させて、アイコンをクリックしてレコードタブを選択します。
１.画面全体、現在のタブのみ、カメラのみと動画にしたい領域を指定できます。
２.動画のサイズを指定
３.マイク音声を録画するかどうか
４.録画開始ボタンを押す
５.初回のみ音声の許可と許可を行います。
６．カウントダウンが始まり録画が開始されます。
７．終了したい場合は再度Awesome Screenshotのアイコンをクリック
８.別タブで動画が表示されるので、保存をするか共有をするかを選択
以上で動画を作成・保存が可能です。
Web Maker
https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh
ブラウザ上でHTML、CSS、Javascriptのコードを作成して動作や見栄えの確認ができる拡張機能です。
HTMLやCSSを書き込むと画面の右側にリアルタイムでコーディングされたものが表示されるので、コードの確認や専用ソフトを立ち上げるまでもない簡易的なHTML作成であれば、こちらを使用すると素早く作業をすることができます。
まとめ
今回はウェブに携わる人が使うと便利な拡張機能を中心に紹介してみました。様々な職業がありこれを使う必要がないという方もいるとは思いますが、その他にもたくさんの拡張機能が公開されていますので、自分自身の使用用途に応じてブラウザをより便利に使えるようにする一つの手段として覚えておいてはいかがでしょうか。
コメント