BLOG【Chrome拡張機能】超便利!マークアップエンジニア(私)がヘビロテしてる拡張機能10個を紹介してみる

だりあ
  1. HOME
  2. ブログ
  3. マークアップ
  4. 【Chrome拡張機能】超便利!マークアップエンジニア(私)がヘビロテしてる拡張機能10個を紹介してみる

こんにちわ、こんばんわ。だりあ(https://twitter.com/engineer_dahlia)です。

Chrome拡張機能って色々便利なものがたくさんあるけど、便利だからって増やしすぎてChromeの帯がカオスになってる…
ぶっちゃけ使ってないやつとかもあるし、この際よく使うやつまとめてみんなにもシェアしようかな!

というわけで、普段からお仕事等でよく使っているChrome拡張機能を10個ご紹介します。

私が追加しているChrome拡張機能一覧

目次

  1. Perfect Pixel
  2. The QR Code Extension
  3. Wappalyzer
  4. Workona
  5. Palette Creator
  6. headingsMap
  7. Case converter
  8. Fonts Ninja
  9. ato-ichinen
  10. GoFullPage – Full Page Screen Capture
  11. まとめ|無くてもいいけど、あると便利なChrome拡張機能

Perfect Pixel

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

まずはPerfect Pixel。Webサイト制作をしているならその名は知っているかと思います。

デザインデータをjpg(or png)化して、自分がマークアップしたものとデザインデータを重ねてミスを見つけたり細かな余白の確認などをするために使用します。

『余白はよしなにしてください〜』という場合も少なからずありますが、
基本的にはピクセルパーフェクトで仕上げます。それがマークアップエンジニアの務めと思っています。

The QR Code Extension

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=ja

The QR Code Extensionの見た目

こちらはWebページのURLをQRコードで読み込んで、スマホやタブレット等で実機チェックをするために使っています。
または、『良いサイトをPCで見つけたけど、スマホでも見てみたい』という時にも使えます。

いちいちURLを手打ちするのはイケてませんので、この拡張機能を使ってパパっと共有しちゃいましょ!

Wappalyzer

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

Wappalyzerは、そのWebサイトにどんな技術が使われているかを教えてくれる拡張機能です。

例えば、このDOCTYPE!のサイトなら↓👇の通り。

Wappalyzerを起動したところ
WordPressが使われていることがわかります。

スクショはWordPressだけでてきましたが、例えばairbnbのサイトを見てみると…👇

ReactやRubyなどが使わているのがわかります。

この拡張機能を使って『こういうの作りたいけど、どんな技術が必要かな?』という調査ができますね。

Workona

https://chrome.google.com/webstore/detail/workona/ailcmbgekjpnablpdkmaaccecekgdhlh?hl=ja

こちらはChromeのタブを任意のグループごとに分けて表示させることができる拡張機能です。

最近Chromeがアップデートして、デフォルトでタブのグループ分けができるようになりましたが、私はどちらも合わせて使っています。

言葉で説明するの難しいのでスクショをば。

Warkonaの画面。いろいろなタブをグループに分けて、グループ名をクリックすればそのグループのタブだけが立ち上がる。

左側にグループの一覧があって、クリックするとそのグループのタブだけが立ち上がる。超便利。

Palette Creator

https://chrome.google.com/webstore/detail/palette-creator/iofmialeiddolmdlkbheakaefefkjokp?hl=ja

Webサイト上の画像の上で右クリックをすると、その画像に使われている色をピックアップしてくれる拡張機能。

マークアップの実案件ではあまり使いませんが、「この写真キレイだなー」とか思った時に使っています。配色の勉強用といったところです。

何色抽出するかを選べます。

headingsMap

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ja

こちらはHTML構造をチェックする拡張機能。

h/ のアイコンをクリックすると、ウィンドウ左側にそのサイトのheadingが出てきます。
これでhtmlのタイトルタグが正しく置かれているかチェック。

Case converter

https://chrome.google.com/webstore/detail/case-converter/eopaojcdjbiipnebdkfjfaooogefklbf?hl=ja

結構地味なんですが、英単語のスペリングを小文字⇔大文字に変換してくれる拡張機能です。

大きいテキストエリアに変換したい英単語を入力すると
下に小文字Ver. / 大文字Ver. を出してくれます。

使い所が限られるかもしれませんが、私は割とちょくちょく使っています。

Fonts Ninja

https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja

Fonts Ninjaはたしかヤマダシ(https://doctype.jp/members/#yamada)に教えてもらった拡張機能。

Webサイトに使われているFontを調べることができます。

WhatFont』も使われているFontを調べるツールですが、Font Ninjaの方が可愛くて好き。

ato-ichinen

https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja

私『ググってこの記事のやり方やってみたんですが・・・』
先輩『・・・それ、2014年の記事やで。』

これ結構あるあるですよね?(私だけか?)

この拡張機能は、ググった検索結果を書かれてから(最終更新からかな?)1年以内のものにフィルタリングしてくれます。

Chromeの標準機能としても期間を指定できるのですが、ato-ichinenをオンにしておけばいちいちフィルター設定しなくても自動で絞ってくれます。

GoFullPage – Full Page Screen Capture

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

名前からわかるように、フルページでスクリーンショットを撮れる拡張機能。

拡張機能を使わなくてもデベロッパーツールからできますが、あると便利。ワンクリックで済むので。

まとめ|無くてもいいけど、あると便利なChrome拡張機能

拡張機能、無くてもいいんです。

でもあった方が便利だよね!!

何か調べる時に、調べるのに手間と時間がかかるのはなるべく避けたいですしお寿司。

皆さんも『これ便利だよ!めっちゃ使ってるよ!』っていうものがあればぜひ教えて下さい!\(^o^)/
Twitter(https://twitter.com/engineer_dahlia)のリプでもOKです!

星の数ほどある拡張機能、まだまだ知らない神ツールがたくさん眠っているはず…最近拡張機能の新規開拓してないからな・・・