Web開発者必携！作業効率が劇的に上がるChrome拡張機能11選

Chromeはインターネットブラウザ市場で約25%のシェアを獲得し、Internet Explorer（当時「Project Spartan」へと進化しつつありました）に次ぐ世界第2位のブラウザとなりました。これは裏を返せば、Chromeが事実上のWeb開発者のホームグラウンドであることを意味します。

筆者はFirefox派ですが、Chromeが愛される理由は十分理解できます。ベンチマークテストで常に上位を占める性能に加え、一般ユーザーでも手軽にパワーユーザーになれる点が魅力です。一方で、Chromeが苦手でも、特定の拡張機能があるために使い続けている開発者も少なくありません。

ChromeがWeb開発者にとって優れている最大の理由の一つが、Chromeウェブストアとその豊富な拡張機能のラインナップです。Webサイトのデザインやコーディングに携わる予定があるなら、以下で紹介する必須ツールを今すぐインストールしておきましょう。

1. ColorZilla — 高機能カラーピッカー

ColorZillaはもともとFirefoxのアドオンとして誕生しましたが、あまりの人気ぶりにChrome版の要望が殺到し、ついに登場しました。この便利な拡張機能は、ペイントやPhotoshopに搭載されているスポイトツールの高機能版と考えると分かりやすいでしょう。

ブラウザ内の任意の場所をポイントするだけで、その位置の色情報を瞬時に取得できます。取得した色はRGB、HSV、16進数カラーコードなどで細かく調整してから、クリップボードにコピー可能。操作は extremely シンプルで、誰でもすぐに使いこなせます。

さらに、CSSグラデーションジェネレーター、Webページ全体のカラー分析ツール、あらかじめ用意されたカラーパレットなども付属しており、デザイン作業を強力にサポートします。

2. Window Resizer — ワンクリックで画面サイズを切り替え

Web開発者の宿命とも言えるのが、あらゆるデバイスで快適な閲覧体験を提供することです。モバイルとデスクトップの違いだけではなく、小型タブレットから大型モニターまで、多様な画面サイズへの対応が求められます。

Window Resizerを使えば、ボタン一つでブラウザウィンドウのサイズを自由に変更できます。さまざまな解像度でWebサイトをテストし、ユーザーと同じ目線で表示を確認。問題があれば、その場ですぐに調整できます。

3. IE Tab — Internet Explorerでの表示をChrome内で再現

もう一つの大きな課題が、ブラウザごとの標準準拠の違いです。Internet Explorer、Firefox、Chrome、Operaなど、各ブラウザは同じWebサイトを微妙に異なる方法でレンダリングします。さらに、標準規格への対応スピードにも差があります。

特にInternet Explorerの場合、標準規格が軽視されがちで、Web開発者は頭を抱えながら独自の対応策を講じる羽目になりがちでした。

IE Tabを使えば、この面倒な作業が少し楽になります。新しいChromeタブでWebサイトを開きながら、IEと同じようにレンダリングされた状態を確認できるのです。革命的な解決策ではありませんが、ないよりはずっとマシでしょう。

4. Validity — HTMLバリデーションを手軽に

すべてのHTMLコードが同じ品質というわけではありません。標準準拠にはブラウザ側の役割も大きいですが、開発者自身が正しいHTMLの書き方を守る責任もあります。だからこそ、HTMLのテスト・検証ツールが存在するのです。

Validityは、サードパーティの検証サイトにわざわざアクセスすることなく、これらの作業を完結できる拡張機能です。Webサイトを開いてボタンをクリックするだけで、無効なHTMLに関するメッセージがすべてブラウザコンソールに表示されます。検証はW3C Validation Serviceを通じて行われるため、信頼性も安心です。

5. BuiltWith — サイトの技術スタックを丸裸に

Web開発で厄介なことの一つは、ライブラリ、フレームワーク、エンジンの種類が膨大すぎることです。選択肢が多いのは良いことですが、技術の数が増えすぎると、すべてを追いかけるのは不可能になります。

あるWebサイトを見て、「これは一体何の技術で作られているんだろう？」と疑問に思ったことはありませんか？

BuiltWith拡張機能なら、ワンクリックで現在のページを分析し、そのサイトを支えるすべてのWebライブラリ、フレームワーク、エンジンを一覧表示できます。広告ネットワーク、コンテンツ配信プラットフォーム、ホスティング環境まで把握できるので、競合調査や学習にも役立ちます。

6. Postman REST Client【提供終了】

REST APIを扱う開発者にとって、Postmanは効率的なワークフローに欠かせない定番ツールでした。HTTPリクエストを構築し、JSONやXML形式で整形されたレスポンスを受け取ることができます。レスポンスは別ウィンドウでHTMLとして表示され、読みやすさも抜群です。

複数のリクエストを「コレクション」としてグループ化する機能により、テスト項目を整理整頓し、作業効率を大幅に向上させられます。また、拡張機能内で環境変数を切り替えることで、本番環境・ステージング環境など複数の環境でのテストも簡単に行えました。

※なお、PostmanのChrome拡張機能版は現在提供終了しています。同様の機能が必要な場合は、公式のPostmanデスクトップアプリの利用を検討してください。

7. Corporate Ipsum — ダミーテキストを一瞬で生成

ダミーテキストを用意する方法として、「asdf」を100回コピー＆ペーストするのは非効率です。もっとスマートな方法は、Corporate Ipsumをインストールして、瞬時にそれらしいダミーテキストを生成してもらうことです。

Lorem Ipsumジェネレーターは数多く存在しますが、Corporate Ipsumの最大の魅力はブラウザに直接組み込まれている点です。ボタン一つでいつでも呼び出せるため、使わない理由がありません。これで余計な作業は省き、本来のコーディング作業に集中できますね！

8. TabCloud — タブをクラウドで同期・保存

Web開発は複数のマシンをまたいで行うことも珍しくありません。開発者にとってソース管理システムが同期の主な手段ですが、複数のタブを別のコンピュータに移したい場合はどうすればよいでしょうか？そこで活躍するのがTabCloudです。

TabCloudは開いているタブをクラウドに同期し、別の環境で同じタブセットを復元できます。ローカルではセッションセーバーとしても使え、後で見返したいタブのまとまりを保存しておくことも可能です。タブはGoogleアカウントに保存されるため、どの端末からでもアクセスできます。

9. WhatFont — ホバーするだけでフォントを識別

フォントデザインはWeb開発の重要な要素であり、Google Fontsなどのサービスが爆発的な人気を得た理由でもあります。ありがたいことに、これらの無料フォントには現在入手できる中でも特に美しい書体が多く含まれています。

しかし正直に認めましょう。Webを閲覧中に、見たことのない魅力的なフォントに出会うことがありますよね。フォントを特定する方法はいくつもありますが、最速の手段はWhatFontです。フォントの上にマウスをホバーするだけで、種類やサイズ、色まで即座に判別できます。これ以上シンプルにできるでしょうか？

10. Awesome Screenshot【提供終了】— スクリーンショット撮影と共有

スクリーンショットが日々のWeb開発業務に組み込まれていないなら、Awesome Screenshotがその習慣を変えてくれるはずです。スクリーンキャプチャは、デザインの変更履歴を記録したり、進行中の作業をクライアントやチームメンバーと共有したりするのに最適な手段です。

この拡張機能には多彩なキャプチャ機能が備わっており、ページ全体、選択範囲、表示範囲など柔軟に撮影できます。さらに、注釈の追加、画像内の機密情報のぼかし処理、ワンクリックでの共有にも対応。Googleドライブへの直接アップロードも可能でした。

このコンセプトに興味を持ったものの、より高機能なデスクトップアプリを好む方は、スクリーンショットツールの比較記事を参考に、自分に最適な一本を見つけてください。

11. Check My Links — リンク切れを自動チェック

Web開発のミスの中には訪問者を苛立たせるものが数多くありますが、リンク切れはその最悪の部類に入ります。リンク切れが1つならまだ許容範囲かもしれませんが、それ以上になるとWebサイトの信頼性と評判は着実に失われていきます。幸い、これは簡単に防げるミスです。

Check My Linksはその名の通り、ページ内のリンクを一括チェックします。有効なリンクは緑色、壊れたリンクは赤色でマークされ、最後に合格率がパーセンテージで表示されます。あとは赤くマークされたリンクを修正するだけ。公開前の最終チェックに最適なツールです。

あなたのおすすめ拡張機能は？

生産性向上のためにもう一つおすすめしたいのがStayFocusdです。こちらはWeb開発専用というより汎用的な拡張機能ですが、作業中にWebサーフィンへ気を取られるのを防いでくれるため、開発者にとっても確実に役立つはずです。

今回紹介した拡張機能についてどう思いましたか？その他におすすめのWeb開発向け必須拡張機能があれば、ぜひコメント欄で教えてください！