Webディレクターの業務が捗るGoogle Chrome拡張機能

こんにちは、ECBBディレクターの杉松です。
web制作に携わっている方ですと愛用しているブラウザは、
Google ChromeかFirefoxの方が多いのではないでしょうか。
やはり皆さん色々と拡張機能を追加して好みのカスタマイズをしていると思いますが、
今回は私が常用しているChromeの拡張機能を紹介していきたいと思います。

どれも実際に使用していて業務に役立っている拡張機能になるので、まだ入れたことがないものがあったら是非試してみてくださいね。

Googleアナリティクスのタグが正しく動作しているかを確認できる、Googleが無料で提供しているChromeの拡張機能です。
サイトにアナリティクスやタグマネージャーのタグを新規で設置した際や、
既存サイトに何のタグが入っているかなどの確認に利用しています。
以前はタグを設置して数日後にアナリティクスにアクセスして反映されているのかを確認していました。
タグが正しく設置できていないと再度設置しなおして、また後日に確認と時間がかかっていましたが、
このツールを使えば反映結果を待たずにすぐ確認できるのがとっても便利です。

ツールバーのアイコンをクリックするとTag Assistantのウィンドウが立ち上がります。
左下の「Enable」をクリックしてください。

「Enable」ボタンが「Disable」に変わったら、その横の「Record」をクリックしてください。
「CANCEL RECORDING」の赤いボタンが表示されたら、一度サイトをリロードします。

「Result of Tag Analysis」という結果画面が表示され、
閲覧中のページに設置されているGoogleタグがステータスと共に表示されます。
各タグの名称の下に表示されているのが設置しているIDになります。
これらを確認することによって意図しているタグが正常に設置されているかを簡単に確認することができます。

タグの色によってステータスが表されています。
緑色: タグに問題はありません
青色: 軽度の設定エラーや、サイトのタグ設定に改善案があります
黄色: 結果データに影響を与える可能性があります
赤色: タグに重大な設定問題があります

黄色と赤色のタグ表示があった場合は早急にタグの設置方法等を確認して修正することをお勧めします。

ウィンドウの左下にある「STOP RECORDING」をクリックすると記録を終了します。
記録を終了すると、Google Tag Assistant RecordingsウィンドウにAnalysis Reportが表示されます。
このレポートには、記録されたページ数と配信されたタグ数の概要が表示されます。

更に詳しいレポートを確認したい時は「Show Full Report」をクリックすると記録の詳細が表示されるので
確認したい詳細レポートを選択してください。

chrome ウェブストア：Tag Assistant (by Google)

Google Maps API keyがきちんと設定されているのかを確認するツールです。
新しくGoogle Mapを設置した時や、突然Google Mapが表示されなくなった時などに設定の確認をすることができます。

Google Maps API keyを設置しているページにアクセスするとアイコンが緑色になります。

アイコンをクリックすると現在のページで表示されているGoogle MAPに使用しているAPI keyの種類と
設置しているAPIの情報を表示してくれます。
設置しているAPIに問題がある場合はアラートが表示されるので、内容を確認して修正してください。

2018年7月16日からGoogle Map APIがGoogle Maps Platformsという名称に変わって、
今まで無料で使えていたAPIが有料になりました。
APIは制限がありますが、無料でも使用できるので今まで利用していたサイトでは無料版のAPIに切り替えて継続した方も多いと思います。
最近になってクライアントから突然Mapの表示がされなくなったとの相談を受けることが増え、原因を調べてみたところ、皆さん共通して同じ原因でした。
この無料版APIの登録時に有料版を1年間無料で利用できるプランで登録しており、丁度その無料で利用できる期間が終了してしまっておりました。
Google Maps Platform API Checkerで確認しても問題がないのに表示されない場合はこれが原因かもしれないので確認してみてください。

chrome ウェブストア：Google Maps Platform API Checker

リンクをクリックした際に新しいタブで開いてくれるちょっと便利なChromeの拡張機能です。
Windowsの場合はCtrlを押しながらリンクをクリックすれば新しいタブで開いてくれますが面倒くさがりやな自分はこのツールを利用しています。
細かい設定はしていませんが、リンク先が同一ドメインの場合は新しいタブで開かない設定だけはしてあります。
調べ物をする時には自動で別タブで開いてくれるので地味に重宝しています。

色々な設定項目が用意されているので、他にも便利な使い方があると思うので試してみてください。

chrome ウェブストア：Link Blanker

調べ物をしているとタブがこの様な状況になってしまうことはあるあるだと思います。
そんな時にOneTabのアイコンをクリックするだけで、全てのタグを1つにまとめてくれます。

1つのタブにまとめた後は、いっぺんに復元することもできるので一時的なブックマーク替わりに利用することもできます。
もちろんブラウザを閉じずにまとめたサイトを一気に閉じることも可能です。

chrome ウェブストア：OneTab

リンク状況をチェックをしたいページにアクセスしてアイコンをクリックします。

Linksで表示されるのがページ内のリンク総数になります。
リンクチェックを開始するとQueueの数が減っていき、0になるとチェックが完了となります。
有効なリンクはValid linksとしてカウントされ、設定に誤りがある場合はWarningsにカウントされます。
Invalid linksは無効なリンクになるので、WarningsとInvalid linksがある場合は修正をしてください。

アイコンを右クリックしてオプションを選択すると、設定画面が表示されます。
私は特に細かい設定はしていませんが、赤枠の2カ所にはチェックを入れて利用しています
新規でサイトを制作した時やページを追加した際にはこちらのツールを利用してリンク切れ等がないかを確認できるので便利です。

chrome ウェブストア：Check My Links

キャプチャ―を取りたいページを開きアイコンをクリック

現在表示しているページの全体をキャプチャしてくれます。
キャプチャ画像の拡張子は設定でpngとjpgどちらかを選択できます。
デザイナーさんに参考サイトの提示をする際や、お客さんと打ち合わせの時などに画面全体を見ながら話を進められるので便利です。

chrome ウェブストア：Full Page Screen Capture

アイコンをクリックするだけで閲覧中のページのURLをQRで表示してくれます。
今ではどのスマホでもQRコードリーダーが標準で搭載されているので、実機でのスマホ表示確認をする際に効率よく作業を進めることができます。

chrome ウェブストア：The QR Code Extension

こんな感じで、そのサイトが利用しているサービスやライブラリの情報が表示されます！

chrome ウェブストア：Wappalyzer

アイコンをクリックして表示確認をしたいデバイス選択し、ページをリロードするだけでUI表示が切り替わります。
注意点として、ツールを起動中は新規タブなどで別サイトにアクセスした際にもこちらの設定が効いてしまいます。
UIの確認ができたら端末選択解除をすることを癖付けるようにしましょう。

chrome ウェブストア：FireMobileSimulator for Google Chrome™

Webディレクターの方でこれらの機能をまだ使ったことがないようでしたら
是非一度試していただき、皆さんの業務効率のお役に立てますと幸いです。

日進月歩のweb業界で、ECBBでは自ら進んで常に新しい情報を吸収できるwebディレクターを募集しています！
興味がありましたらぜひ、ECBB採用ページをご覧ください！！