今回はWeb制作で使える便利なブックマークレットをまとめてみました。
Webサイトのデザイン時にはデベロッパーツールや拡張機能を使っている方も多いと思います。ブックマークレットの良い点は、クリックひとつで簡単に実行できるところです。
ブックマークレットをうまく活用することでWeb制作を効率化することができます。
ブックマークレットとは
ブックマークレットとはブックマークからスクリプトを起動し、ブラウザ上で処理を行う簡易的なプログラムです。ページの一部を加工したり、ページ内の情報を取得したりすることができます。
ブックマークレットの登録方法
ブックマークレットの登録方法には以下の２通りがあります。
（１）ブックマークレットのリンクをブラウザのブックマークバーにドラッグ＆ドロップ
（２）ブラウザのブックマーク追加からリンク先としてブックマークレットのURLを登録
ブックマークレットを使うときは、処理を行いたいページを開いてからブックマークをクリックしてください。
便利なブックマークレット12選
指定要素のハイライト
フォームで指定したタグ、ID、クラスをもつ要素をハイライトしてくれます。また、要素をクリックすることでその要素の階層やタグなどを確認できます。
配置・サイズ・余白・パディングの確認
クリックした要素のposition、width、hight、margin、paddingなどが表示されます。デベロッパーツールを使うよりも視覚的にわかりやすく、手軽に確認することが可能です。
レスポンシブサイトの確認
５つの画面サイズの表示を確認することができます。デフォルトでは「320x480, 320x568, 600x800, 768x1024, 1200x800, 1080x1920」の５つのサイズに対応しています。カスタムサイズを設定することも可能です。
フォントチェック
クリックした要素のフォントを確認することができます。指定されているfont-family、font-size、line-heightの確認が可能です。デベロッパーツールを使うより手軽に確認ができます。
ページ読み込み速度の分析
ページ表示のどこに時間がかかったかチェックするブックマークレット
ブラウザ表示にかかった時間を確認することができます。サーバーとの通信時間やブラウザの読み込み処理の時間など、各パートごとにかかった時間と改善案を提示してくれます。どの処理で時間がかかっているのか原因を突き止める助けとなるツールです。
alt属性のチェック
ブックマークレットを実行すると画面の左端に画像とalt属性を一覧で表示してくれます。もしalt属性を指定してない場合は、nullと表示されます。alt属性はアクセシビリティの向上やSEO対策としても確認しておきたい点です。
ページのワイヤーフレーム化
ブックマークレットを実行すると表示しているページをワイヤーフレーム化してくれます。コンテンツが非表示になるので、ページ構造だけに焦点を当てたいときにも便利です。ただし、CSSの実装方法によってはうまく変換されない場合があります。
グリッド・ルーラー表示
ページ上にグリッドやルーラーを表示することができます。レイアウトの確認や表示のずれを修正するときに重宝します。またUnit機能を使えば、ドラッグで２点間の距離を測ることも可能です。
メタ情報・OGPの確認
ブックマークレットを実行するとページのメタ情報を表示してくれます。title, meta descriptionなどのメタ情報やFacebook OGPやTwitterカードの情報も確認できます。
グリッドシステムのレイアウト調整
ブックマークレットを実行すると指定したフレームワークのグリッドを表示してくれます。対応しているフレームワークはFoundation2, 3, 4, 5とBootstrapの2, 3です。グリッドシステムを使用したレイアウトを調整するときに重宝します。
背景パターンを試す
背景パターンを変更して表示を確認することができます。背景パターンは全部で329種類あり、どのような背景が自分のサイトに適しているのか考える手助けとなります。
リアルタイムにテキストを編集
表示中のウェブページのテキストや画像をその場で編集するブックマークレット
ブックマークレットを実行するとページ内のテキストを直接編集できるようになります。編集したい箇所をクリックすれば、点滅カーソルが現れキーボードで編集可能になります。また、BSキーあるいはDeleteキーで要素の削除も可能です。
