レスポンシブ対応、ページ確認が劇的に楽になるブックマークレット!

ウェブ制作のページ確認において、非常に便利なブックマークレットをつくったので紹介します。

全体を俯瞰する感じでサイト制作できます

ウェブ制作において、きちんとページが表示されているかをチェックする検証作業は、とても大変ですが、このブックマークレットをつかえば、非常に効率的にページ確認 を行うことができます。

サイト構築時は、通常は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がNGなサーバーはプレビューできません

サーバーによっては、iFrameでの表示を許可してないサイトがあるので、その場合は、プレビューできません。 例えば、Facebookは、iFrame内での表示を許可していません。

自分以外のサイトでの使用は控えめに

リンク先のページを、簡単に、大量にプレビューすることができるので、結果的に、大量のリクエストをサーバーに送ることになります。

他の人のサーバーに迷惑かけないためにも、自分の管理してるサイト以外では、あまり行いすぎないようにしてください。

基本的にこのブックマークレットは、制作時の検証用なので、ローカル環境でバンバン利用してください。

同時にたくさんプレビューすると重いです

たくさん同時にプレビューすると、ブラウザの動作がかなり重くなり、メモリもたくさん消費するので、注意してください。

ソースコード

このブックマークレットのソースコードを掲載します。自由に改修してつかってください。

ソースコードを編集した場合は、ブラウザのコンソールにコピペしたら動かせるので、それで開発していってください。

完成したら、以下のサービスなどを利用してブックマークレット化できます。

http://userjs.up.seesaa.net/js/bookmarklet.html

エントリー一覧

ソーシャル

About This Site

HTML、CSS、Javascript、デザイン、3D、モバイルアプリ、CMSなど、ウェブ制作関連の話題を扱うブログです。Fireworksのオリジナル拡張機能の配布や、デザインリソースの配布、オリジナルツールの公開も行っています。

About Me


大阪在住フリーのウェブデザイナーの、ピクセルイメージ田中です。長年、ウェブサイト構築のお手伝いを行っており、デザインやプログラムを中心に、Flash全盛期につちかったモーショングラフィクスのセンスを生かした動画作成や、サイト構築に便利なCMSの開発も行っています。

JS CMS -- DBレス・簡単導入・無料のWebサイト構築用オープンソースCMS
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...