;)
こんにちわ、こんばんわ。だりあ(https://twitter.com/engineer_dahlia)です。
Chrome拡張機能って色々便利なものがたくさんあるけど、便利だからって増やしすぎてChromeの帯がカオスになってる…
ぶっちゃけ使ってないやつとかもあるし、この際よく使うやつまとめてみんなにもシェアしようかな！
というわけで、普段からお仕事等でよく使っているChrome拡張機能を10個ご紹介します。
目次
Perfect Pixel
まずはPerfect Pixel。Webサイト制作をしているならその名は知っているかと思います。
デザインデータをjpg(or png)化して、自分がマークアップしたものとデザインデータを重ねてミスを見つけたり細かな余白の確認などをするために使用します。
『余白はよしなにしてください〜』という場合も少なからずありますが、
基本的にはピクセルパーフェクトで仕上げます。それがマークアップエンジニアの務めと思っています。
The QR Code Extension
こちらはWebページのURLをQRコードで読み込んで、スマホやタブレット等で実機チェックをするために使っています。
または、『良いサイトをPCで見つけたけど、スマホでも見てみたい』という時にも使えます。
いちいちURLを手打ちするのはイケてませんので、この拡張機能を使ってパパっと共有しちゃいましょ！
Wappalyzer
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja
Wappalyzerは、そのWebサイトにどんな技術が使われているかを教えてくれる拡張機能です。
例えば、このDOCTYPE!のサイトなら↓👇の通り。
スクショはWordPressだけでてきましたが、例えばairbnbのサイトを見てみると…👇
ReactやRubyなどが使わているのがわかります。
この拡張機能を使って『こういうの作りたいけど、どんな技術が必要かな？』という調査ができますね。
Workona
https://chrome.google.com/webstore/detail/workona/ailcmbgekjpnablpdkmaaccecekgdhlh?hl=ja
こちらはChromeのタブを任意のグループごとに分けて表示させることができる拡張機能です。
最近Chromeがアップデートして、デフォルトでタブのグループ分けができるようになりましたが、私はどちらも合わせて使っています。
言葉で説明するの難しいのでスクショをば。
左側にグループの一覧があって、クリックするとそのグループのタブだけが立ち上がる。超便利。
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構造をチェックする拡張機能。
これで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
名前からわかるように、フルページでスクリーンショットを撮れる拡張機能。
拡張機能を使わなくてもデベロッパーツールからできますが、あると便利。ワンクリックで済むので。
まとめ｜無くてもいいけど、あると便利なChrome拡張機能
拡張機能、無くてもいいんです。
でもあった方が便利だよね！！
何か調べる時に、調べるのに手間と時間がかかるのはなるべく避けたいですしお寿司。
皆さんも『これ便利だよ！めっちゃ使ってるよ！』っていうものがあればぜひ教えて下さい！＼(^o^)／
Twitter(https://twitter.com/engineer_dahlia)のリプでもOKです！
星の数ほどある拡張機能、まだまだ知らない神ツールがたくさん眠っているはず…最近拡張機能の新規開拓してないからな･･･
;)
