投稿日 2012-05-24
著者 Quidam

HTML5 Boilerplateのhtmlスニペットを紐解く

Blogのカテゴリプログラミングの勉強
Blogのカテゴリ制作ノウハウ

HTML4.01, XHTML1.0で「いつもの感じ」のソースコードにすっかり落ち着き、特に迷うこともなかった私は、Boilerplateのスニペットをみた時、結構衝撃を受けました(；´Д｀)。今回は、Boilerplateのコアであるhtmlの内容・スニペットをひとつずつ見ていき、それらが前回テーマにした「5つの要件」にどのように作用するかを紐解いていきます。「新しい技術に取り組みたい、けど何から始めればいいか分からない！」そんな方のヒントになると幸いです。

それでは早速、謎解きスタートです！

ソース全体

まずは全体から、次のような特徴が見て取れます。

文頭に、見慣れないコンディショナルコメントがある。
＜meta＞に「X-UA-Compatible」というのがある。
＜meta＞に「keyword」がない。
＜meta＞に「viewport」がある。
読み込まれているスタイルシートは、style.cssのみ。
modernizr-2.0.6.min.js以外のjavascriptは、全て＜/body＞閉じタグの直前に記述されている。
IE6用のコンディショナルコメントが、文末にある。

それぞれを細かく見ていきます。

IE Conditional Comment

htmlファイルの文頭に、ひときわ目立つコンディショナルコメントがあります。

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="ja"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="ja"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

この一連のifステートメントは、IEのバージョンを検知し、関連のあるclassを、＜html＞タグに適用します。つまり、
IE6のときは、＜html class=”ie6”＞
IE7のときは、＜html class=”ie7”＞
が有効になります。最大のメリットは、特定のIEに対するCSSの修正に、ハックを使う必要がなくなるという点です。

たとえば、今までIE6に対して次のようなスターハックでCSSを修正していたところを

.hoge { margin-top: 10px; *margin-top: 5px; }

このコンディショナルコメントを採用することで次のように指定することができます。

.hoge {margin-top: 10px; }
.ie6 .hoge { margin-top: 5px; }

めっちゃステキや～ん（・∀・）ｲｲ!!

※ class=”no-js oldie”のclassは、プログレッシブエンハンスメントを実現する modernizr.js と連動して動作します。~~これについては、modernizr.js の紐解きの際に触れる予定です。~~

このブロックでの処理は、5つの要件のうち【論理的かつクリーンなコード】を実装するものと考えられます。

X-UA-Compatible / Google Chrome Frame

IEの8および9には、複数のレンダリングエンジンが搭載されています。このことから、ユーザがIE8や9を使用していても、閲覧環境はそれより下位バージョンのレンダリングエンジンであることがあります。これを避け、IEユーザに対しても可能な限り最良な体験をしてもらうためのコードが、デモページ8行目にある「X-UA-Compatible」と終盤にあるIE6用のコンディショナルコメントです。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

このmetaタグは、IEに対し次の2点を伝えます。

搭載されているレンダリングエンジンのうち、もっとも新しいものを使用すること。
すでに「Google Chrome Frame（IEのプラグイン）」がインストールされているのであれば、それを使用すること。

また、終盤にある、次のコンディショナルコメントは、IE6 に対してGoogle Chrome Frame のインストールを促すポップアップを表示します。

つまり、IE6に対してはサイト側で調整するのではなく、ユーザ側に対応を求める、という考え方です。
このあたり、お客さま向けのサイトではまだまだ実装は難しいですが…。

<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->

※IE6に完全対応する場合は、このスニペットは不要です。
※ver3.0では、このスニペットではなく、＜body＞直下にコンディショナルコメントとして挿入されています。ver3.0の方では、別のブラウザをインストールするか、Chrome Frameをインストールするかを聞く内容を表示する処理になっているので、そちらの方がいいですね。

X-UA-Compatible は、.htaccessでの指定がおすすめ。

8行目の X-UA-Compatible の記述は、invalidです。
同じ処理を.htaccessで指定することができるので、htmlに＜meta＞で指定するのではなく.htaccessで処理しちゃいましょう。

このブロックでの処理は、5つの要件のうち【プログレッシブエンハンスメント】を実装するものと考えられます。

Mobile Viewport

モバイルデバイスのサイトを作る場合、またレスポンシブデザインを実現するためにも必要な Viewport メタタグです。ver2.0とver3.0でも違いが出ています。ここは、求めるものに応じて変えたほうがいいでしょう。

//ver2.0
<meta name="viewport" content="width=device-width,initial-scale=1">
//ver3.0
<meta name="viewport" content="width=device-width">

スマホ対応をする際は、Viewport単体ではなく、Media Queriesと合わせて説明されることが多いと思いますが、~~Media Queriesについては、CSSを紐解く際に触れたいと思います。~~

このブロックでの処理は、5つの要件のうち【モバイルファースト / レスポンシブデザイン】を実装するものと考えられます。

Viewport参考サイト

Viewport and Media Queries – The Complete Idiot’s Guide-（英）
Safari Developer Library（英）
iPhone生活（日）

Put Scripts at the Bottom

jQueryを始め、Google Analyticsのコードや独自に使用するJSファイルの読み込みもすべて、コンテンツの後、＜/body＞の前に記述されています。ブラウザはスクリプトを読み込んでいる間、それ以外のダウンロードを開始しません。つまり、並行ダウンロードができないため、ページの先頭に記述があると結果的に表示に時間がかかってしまいます。これを回避するため、JSはページの表示の後に読み込むべき、という考え方が「Put Scripts at the Bottom」です。

Best Practices for Speeding Up Your Web Site（Yahoo! Developer Network：英）

ただし、Modernizr.js は先頭での読み込みが必要

Modernizr.js はレンダリングが開始される前までに実行されていなければならないので、唯一＜head＞内で読み込みます。

このブロックでの処理は、5つの要件のうち【プログレッシブレンダリング】を実装するものと考えられます。

jQueryの読み込みとフォールバック

jQueryは多くのサイトで採用されているJSライブラリなので、ユーザのブラウザに既にキャッシュされている可能性がある（Cross Site Caching）こと、そして、Google CDNは、サイトが設置されたサーバよりはるかに早いであろうことから、jQueryをGoogle CDNからダウンロードしています。ただ万が一、Google CDNがダウンしていたら？？
それに対応するのが、その下の記述です。CDNからのダウンロードが出来なかった場合に、自サーバ内にあるjQuery.jsファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>

Google Analyticsコードの非同期読み込み

やっと、、htmlスニペットの最後の項目です。┐(´д｀)┌ ﾂｶﾚﾀ
ページの終盤に、Google AnalyticsのJSコードがあります。

<script>
var _gaq=[['_setAccount','UA-●●●●●-●'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

これにより、ページの＜head＞内に、次のような記述が追加され、Google Analyticsが非同期で読み込まれるようになっています。

※ver2.0では、GAを非同期で読み込むため、Modernizr.jsに組み込まれたYepnope.jsを使用していますが、ver3.0ではYepnope.jsを使用していません。