45to75
ドラッグで選択した範囲の文字数を計測する拡張機能。
日本語の場合は、文章の 1 行の文字数は 35 ~ 42 文字が適切だと言われています。文字数が少なくても多くても読みにくくなります。
ただ、サイトをデザインする時に、いちいち文字数を数えるのは面倒です。そこで出番となるのが 45to75 。
テキストをドラッグで範囲選択し、右クリックすると「Measure:文字数」が表示されます。
簡単かつ瞬時に 1 行の文字数を確認できます。
尚、45to75 の名前は、英語の場合の 1 行の文字数が 45 ~ 75 文字が最適だと言われていることから付けられています。
AMP Validator
AMP エラーが出ていないかを瞬時に検証できる拡張機能。
AMP 検証ツール The AMP Validator と同等の検証が可能です。
ツールバーに表示されるアイコンの色で、AMP 対応の状態を確認できます。通常ページにアクセスすると、アイコンの色はグレーか青で表示されます。
グレーであれば、そのページには AMP ページがありません。
リンクアイコン付きの青であれば、そのページには AMP ページが存在します。
アイコンが青の場合は、アイコンをクリックすると AMP ページに移動できます。AMP ページに移動後は、アイコンの色が緑か赤で表示されます。
緑であれば、AMP 検証に合格しています。
赤であれば、AMP エラーが出ています。また、表示される数字で、エラーの数を確認できます。
アイコンが赤の場合は、アイコンをクリックするとエラーの内容が表示されます。
また、Debug をクリックすると The AMP Validator に移動し、より詳細な検証が可能です。
アイコンの色を見るだけで、AMP 検証の結果が分かる優れものです。
Awesome Screenshot
スクリーンショットを撮影できる拡張機能。
撮影範囲は、「現在見えている範囲」「ページ全体」「任意に選択」など自由に選べます。
また、撮影後に、文字や図形を入れることが可能。さらに、WebM 形式の動画も撮影できます。
ChromeLens
視覚障害や色覚障害の方が、どのように見えているかが分かる拡張機能。サイトのアクセシビリティを視覚的に把握できます。
インストール後は、デベロッパーツールのタブに「ChromeLens」が追加されます。
「Enable lens」にチェックを入れ、視覚・色覚の種類を選ぶと、画面の表示が自動的に切り替わります。
また、「Run accessibility checks」ボタンをクリックすると、重大なアクセシビリティエラーがないかの検証ができます。重大なエラーがある場合は、エラー項目が表示されます。
エラー項目をクリックするとデベロッパーツールの Elements タブに遷移し、エラー箇所を教えてくれます。
アクセシビリティの確認に欠かせない拡張機能です。
Clear Cache
Chrome のキャッシュなどをワンクリックで削除できる拡張機能。
CSS を変更すると、変更内容が反映しない時があります。原因は、キャッシュされた古い CSS でサイトが表示されるため。また、古いキャッシュが原因で、表示が崩れる、正常に動作しないなど不具合が発生することもあります。Chrome の設定を開きキャッシュを削除すればいいのですが、ちょっと面倒です。
Clear Cache を使えば、ツールバーのアイコンをクリックするだけでキャッシュを削除できます。オプションから何を削除するのかを選択でき、キャッシュのほかに、履歴や Cookie などもワンクリックで削除が可能です。
インストールをしておいて、損はありません。
Google 翻訳
日本の Web サイトは、海外のサイトと比べると 5 年ほど遅れていると言われています。理由の 1 つとして、最新技術のドキュメントが英語で書かれていることが挙げられます。
しかし、Google 翻訳があれば、英語で書かれたドキュメントもすらすら読めます。昔と比べると、翻訳の精度は飛躍的に向上しています。英語が話せない私には、なくてはならない存在です。
また、アプリも愛用しています。
JSON Viewer
JSON 形式で書かれたファイルが見やすくなる拡張機能。
例えば、JSON 形式の WordPress の WP REST API を取得すると、ブラウザには縮小された状態で表示されます。
このままでは、まともに内容を確認できません。しかし、JSON Viewer をインストールすれば、自動的に整形しくれます。しかも、ハイライト表示に対応しています。
ハイライト表示のテーマは、デフォルトのほかに、ライト系が 7 種類、ダーク系が 19 種類が用意されています。また、フォントサイズなども変更できるので、自分好みに調整できます。
Retina Check Extension
サイトで使っている画像が、Retina ディスプレイできれいに表示されるかを確認できる拡張機能。
ツールバーのアイコンをクリックすると、そのページ内の全ての画像を検証してくれます。
検証結果は、3 つの色で区別されます。
| 検証結果の色 | 検証結果の内容 |
|---|---|
| 赤 | 画像サイズが小さく、Retina ディスプレイでは荒くなる |
| 緑 | Retina ディスプレイできれいに表示され、かつ画像サイズが最適 |
| 紫 | Retina ディスプレイできれいに表示されるが、画像サイズが大きすぎ |
また、サイト上の画像に、検証結果の色でフィルターがかかります。例えば、黄色の画像が…。
緑がかった色になります。つまり、この画像は、きれいに表示される上にサイズが最適です。
Retina ディスプレイ搭載の MacBook などを持っていなくとも、簡単に画像のチェックができます。
Save to Pocket
Web サイトを保存するサービスの Pocket に、ワンクリックで保存できる拡張機能。
いいアイデアや問題の解決方法などが書かれたサイトを簡単に保存できます。また、保存後はすぐにタグ付けもでき、思いどおりに分別できます。
Pocket はアプリもあるため、保存したサイトは PC からでもスマホからでも読み返せます。