ブックマークレットで簡易チェック補助ツールを作ろう！

ウェブサイト制作をやっていると、チェックするべき項目の多さからチェック漏れしてしまうことがよくありますよね？例えば「aタグの反応する範囲が小さすぎる」なんてミスを自分はよくしてしまいます。

今回はそんなミスを見つけやすくするために、ブックマークレットを使用してチェックの補助ツールを簡単に作成する方法をご紹介したいと思います。

ブックマークレット

ブラウザはブックマークやURLバーから任意のjavascriptを実行することが出来ます。この時に実行するプログラムのことを「ブックマークレット」と言います。

簡単な例

URLバーに

javascript:alert('ブックマークレットのテスト');

と入れてEnterしてみて下さい。アラートが表示されたかと思います。

これが簡単なブックマークレットの例です。

ブックマークレットは

javascript:(実行したいjavascriptコード)

の形式でURLバー、もしくはブックマークから実行することが出来ます。

aタグの反応範囲を視覚的に表示

それでは、ブックマークレットを利用して冒頭に挙げた「aタグの反応範囲が小さすぎる」というミスを防ぐために、aタグの大きさを視覚的に表示してくれるブックマークレットを作ってみましょう。

javascriptソースは非常に簡単で、以下のとおりです。

(function(){
  $('a').css('outline', '1px solid red');
})();

aタグにoutlineを設定することでaタグの範囲を視覚的に表示させてしまいます。borderと違ってoutlineはレイアウトに影響を与えないので、今回のようなデバッグ目的に最適です。

ブックマークレットは「javascript:」を先頭に付けるだけなので以下の様になります。

javascript:(function(){
  $('a').css('outline', '1px solid red');
})();

これをURLバーに貼り付けてEnterしてみてください。aタグの要素が赤く囲まれるはずです。（GoogleChrome/Macだとペーストする際に「javascript:」の記述が消えてしまったので、その場合は直接入力してください。）

サイトがjQueryを読み込んでいない場合

先ほどのソースコードはjQueryを使用しているため、このままだとjQueryを読み込んでいないサイトでは動作しません。

そのため、jQueryを読み込むコードを追加しましょう。ソースコードは以下のとおりです。

(function(){
  function main() {
    $('a').css('outline', '1px solid red');
  }
  if (typeof jQuery === 'undefined') {
    var scrTmp = document.createElement('script');
    scrTmp.type = 'text/javascript';
    scrTmp.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
    document.body.appendChild(scrTmp);
    scrTmp.onload = main;
  } else {
    main();
  }
})();

関数mainに実際に実行したい処理を記述し、jQueryがサイトに読み込まれていない場合は、jQueryを読み込んでから実行するようになっています。

このようにしておけばjQueryを読み込んでいないサイトでも使える汎用性の高いブックマークレットが作成できます。

以上

今回はaタグの視覚的な表示のみを例として挙げましたが、発想次第で色々なチェックが可能です。

例えば、

• モバイルサイトなのに奇数サイズの画像を使用していないか
• imgタグのwidth/heightの指定が本来の画像サイズと異なっていないか
  また、モバイルサイトの場合本来の画像サイズの半分のサイズの指定となっているか
• 1クリックでW3Cのチェックをする
  （この場合はサーバーサイドのプログラムも少し必要かと思います）

などが挙げられます。

チェック漏れは永遠の課題ではあるのですが、人間の注意力には限界があるので出来る限りツールやシステムに頼って、注意しなくてもミスが見つかるようにしたいですね。

以上、たにっぱでした〜