【2018年版】プログラマー厳選！おすすめChrome拡張機能10選（仕事編）

 

こんにちは、WEBプログラマーのとうふです。

今回は、私も仕事で使っている
作業効率UPには欠かせないおすすめのChrome拡張機能を紹介します！

特に、WEB系のプログラマー・エンジニアなら入れておいて損はない
便利な拡張も多数ありますので、是非参考にしてみてください！

おすすめChrome拡張機能10選

Githubから欲しいファイルだけDLできる
01. GitZip for github

Githubから特定のファイルだけをDLできる拡張機能です。
欲しいファイルの上で右クリック→「Download」を選択するだけでDLが可能。

ディレクトリを選択すれば、zipで丸ごとDLしてくれます！
Github上ではリポジトリごとでしかDLできないのでとっても便利です。

インストールはこちら↓
GitZip for github

 

サイトのカラーパレットを表示する
02. Site Palette

そのページに使われている色を取得してパレット化してくれます。

画像の例はQiitaですが、
バナーを除けばほぼ左上の3色で構成されてるのでは無いでしょうか？

色の組み合わせが綺麗なサイトで色構成を調べてみたり、
自分のサイトの色使いに迷ったときにパレット化してみると
色使いのヒントが得られるのでおすすめです。

インストールはこちら↓
Site Palette

 

部品もページ全体もサクッとスクショ&共有
03. Gyazo

Gyazoはスクショを簡単に相手と共有できるアプリですが、
そのGyazoの拡張機能バージョンです。

ちょっとgifだと早くて分かりづらいかもしれませんが、
ページ全体だけでなく、パーツごとや選択箇所だけを撮ることが可能で、
あとはコピーされたURLを相手に伝えるだけで共有ができます。

修正箇所などをピンポイントで簡単に伝えられるので、重宝しています。

インストールはこちら↓
Gyazo

 

ページの選択箇所だけ翻訳できる
04. Google 翻訳

ブラウザで翻訳したい文字列を選択&アイコンクリックでその場で翻訳ができます。

プログラミングは英語のドキュメントや参考ページも多いので、
その場でサクッと翻訳できるのが便利ですね…！

ページ全体を一気に翻訳して、コード部分まで翻訳されてしまうことも避けられます。
Google翻訳なので翻訳精度も申しぶん無しです。

インストールはこちら↓
Google 翻訳

 

ブラウザでJSONを見やすく
05. JSONView

ブラウザ上で画像のようにJSONを見やすく表示してくれる拡張機能です。

数字と文字列の色分けのほか、シンタックスエラーなども教えてくれるため、
開発中のデバッグや、公開されているAPIを見るのに便利です。

JSONって地味に読みづらいので助かってます。

インストールはこちら↓
JSONView

 

1クリックでキャッシュ削除
06. Clear Cache Shortcut

ファイルが更新されない…というときにキャッシュを疑うことが多いと思います。
そんなとき、1クリックでブラウザキャッシュの削除ができる拡張機能です。

毎回、ブラウザの設定画面やデベロッパーツールから
キャッシュを削除している方は是非入れてみてください！

インストールはこちら↓
Clear Cache Shortcut

 

時間管理&集中力アップ
07. マリナラ

クリック1つで設定した時間でタイマーをセットし、
デスクトップ通知でお知らせしてくれる作業アシスタントです。

作業と休憩の両方セットしておけるので、
1時間作業したら10分休憩、また1時間作業…の繰り返しも
毎回タイマーをかけることなく使えるのが便利です。

ちなみに人間が集中できる時間は最大で90分が限界だそうで、
45分の集中と15分の休憩の繰り返しがもっとも集中力が上がるそうです！

日別・週別の作業統計も見られるのもおすすめポイントです。
(画像は英語ですが、日本語対応しています！)

インストールはこちら↓
マリナラ

 

このページ、あとで読みたい…ってときは
08. atoyomi

調べ物をしているときに「この記事あとでじっくり読みたい…」
と思うことありますよね。

そんなときにページをあとで読むに保存しておける超便利な機能です。

開いたままにしておくとタブが大量になって作業しづらいし、
ブックマークするほどでもないとき、本っ当に便利です。

リストから読んだものは、自動的に消えるので溜まることもありません。

インストールはこちら↓
atoyomi

 

デザイン周りの情報をまとめて取得できる
09. CSS Peeper

サイトのcssやフォントの情報をまとめて取得してくれる機能です。
「このフォント何だろう？」「このボタンのcssどうなってるんだろう？」
というときにパパッと確認ができます。

その他にも下記の情報などを知ることが出来て便利です。

詳しい使い方はこちらのブログで詳しく紹介されていますのでご覧ください。

インストールはこちら↓
CSS Peeper

 

カーソルを好きなデザインに変えられる
10. Custom Cursor for Chrome

最後は効率化でもなんでも無いのですが（笑）
カーソルを好きなデザインに変えることができる拡張機能です。

大きく見やすいものやカラフルなものから、剣やキャラクターなど
かなり大量のアイコンを選ぶことができます。

また、自分で好きなアイコンをアップロードして使うことも可能です。
気分転換にぜひ使ってみてはいかがでしょうか？

インストールはこちら↓
Custom Cursor for Chrome