メディア編集部FacebookTwitterGoogle+はてブPocketFeedlyブラウザの基本機能に加えて、オリジナルの拡張機能を使って作業を効率化できます。基本機能だけでは取得できない情報を見ることができたり、いろんな閲覧環境での表示のされ方を確認できたりします。この記事ではGoogleのブラウザChromeの拡張機能の中で、エンジニア向けの作業を効率化できる便利機能をご紹介します。Chrome拡張機能についてGoogleの人気ブラウザChromeでは、たくさんの拡張機能を持たせることができるようになっています。いろんな開発者たちが、ブラウザの基本機能にはない機能をアドオンの形で一般に提供し、インストールしたらだれでも使うことができるようになっています。エンジニアにとって役立つおすすめの拡張機能にはどんなものがあるでしょうか。厳選して9つのChrome拡張機能をご紹介します。Chrome拡張機能のメリットとは?拡張機能のメリットは、ちょっとした便利な機能をブラウザのアプリケーション開発者ではない第三者が開発し、カンタンに機能追加できるというところがポイントです。従来のアプリケーションでは、アプリケーションのバージョンアップ時に追加してほしいと思う機能を、アプリケーション開発者がすべて取り入れてくれるわけではありません。それで、満足のいく使い勝手のアプリケーションを見つけるのはなかなか難しいことが多くありました。拡張機能を取り入れることができるアプリケーションでは、アプリケーション開発者以外でも、そのアプリケーションの機能を向上させるために、拡張機能を作ることによって開発に参加することができ、より多くのユーザーのニーズに合ったカスタマイズができるようになりました。Chromeの拡張機能をご紹介していきましょう。どれもこれも簡単に設定するだけで拡張機能をアドオンできますから、気軽に試してみることができます。便利に拡張機能を使いこなせるようになれば、時間をさらに上手に使えるようになり、フリーランサーとしてのさらなる成功も近づいて来ますね。YSlowはじめにご紹介しますのは、「YSlow」です。サイトの各ページが適切に構築されているかを的確に測定してくれる拡張機能です。たくさんのギミックがはいったページはエンジニアにとっても楽しい開発になりますが、さまざまなブログパーツやJavaScriptを含めてしまうと、表示速度が落ちてないかとか、ちゃんと表示されなくなってしまう環境がないかとかが心配になってしまいます。そんなときにこの「YSlow」を使ってサイトのパフォーマンスを測定すれば、AからFの6段階でサイトの見やすさを評価してくれます。どのような改善を加えればよいかのアドバイスも詳しく提案してくれるので、確実なサイトのパフォーマンスアップをすることができます。Wappalyzarインターネットを閲覧していて、いいなと思うサイトが見つかった際に、「どんな技術を使っているんだろう?」と考えてしまうのは、エンジニアあるあるではないでしょうか。どんなCMSで作成されているのか、jQueryのどのバージョンでこの表示が可能なのかなど、気になるポイントがたくさんありますよね。そんなときには、「Wappalyzar」をアドオンすれば、一発で判定できます。今閲覧しているサイトがどんなCMSで作成されたか、どんな解析ツールを使用しているか、どんなブログツールを取り入れているか、どんなJavaScriptを読み込ませているかが、すぐにわかるようになります。JSONViewさらにご紹介します拡張機能は、「JSONView」です。開発中のWEBサイトをデバッグの際に、受け取っているはずのJSONのデータを見たいというシーンは多々あるのではないでしょうか。そんなときにとても便利に使えるアドオンが「JSONView」です。各配列が整然と表示されていて分かりやすいです。生成したJSONの記述に誤りがある場合には、間違いの箇所を指摘してくれる機能もあり、本当に便利に使えます。EditThisCookie続いてご紹介しますのは、「EditThisCookie」です。開発中に、Cookieがどのようになっているかをカンタンにチェックしたいこともよくあります。ブラウザの設定機能に行って調べるというのでは、開発作業のスピードが上がりませんね。そんなときは、「EditThisCookie」をアドオン。Chromeのウィンドウ右上のアイコンから、現在表示しているサイトのCookie情報をすべて確認することができます。この拡張機能のすごいところは、Cookie情報を編集できてしまうという点です。これで、デバッグや動作確認のためにわざわざCookieを登録しにいく必要がなくなり、作業スピードが格段に向上できますね。エンジニアのみなさんがよく使うChromeのデベロッパーツールは便利なのですが、表示される色などをカスタマイズしたいと思ったことはないでしょうか。普段使っているテキストエディターの背景を暗い感じの色にしている方は、白背景のデベロッパーツールが見にくく感じることも多いようです。デベロッパーツールの白背景を黒背景にかえてくれます。いつもの環境と同じ表示になっていると、要素の確認をする作業もササッとできるようになって、はかどりますね。APIと連携させる際に、どんなレスポンスが帰ってくるのかを詳しく調べたいですよね。GETなら、URLを記載するだけでよいですが、POSTをテストでリクエストするのはけっこうたいへんですよね。client」を使いましょう。送信先のURL、GET/POST、送信する内容をカンタンに記載し、「Send」しますと、レスポンスが帰ってきて、見やすく表記されます。OAuthなどのリクエストでも使えます。デバッグやAPIとの連携などに役立ててください。Chromeさまざまな閲覧環境に合わせてサイトの表示を調整することが必須になっていますから、いろんなブラウザの画面でどう表示されるかを瞬時に確認できるようにしておきたいですよね。Chrome」が有効です。ブラウザごとにどのように表示されているかをカンタンに切り替えて確認することができます。Phoneならどう表示されるかを見ることができます。Ghosteryエンジニアとして、他人が作成したウェブサイトにはどのような技術が用いられているのかということは、気になりますよね。どんなアクセス解析ソフトを使用しているかということは、こちらの今後の進歩のためにもぜひチェックしておきたい情報です。そんなときに使えるのが、「Ghostery」です。今閲覧中のサイトが使用しているアクセス解析サービスが何なのかを的確に知ることができます。使われているサービスがポップアップで表示されるため、すぐに確認することができてカンタンです。ブロックしたいサービスの機能をオフにすることもでき、とても多機能で便利な拡張機能です。Eyedropperエンジニアとしてクライアントと直接やり取りする必要のあるプロジェクトもたくさんあります。いう打ち合わせの場では、クライアントのぼんやりとした要望を的確にとらえる能力が求められますね。「こんな感じのカラーのサイトにして欲しい」と、とあるウェブサイトを見ながらご要望をいただいたとします。エンジニアとしては、色情報はカラーコードとして捉えたいところですが、どうしたらよいでしょうか。Eyedropper」にまかせましょう。この拡張機能をアドオンしておけは、閲覧中のサイトをマウスオンすることによって、その色のカラーコードを知ることができるようになっています。エンジニア向けの拡張機能のツールを使って仕事を効率化させようご紹介してきました通り、フリーランサーのエンジニアが便利に使える仕事効率化ツールはChromeの拡張機能にもたくさんあります。それぞれやりたい機能を的確にこなしてくれるので、本当に役立ちますよ。これらの拡張機能をひとつひとつ試してみて、作業がびっくりするほど効率的に進んでしまうことを体感してみてください。みなさんのお役に立てるような情報を提供していきますビジネスの関連記事ホームページを自作する方法とは。HTMLや無料ツールを使った方法を紹介2019年11月29日Jimdoを使ったホームページ例をご紹介2019年7月31日あらゆるビジネスのパートーナーに。【2019年版】ホームページが簡単に作れるツール7選ホームページ作成ツールを使えば少ない費用で誰でも簡単にホームページを作ることができます。おすすめのホームページ作成ツールを紹介していきますので参考にしてください。ホームページ作成ツールを選ぶふるさと納税をしたら確定申告を!還付金の受取りや申告不要の条件を高田馬場周辺の電源カフェ!無料でWi-Fiが使えるお店もご紹介おすすめの記事コワーキング・作業スペースノマドワーカーにおすすめ!恵比寿の電源WiFiカフェ10選!勉強や仕事の作業を集中してしたいという時、皆さんはどんな場所を選びますか?自宅ではなく、カフェの方がいいという方も多いと思います。今回は、大...ホームページ作成ツールJimdoの料金は?どんなプランがある?気になる費用を徹底解説Jimdoは誰でも簡単ホームページを作れる便利なツールです。無料プランでも一通りホームページを作って公開する事ができます。有料プラ...マーケティング【無料】Instagramから自社サイトへの流入をUPさせる方法インスタグラムからサイトにユーザーを流入させるための方法を厳選致しました!今回は「いいね」「フォロワー」の増やし方と、「ハッシュタグ」の活用...コワーキング・作業スペース大阪のおすすめコワーキングスペース10選!安い・駅近など特徴も紹介ひとりで働いていてもみんなで集まれるコワーキングスペースが大阪のフリーランサーたちにとても人気です。...ランディングページ成果の出るランディングページの作り方!Web集客必勝方法ウェブマーケティングでランディングページ(LP)を作るのは非常に重要なことです。ランディングページとは「1つの商品やサービスを売るための1...コワーキング・作業スペース神田のおすすめ電源カフェ8選!Wi-Fiが使えるカフェもご紹介カフェ選びで重要なポイントは電源が使えるかどうかです。カフェでの仕事や勉強を考えた際、パソコンやスマホの充電を気にせずに長時間集中できるとい...フリーランス今さら聞けない・・・フリーランスの確定申告を徹底解説!確定申告とは、毎年1月1日から12月31日までの1年間の所得を計算して、翌年2月16日~3月15日の間に国へ「申告」することを言います。フリ...ホームページフリー写真素材サイト29選!商用可・無料で人物やおしゃれな写真を使える写真は、素敵なホームページ作りをするための大切な要素の一つです。ホームページを作りたい!デザインの参考にしたい10の事例を紹介ペライチの使い方・料金プランなどをご紹介!新着記事ホームページの管理は自社と管理会社に依頼のどちらが良いか?費用や管理方法を比較ホームページ作成におすすめの講座・セミナー6選。初心者が学ぶのに最適な講座とは効果的なホームページの運用業務とは。ホームページ運用業務にかかる費用も解説ホームページを無料で作るならツールが便利。無料・簡単に作れるツールを紹介ホームページ作成を格安でできる制作会社・サービスを紹介。無料で作成は可能かホームページを格安で作るには?格安ホームページ会社のメリット・デメリットを解説ホームページ作成におすすめソフトを紹介。無料ソフトのデメリットも解説おすすめMac向けホームページ作成ソフト18選。