JavaScriptバリバリなサイトの救世主Head JS

The only script in your <HEAD>(head要素内の唯一のスクリプト)

このキャッチコピーが印象的なHead JSがすごく便利なんです。

クロスブラウザを実現したり、jQueryのプラグインを利用するためにhead要素内がscript要素だらけになっているサイトって結構多いですよね。

そんなJavaScriptバリバリなサイトのhead要素内をすっきりしてくれるのがHead JSです。すっきりさせてくれるだけでなく、ものすごく多機能です。

まずはhead要素内に、<script type="javascript" src="./head.js"></script>といれます。それだけで様々な機能が使えます。

英語を理解できる人はHead JSのサイトを見ていただくとして、使ったことのある機能をざっくり紹介しつつ、応用例なんぞ。

JavaScript loader

JavaScriptファイルをCSSの@importのように読み込んでくれます。これだけでhead要素内の多くのscript要素を一掃できます。

<script type="javascript" src="./script1.js"></script>
<script type="javascript" src="./script2.js"></script>
<script type="javascript" src="./script3.js"></script>
<script type="javascript" src="./script4.js"></script>

上記のソースもこんなにすっきり。

head.js('/script1.js', '/script2.js', '/script3.js', '/script4.js');

head.js内に直接記述してしまえば、HTMLファイルを一切編集しないでJavaScriptファイルを管理することも可能です。

HTML5 enabler

html5.jsと同様に、html5未対応ブラウザでもhtml5の要素が使えるようにしてくれます。つまり、html5.jsが不要になります。

Screen size detector

スクリーンサイズを判別してくれます。具体的にはhtml要素にlt-640(640px未満)といったclassを追加してくれます。

CSS3のMedia Queriesに対応していないブラウザでもiPhoneなどのスマートフォンやiPadなどのタブレットに合わせたデザインができるようになります。つまりMedia Queries関連のJavaScriptが不要になります。

jQueryと組み合わせて任意のclassを追加するのにも便利です。下記のコードはスクリーンサイズが960px未満ならnarrow、960px以上ならwideといったclassをhtml要素に追加しています。スクリーンがリサイズされた場合にも対応しています。

if($('html').is('.lt-960')) {
  $('html').addClass('narrow');
} else {
  $('html').addClass('wide');
}
$(window).resize(function(){
  if($('html').is('.lt-960')) {
    $('html').removeClass('wide').addClass('narrow');
  } else {
    $('html').removeClass('narrow').addClass('wide');
  }
});

Browser detection

ブラウザ判別です。これもhtml要素にclassを追加します。例えばIE7以下ならhtml.lt-ie7となります。

jQueryと組み合わせると特定のブラウザのみに特定の処理を追加するといったことも可能です。

if($('html').is('.ie6')) {
  $('*:first-child').addClass('firstChild');
}

他にも機能はありますが、使ったことないので使用感はなんとも言えません。しかし、これだけでもホントに助かります。ただ釘を刺すなら、JavaScriptがOffの環境もきちんと考慮して作らないといけませんね。そういう意味では、ちょっと多機能すぎてJavaScript依存を増長させる面はあるのかなと。

どんなにかっこよく作れても、JavaScriptがOffでもデザインが崩れず、CSSがOffでも情報が損なわれないっていうのが、Web制作の一つの肝ですから。