先日から、WEB制作をするときは、動作確認のしやすさからBliskというブラウザを使用しています。
このBliskというブラウザは、Chromeと同じBlinkレンダリングエンジンを使用しているため、
Chromeの拡張がそのまま利用できます。
なので僕は、WEB制作向けブラウザのBliskと組み合わせて利用すると、より一層を制作作業がはかどりそうなChrome拡張をインストールして利用しています。
以下では、そのインストールしたChrome拡張について備忘録がてらまとめたいと思います。
目次
Bliskと合わせて使いたいChrome拡張
WEB制作にあると便利かもしれないブラウザ拡張。
ColorPick Eyedropper
閲覧中のページの好きな場所からカラーコードを取得することができる拡張です。
サイトなどを見ていて「この色いいな」なんて思ったときなどに。
MeasureIt
MeasureIt（配布終了）
ページ上にある要素のピクセル数を測るための定規です。
Dimensions
マウスカーソルを置いた場所の幅と高さを手軽に取得することができます。
幅と高さは、拡張が自動で判断して表示してくれます。
FireShot
現在閲覧中のページのスクリーンショットを手軽に撮ることができる拡張です。当然、ページ全体のスクリーンショットも撮ることができます。
Bliskのスクリーンショット機能は、まだ実装されていないので、これで代替。
Alt & Meta viewer
画像のAlt属性やtitle属性を見やすくツールチップで表示してくれる拡張です。
Alt・title属性は、ソースコードでも見ない限り通常のブラウジングでは見ることができないため、なかなかチェックのしづらい部分ではありますが、この拡張を利用すると、手軽に表示させることができます。
また、ソースを見なくてもメタタグ情報をクリック一発で見ることができます。
Create Link
WEBページ上の情報を利用して、ワンクリックでリンクタグなどを作成できる拡張です。
リンクタグ以外にも、使い方次第では様々なタグをワンクリック生成することができます。
Check My Links
ワンクリックで、WEBページ上のリンクの有効性をチェックしてくれる拡張です。
WordPressなどを使っていると、リンク切れチェックをするならBroken Link Checkerプラグインなどもあります。なので、Broken Link Checkerでリンク切れページをチェックして、リンク切れページを表示させてからは、この拡張で「どのリンクが切れているのか」を見つけ出すといった使い方をすると便利。
Clear Cache
ブラウザキャッシュをワンクリックで削除してくれます。
サーバーにブラウザキャッシュが残っていると、古いキャッシュが残っていて表示がおかしくなってしまうことが稀にあります。そういった時は、ブラウザのリロードボタン押せば大抵は解決しますが、それでもなぜかキャッシュが残ってしまって動作不良を起こしているときは、これで削除します。
ちなみに、Bliskのオートリフレッシュ機能を利用している場合は、ブラウザキャッシュを無効にした状態で自動更新してくれます。
CSSViewer
マウスをオーバーしたHTML要素で利用しているフォントやフォントサイズ、色、背景色を手軽に取得することができます。
デベロッパーツールでも取得はできるのですが、こちらの方が動作は軽いです。
HTML5 Outliner
閲覧中のページのアウトラインをチェックすることができる拡張です。
HeadingsMap
HTML5のアウトライン構造を詳細にチェックすることができる拡張です。
アウトラインだけならHTML5 Outlinerという拡張もあるのですが、こちらはセクション要素もチェックできます。
Incognito This Tab
現在閲覧中のページをワンクリックでシークレットウィンドウで開くことができる拡張です。
シークレットウィンドウは、ブラウザキャッシュの影響のないページ確認をするときに便利なので、ワンクリックで手軽に開けるようにするため利用します。
NoFollow
閲覧中のページが「noindexか？」や「nofollowか？」などをソースを見なくてもチェックすることができる拡張です。
また、nofollowが入っているリンクは、赤の破線で囲まれて表示されるので、一目でわかるようになります。
OGP Checker
ワンクリックで、FacebookのOGPデバッガーを用いてOGP情報が適切かどうかをチェックすることができます。
Redirect Path
リダイレクトが通った経路を一覧で表示してくれます。
ソースなどを確認する必要がないので非常に楽です。URLを転送した時に、正しい経路を通っているかのチェックなどに。
SimilarWeb – Website Ranking and Insights
SimilarWeb – Website Ranking and Insightsc
競合サイト等の分析ツールです。
このサイトの大まかなアクセス数、参照元、流入キーワードなどが分かります。
まとめ
個人的に、Bliskと併用するなら、これぐらいの拡張で十分かなと思います。
Bliskデフォルトの機能と、これら拡張機能を組み合わせることによって、ある程度効率よくサイトの作成や、チェックができるかと思います。
以前に普通のChromeを利用していた時は、これらに加えて、ユーザーエージェントスイッチャーやレスポンシブチェック拡張などをインストールしていましたが、そういったものは不要になりました。
サイト Blisk
