こんにちはYsと言います。Web系のエンジニアとしてぼちぼち働いています。
先日こんなツイートをしました。

リンク先のnoteで、ツールの紹介がありましたが、これを見た後に自分の中で「ツール紹介系の記事で、優秀なエンジニアがどんなChromeの拡張機能を使用しているのか知りたい！」と頭の片隅に過ぎったことがこのnoteを書くキッカケになりました。
自分は全然ですがこのnoteをキッカケに、誰か優秀なエンジニアが「いやこの拡張機能は必須やろ！！」とnoteを書いてくれたら嬉しいーっていうのが魂胆です。

このnoteでは僕が開発中に中でもお世話になっている拡張機能をピックアップして書いていきます。

HTMLのエラーが検知できる「HTMLエラーチェッカー」

■機能：サイトに遷移した際に、HTMLのエラー（タグの閉じ忘れ、付け忘れ等）を自動で検知してくれる
■ダウンロード：こちら

【エラーがある場合】

サイトに遷移した際に、Chromeの右上にこういったエラーの数だけ赤色の数字が表示されます。

これを実際にクリックすると以下のような感じで
どの行の、どのタグが閉じられていないかを検知してくれます。

【エラーがない場合】
以下のように青文字で数字の0でエラーがないことを教えてくれます。

HTMLファイルを分割して配置していると時折発生するのでこの拡張機能で検知します。
僕が働いていた所では、このエラーチェッカーでエラーが起きていない事がテスト項目にありました。
自分独自のルールも追加できるので、応用性もあります。
ただ、formタグを使用しているページではうまく読み込まれないバグもあります。

Javascriptのエラーが検知できる「JavaScript Errors Notifier」

■機能：Javascriptのエラーをconsole画面を見なくても検知できる
■ダウンロード：こちら

Javascriptのエラーを検知できる機能です。
Javascript内のエラーはサイトを見るだけでは分からないので、この機能があれば一目で分かるようになります。

【エラーがある場合】
右上（緑枠部分）にエラーが出ていると教えてくれる警告マークに色がついて教えてくれます。
また、サイトの右下（青枠部分）にエラーマークが表示されます。
タップすると、どのファイルの何行目でエラーが起きている事が分かります。

【エラーがない場合】
警告マークはグレーアウトになり、クリックすると「このページにエラーはないよー」ということを教えれくれます。
最後のニッコリマークが可愛い。

JSONを綺麗に表示してくれる「JSONView」

■機能：JSONを綺麗に色付けし、フォーマットして表示してくれる
■ダウンロード：こちら

JSONを綺麗に色付け、階層ごとに表示してくれる機能です。
ブラウザでJSONを表示すると以下のようになります。

JSONの中身に「紗倉まな」と表示されているのは気にしない！！
（サンプル用にDMMのAPIをコールしてみました）

また、この拡張機能の便利なところは階層別に配列を閉じたり、開いたりする事が出来て入れ子になっている部分でも分かりやすくなっています。

この拡張機能はAPIの返却値を見るときに重宝しています。
めっちゃ便利！
ちなみにJSONが壊れている時はちゃんとエラーを表示してくれるのでそこもポイント高いです。

Cookieを自由に触れる「EditThisCookie」

■機能：Cookieを追加、削除、編集、検索、保護、そしてブロックすることができます
■ダウンロード：こちら

そもそもCookieってなんやねんって人はこちらをどうぞ。

例えば以下のようにCookieのkeyとなる名称が付いています。
これを編集したり、削除したりして利用します。
開発を行なっていると、本番環境と開発環境でCookieの値が混同して、バグってログイン出来なかったり、情報が上手いこと保存されなかったりする事象があります。
そういった時にこの「EditThisCookie」を使用して追加、編集したり、削除します。

たまに訪れるサイトで、Cookieを使用したABテストなどを行なっているサイトもあるので値を書き換えて遊ぶのもありかも。
僕が1番利用するのは画像左上のゴミ箱マークを押して悪さをしているCookieを全て削除する機能。（ブラウザから消すのは面倒なので）

見ている画面のURLをQRコードで表示する「The QR Code Extension」

■機能：自分で現在閲覧しているサイトのURLをQRコード化する
■ダウンロード：こちら

Web系の開発をやっているとデバッグしたり、実際にUXがどうなっているかなどを確認する時にスマホで確認したい時があります。
そんな時に、PCで開いているサイトのURLをコピーするなどのやり方は面倒くさい。
しかし、この拡張機能を使用するとPCで開いているサイトのURLをQRコード化して、スマホで読み込むだけでそのサイトに飛ぶ事ができます。
実際にスマホでちょっとこのサイトを見てみたいなって時に便利です。

ブラウザで表示しているサイトのスクリーンショットが撮れる「FireShot」

■機能：サイト全体、もしくは一部をPDF/JPEG/GIF/PNGでキャプチャを撮り、編集、保存やアップロード、印刷、そしてOneNote、クリップボード、Gmailに送信できる
■ダウンロード：こちら

このサイトのデザインがどうなっているとか、全体像を相手方に見せたい時スクーンショットを撮れる機能が役立ちます。
一部のスクリーンショットであれば、「Skitch」の方が個人的に便利ですが、全体像（表示されている部分だけではなく、表示されていない部分まで）を撮ることができるので便利です。
拡張子もPDF/JPEG/GIF/PNGで対応しているので、用途で使い分けできます。

どういったフォントを使用しているか調べられる「WhatFont」

■機能：Webサイトで使用されている文字のフォントを調べる事ができる
■ダウンロード：こちら

Webサイトで使用しているフォントを一発でわかる機能です。めちゃ便利。
デザインを作成している時に、あのサイトのフォントが知りたいといった時に重宝します。
デザイナーやフロントエンジニアの方が使用されているのをこっそり盗み見てダウンロードしました。（素直に聞こう！）

サイトで使用されている色のカラーコードが一発で分かる「ColorZilla」

■機能：
　1. サイトで使用されている色のカラーコードを確認して自動的にクリップボードにコピーする事ができる
　2. グラデーションを自由に作成できる 
■ダウンロード：こちら

【1. サイトで使用されている色のカラーコードを確認して自動的にクリップボードにコピーする事ができる】

下のGifでは、「投稿」ボタンを例にカーソルを合わせて色をコピーしています。
そのままペーストするだけで同じ色のボタンが作成する事ができます。

また便利なのが、自分がコピーしたカラーコードを忘れてしまった場合、同じサイトに飛んで確認するのは面倒臭いですよね。
そんな時にこの拡張機能では、ある程度の数であれば一時的に保存してくれているので忘れてしまっても大丈夫です。

【2: グラデーションを自由に作成できる】

ボタンやヘッダーなどの色にグラデーションを作成したい時などに簡単にこの拡張機能を使用して作成する事ができます。
自分好みの色を作成したら、赤枠の部分からコピーして使えば簡単に自分のサイトで使用する事ができます。

Androidのデバッグができる「ADB」

■機能：Android端末でデバッグが出来る
■ダウンロード：こちら

Android端末でデバッグが出来る機能です。
僕はスマホサイトの開発の仕事をしていたので、この拡張機能にはお世話になりました。
実際に、端末で確認しないと分からない部分だったり端末依存のバグなどの現象もあるのでこれは必須でした。
同じモバイル関係で開発をしている方におすすめです。

競合サイトのサイトパフォーマンスが丸見え「SimilarWeb」

これは機能が多いので、一つずつ書いていきます。
下の画像の赤枠で囲われた部分にそれぞれの機能があります。

■機能：
　1. サイトの順位や訪問者数、サイト画面の表示速度が見れる「Overview」
　2. どこの国からサイトに流入しているのか分かる「Geo」
　3. どこのサイトから流入してきて、どのサイトに流出しているのか分かる「Referrals」
　4. どういった手段でサイトに流入しているのか分かる「Sources」
　5. どういったキーワードでサイトが検索されているのか分かる「Search」
　6. どのSNSからトラフィックがあるの分かる「Social」
　7. どの広告から流入しているのか分かる「Ads」
　8. このサイトと同じくらい流入しているサイトが分かる「Audience」
　9. 競合サイトが表示される「Similar」
　10. サイトと関連しているアプリが表示される「Apps」
■ダウンロード：こちら

【1. サイトの順位や訪問者数、サイト画面の表示速度が見れる「Overview」】

左側（赤枠）：直近3ヶ月のWebサイトの順位が表示されます。世界基準の検索順位から日本内でみた順位まで見る事が可能です。

右側（青枠）：直近1ヶ月の以下のデータを見る事が可能です
【Estimitaed Visits】：訪問者数
【Time on Site】：平均滞在時間
【Page View】：PV数（平均でページを見られている数）
【Bounce Rate】：直帰率（サイトの最初の1ページ目を見て、サイトを離脱してしまう率）

Analyticsなどを見なくて競合サイトのものが見れてしまう！めちゃすごい！
ちなみにYoutubeとかのものを見るとこんな感じ。

動画サイトだから平均滞在時間も長めだし、直帰率も低め。
PageViewsを見ると、何個かの動画を見ている事が分かります。（TVを観る時にチャンネルを小まめに変えてしまう現象的な）
何より訪問者数が規格外すぎる。さすが世界のYoutube。

という感じで、競合サイトがどれくらいのPV数があって、どれくらい使用されているのか一目で分かります。ブログを使用している方などでも使用している人が多いと聞きます。
自分がよく閲覧しているサイトなどを軽くのぞいてみると面白いです。

【2. どこの国からサイトに流入しているのか分かる「Geo」】

左側（赤枠）：どこの国から、どれくらいの比率でアクセスしているのか分かります。このnoteのサイトはほとんどが日本人、1％がアメリカからのアクセスですね。

右側（青枠）：世界地図で見た時にどこらへんからアクセスがきているのか分かります。noteはほとんどが日本からなので、日本だけが濃く表示されています。

Youtubeのサイトで同じ項目を見ると以下のように世界中からのアクセスがあります。
意外とロシアやブラジルが多め。確かにYoutubeにはアニメなどの違法アップロードでロシア語の字幕が付いているものをチラホラ観るけど。
ブラジルも地味に多い。
という事が一目で分かります。

【3. どこのサイトから流入してきて、どのサイトに流出しているのか分かる「Referrals」】

左側（赤枠）：どこのサイトからきたのか、訪問前のサイトを表しています。（リファラー）
GigazineやNewspickなどからアクセスがあることから、このサイトで記載している記事がSNSを通じて広めらたり、優良な記事として取り上げられたりしてこのサイトにアクセスしている事が分かります。

右側（青枠）：このnoteのサイトから次はどこのサイトに訪問しているのかを表しています。
Twitterなどは、自分が閲覧した記事の投稿者などのTwitterにアクセスしていたりする事が分かります。
Amazonは、このnoteでAmazonウィジット（アフィリエイト）が使用できるので、何かしらの商品の記事を見た読者が実際にその商品を見に行っているという事が分かります。
DocsGoogleは、見た記事のメモを残すためにアクセスなど。

マーケティングや分析等は詳しくやった事がないので詳細な正解は分かりませんが上記のようなユーザーの動向が分かります。

【4. どういった手段でサイトに流入しているのか分かる「Sources」】

どういった手段（自分で検索してアクセスしているのか、SNSなどからアクセスしているのかなど）でアクセスしているのかが分かります。

検索（Search）や、SNSなどのからのアクセス（Social）がこのサイトの半分以上（68%）のアクセスを占めています。
逆にMailなどで広められたものからのアクセスはたったの0.82%ほどしかないです。

自分で作ったブログや競合サイトなどがどういった広め方を使用しているのかが分かり、セールス方針などが変わると思います。
（Socialなどが低ければもうちょっとSNSでの普及を頑張る！みたいな感じで）

【5. どういったキーワードでサイトが検索されて、サイトにアクセスされているのか分かる「Search」】

どちらもどういった検索ワードでアクセスしているか見る項目ですがちょっとした違いがあります。

左側（赤枠）：自然な検索、ユーザー自身が『検索したワード』から、SEOを使用した検索結果上位にあるリンクをタップしてサイトに流入したもの

右側（青枠）：広告検索、『検索したワード』からSEO関係なしに広告で出されたリンクをタップしてサイトに流入したもの

このnoteでは、広告が出されていないので何もありません。
下記の赤枠の部分が「Paid keywords」の流入元となります。（SEO関係なしに広告として上位に表示されるもの）

話を戻して、検索語句の左側の赤枠（Top Oraginic Keywords）のなかに、「ゾフルーザ」「インフルエンザ　新薬」といった語句があります。
これは最近日本でインフルエンザが流行した時に、新薬の発表があった事が背景にあり、その際に新薬のことを詳細に書いた医師の方がnoteに記事を書いていて、そこに流入があった事が分かります。
こういった語句の分析等も行えます。

【6. どのSNSからトラフィックがあるの分かる「Social」】

どこのSNSからアクセスされたのか分かります。
このサイトではTwitterがほとんどを占めています。その他はFacebookなど。
若干数Youtubeもあります。
最近、イケハヤさんなどのインフルエンサーと呼ばれる方々がYoutubeに動画を投稿し始めたことにより、動画の概要欄などからの流入が多くなってきているぽいですね。

【7. どの広告から流入しているのか分かる「Ads」】

実はこれについてはあまり詳しくないです、、申し訳ないです。
ただ「Google Display Network」から見るにディスプレイ広告からの流入がどれくらいあるかどうかが分かります。

【8. このサイトと同じくらい流入しているサイトが分かる「Audience」】

訪問ユーザーの属性を見る事ができます。
このサイトを閲覧している間に、同一で見ているサイトを教えてくれます。
競合サイトを一緒に見ているのか、どのサイトを参考に見ているのかを分析にすることができます。

【9. 競合サイトが表示される「Similar」】

同じような競合サイトが表示されます。
このサイトであれば、togetter.comやlivedoorなど似たようなサイトが表示される機能です。
他に分かりやすい例だと、大手不動産サイトのSUUMOの「SImilar」を覗いて見ます。

競合サイトである不動産サイト「Home's」や「アットホーム」「エイブル」などが表示されているのが分かります。
競合のサイトを見ることも勉強になるので、覗いてみると面白いです。

【10. サイトと関連しているアプリが表示される「Apps」】

このサイトと同じような機能を持ったアプリを表示してくれます。
ちゃんと『note』のアプリがAPPSTOREとGOOGLEPLAYに表示されています。（赤枠部分）
競合サイトだけではなく、アプリの方も分析ができるのですごいです。
単純に分析をしなくても、あのサイトと似たアプリがないかなーと調べるだけでも役立ちます。

以上が「SimilarWeb」の機能になります。
説明不足の部分もあるので詳しい方教えていただけると嬉しいです。（長く書きすぎた）

終わり

長々と書いてしまって、もはやChromeの拡張機能を説明しているのか「SimilarWeb」の説明をしているのか分からなくなってきました。

1番上にも書いていますが、誰かがこのnoteを見て「これも便利！」「エンジニアならこれもおすすめ！」などを思って記事を書いてくれる事が魂胆です。
最後まで読んでいただいてありがとうございました！