PIXEL LAB
ウェブ制作のページ確認において、非常に便利なブックマークレットをつくったので紹介します。
ウェブ制作において、きちんとページが表示されているかをチェックする検証作業は、とても大変ですが、このブックマークレットをつかえば、非常に効率的にページ確認 を行うことができます。
サイト構築時は、通常は1ページづつ移動し、1画面づつスクロールして確認していきますが、このブックマークレットをつかえば、ページを縮小してプレビューするので広いエリアを一度に確認 でき、さらに複数ページを1画面でまとめて確認 できるので、ページ全体を俯瞰するように、ページ確認が行えます。
ボタンをブックマークバーへドラッグするだけで、すぐに導入できます。 対応ブラウザは、Google ChromeとFirefox になります。(IEとSafariは非対応です)
↑ボタンをブックマークバーにドラッグ
通常の検証作業は、ひとつひとつページを開いて、上からスクロールして、、、という流れだと思いますが、このブックマークレットを使えば、ページを縮小して表示し、縦に長いページもまとめて検証できます。
縮小表示するので、本文の文言確認はできませんが、ページ全体を俯瞰してレイアウトを確認することができます。 縮小値は100%表示から、1/10表示まででき、自由に変更できます。
プレビューのブラウザ幅は自由に設定でき、さらに複数の画面幅を設定することができるので、非常の面倒なレスポンシブデザインの確認作業も簡単です。 例えば、幅1000pxのPC想定のブラウザ幅と、320pxのスマホ想定のブラウザを同時に表示・チェックできます。
画面上のリンク先のページを、現在のページから移動することなくプレビューできます。 とても強力で汎用的な機能で、サイトレベルでの確認が行えます。
キー | 動作 |
---|---|
上下キー | 0.1〜1.0%までの範囲で、プレビューの拡大・縮小サイズを変更できます。 |
左右キー | 0.1〜1.0までの範囲で、プレビューの拡大・縮小サイズを変更できます。 |
テンキー(0〜9) | 入力した番号に対応するリンクをプレビューします。 |
PAGE UP , PAGE DOWN | プレビュー履歴のページを順番にプレビューします。 |
スペースキー | プレビューの表示・非表示を切り替えます |
サイトマップや一覧ページを作成しておくと、より素早く確認作業が行えます。 さらに、Aタグに、data-auto='1' といれておくと、ブックマークレットを実行した時に、自動的にプレビューに登録します。よくプレビューするページなどは、登録しておくと、検証に便利です。
何十ページもあるサイトを作成するときにとても便利です。 サイトマップ、もしくは一覧ページをつくっておけば、確認作業もスムースです。
サイト制作以外に、普通のネットサーフィン時でも便利に使えます。 このブックマークレットを使うと、サイト全体を俯瞰しやすくなります。 ただし、大量にプレビューすると、その分リクエストを送ってしまうので、ほどほどに利用してください。
リンク先のURLが、現在のページと同一ドメイン内であれば、プレビューできます。
外部のドメインであれば、サーバー側の設定によって、プレビューできたりできなかったりします。 このブックマークレットでは、iFrameを利用してプレビューをおこなっており、外部ドメインの場合は、クロスドメインにひっかかるためです。
サーバーによっては、iFrameでの表示を許可してないサイトがあるので、その場合は、プレビューできません。 例えば、Facebookは、iFrame内での表示を許可していません。
リンク先のページを、簡単に、大量にプレビューすることができるので、結果的に、大量のリクエストをサーバーに送ることになります。
他の人のサーバーに迷惑かけないためにも、自分の管理してるサイト以外では、あまり行いすぎないようにしてください。
基本的にこのブックマークレットは、制作時の検証用なので、ローカル環境でバンバン利用してください。
たくさん同時にプレビューすると、ブラウザの動作がかなり重くなり、メモリもたくさん消費するので、注意してください。
このブックマークレットのソースコードを掲載します。自由に改修してつかってください。
ソースコードを編集した場合は、ブラウザのコンソールにコピペしたら動かせるので、それで開発していってください。
完成したら、以下のサービスなどを利用してブックマークレット化できます。
© 2007-2018 ピクセルイメージ