ホーム > Webテクノロジ > HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則

HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則

2011 年 11 月 22 日 tokkonoPapa コメントをどうぞ コメント

HTML5 logo

boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。

Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。

HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。

2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。

HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある。

2011年08月15日 待望のHTML5ベストプラクティス「HTML5 Boilerplate」バージョン2登場 | マイナビニュース より。

ここで言う ベストプラクティス とは、ブラウザ違いを吸収し効率の良い JavaScript や CSS のコードを書くためのノウハウはもちろん、Yahoo! の 「Best Practices for Speeding Up Your Web Site」 や Google の 「Web Performance Best Practices」 にまとめられている、主に応答性のよいサイトを作るためのフロントエンド改善策を指しているものと思われます。

また、HTML5 Boilerplate のお手軽なサブセットとなっている Initialir には、「簡単に」 とか 「さくさく」 とかの形容詞が付けられて紹介されています。

さて、実際にこれらのテンプレートを使ってみると、ベストプラクティス という一言で、または単に 「かんたん、サクサク」 という一言で終わらせるのはもったいない、という気がしました。そこで、近年の技術トレンドに照らし合わせて 「5つの原則」 という形にまとめ、それらがどのようにテンプレートに織り込んであるかを考えてみました。

これからテンプレートを使ってサイトを構築してみようという方の参考になれば幸いです :D 。

HTML5 BoilerplateとInitialirの構成

それぞれもっともベーシックな構成をダウンロードすると、その構成は下図のようになっていることでしょう （2011年11月現在）。

HTML5 Boilerplate の構成

HTML5 Boilerplate の構成

initializr の構成

initializr の構成

HTML5 Boilerplate には、サイトを最適化してリリースするためのビルド用スクリプトとツール群、サーバーの設定ファイル等が含まれていますが、これらについては、冒頭の IBM の記事等をご参照ください。

一方 Initializr の方は、HTML5 Boilerplate からインデックス・ページと css、js だけを抜き出したサブセット的な内容となっていることが分かります。

次に CSS と JavaScript ライブラリの構成モジュールについてです。それぞれは既に有名ですが、簡単なサマリを載せておきます。

モジュール 内容
CSS normalize.css デフォルト値が異なるプロパティを標準化すべく定義されたスタイルシートです。従来のリセット系 CSS を使ったスタイル定義に比べ、最終的な定義量が少なくなるというメリットがあります。
JavaScript Modernizr HTML5、CSS3 の機能が使えるかどうかをテストし、その結果を <html> タグのクラス名に設定します。またバージョン2からは yepnope.js を取り込み、非同期ローディング機能を持つようになりました。
html5shiv html5.js として知られる、IE8 以下に HTML5 のタグを認識させスタイル設定できるようにするための HTML5 enabling script です。また、HTML5 ドキュメントを正しく印刷させるためのスクリプト IE Print Protector も内包しています。
（2012年5月12日追記：最新版は aFarkas/html5shiv）
Respond.js IE8 以下などのメディアクエリ未対応なブラウザに、その機能を提供するライブラリです。IE でも、その幅に合わせた min-width、max-width のスタイル設定が適用できるようになります。

HTML5 Boilerplate では、「js/libs/modernizr-2.0.6.min.js = Modernizr 2 + html5shiv + Respond.js」 となっています。

一方 Initializr では、「js/libs/modernizr-2.0.min.js = Modernizr 2 + html5shiv」 で、Respond.js は独立しています。

今のところトータルとして両者に機能的な違いはありませんが、HTML5 Boilerplate の Respond.js は、メディアクエリ判定に Modernizr のそれを流用している特別版ため、合計サイズが小さくなっています。

2012年3月10日 注記

HTML5 Boilerplate では、バージョン3から Respond.js が除かれています。この辺の経緯は GitHub の Revert mobile-first media queries and remove respond.js での議論を読むと面白いかと思います。要は、モバイル用は Mobile Boilerplate に任せ、H5BP 本体はよりデスクトップ向けの開発に集中できるように モバイル・ファースト への対応は最小限にしようということのようです。

押さえておくべき5つの原則

さて、これらのテンプレートを使いこなすために押さえておくべき原則を、順に紹介していきます。

  1. モバイル・ファースト
  2. レスポンシブ・デザイン
  3. プログレッシブ・エンハンスメント
  4. 論理的でクリーンなコード
  5. プログレッシブ・レンダリング

1.モバイル・ファースト

要は 「スマホ → タブレット → デスクトップ」 の順にデザインしなさいという原則です。何を デザイン するかは 参考情報1 をご覧ください。ここではテンプレート css/style.css に、どのように反映されているかを見てみます。

css/style.css の前半は、normalize.css によるブラウザの違いを標準化するための設定です。そして中盤以降 ～ 終盤にそれぞれ次のようなブロックがあります。

テーマのスタイルを設定するブロック（中盤以降）
/* ===== primary styles =========================================
   Author:
   ============================================================== */
...
デバイス用のメディアクエリを設定するブロック（終盤）
/* ===== media queries ==========================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ============================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

メディアクエリの設定で、min-width: 480px は 「幅 480px 以上 （最小幅 480px）」 を、min-width: 768px は 「幅 768px 以上 （最小幅 768px）」 を意味しています。

つまり、最初の 「primary styles」 にはスマホ用スタイルを、min-width: 480px のブロックにはタブレット用を、min-width: 768px にはデスクトップ用スタイルを設定することが想定されています。

「かんたん、サクサク」 と、デスクトップ用のスタイルから設定していくと、最後のメディアクエリで設定を逆にしなければなりませんので、ご注意ください。（何を隠そう、この私です ;-) ）

また、これらの設定は、index.html の次のメタタグと対になっていることを覚えておくと吉です。

<meta name="viewport" content="width=device-width,initial-scale=1">
参考情報1
参考情報2

メディアクエリや viewport の設定について参考になりそうな記事を下に挙げますが、本記事で紹介している デザイン原則 と異なる趣旨で説明されているものを含みますので、ご注意下さい。

2.レスポンシブ・デザイン

前章の モバイル・ファースト のデザイン原則を支え、様々な大きさのデバイスに最適なユーザー・エクスペリエンスを提供するために必要不可欠な原則です。ただし、古い IE などメディアクエリを解釈しないブラウザへの対応が必要で、HTML5 Boilerplate では Respond.js を採用して対応しています。

Respond.js は、HTML5 Boilerplate では js/libs/modernizr-2.0.6.min.js に組み込まれ、HTTP リクエストの削減を図っています （Initializr では単独の js/libs/respond.min.js です）。

さてこういった仕組みもさることながら、レスポンシブ・デザインで重要なのは、デバイスに合わせて最適なサイズの画像を提供することではないかと思います。モバイル用デバイスの通信速度はデスクトップ環境のそれに比べ、まだ十分とは言えない状況にあります。デスクトップ用画像をそのままモバイル端末に食わせ、スタイル設定で縮小表示しているようではベストプラクティスとは言えません。

かといって各デバイス用に異なる大きさの画像を用意しておくのも大変です。そこで、PHP と JavaScript でこの問題に対応するスクリプトを 参考情報3 に紹介しておきます。

参考情報3

3.プログレッシブ・エンハンスメント

最新のブラウザには最新のテクノロジを使ったコンテンツを提供し、そうでないブラウザにもそこそこのコンテンツを提供する、ちょっと乱暴な言い方ですが、プログレッシブ・エンハンスメント はそんな考え方です。

これを実現させるために HTML5 Boilerplate では、Modernizr を取り入れています。参考情報4 に Modernizr の典型的な使い方がありますので、参考にして下さい。

ここでは、バージョン2から取り込まれた yepnope.js の条件付き非同期ローディングを使い、CSS3 の box-shadow に対応する例を示しておきます。Modernizr が 他の非同期ローダー ではなく yepnope.js を選んだ理由は、こういう使い方を想定してのことだと思います。

<script>
Modernizr.load({
	test: Modernizr.boxshadow,	// box-shadow が使えるかテストし、
	nope: "path/to/PIE.js",		// 使えなければ PIE.js を読み込み
	complete: function() {		// 読み込みが完了したら実行する
		$('適用するタグとかクラスとか').each(function() {
			PIE.attach(this);
		});
	}
});
</script>

（注：PIE.js で CSS3 に対応する方法は、本家の CSS3 PIE では推奨されていません。良い例が思い付かなくてすみません :-( タッチイベントが使える場合に SwipeJS をロードして画像ギャラリーを起動する例を Creating a Mobile-First Responsive Web Design – HTML5 Rocks に見つけました！）

Modernizr.load({
	test: Modernizr.touch && Modernizr.csstransitions,
	yep: 'js/swipe.js',
	complete: function() {
		...
	}
});
参考情報4

4.論理的でクリーンなコード

index.html の先頭に、ひときわ目につくコンディショナル・コメントがあります （lang="en" は、lang="ja" に変えましょう）。

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

これは従来の CSS ハックや、ただでさえ遅い IE に追加のスタイルシートを読み込ませる、次のようなコンディショナル・コメントを駆逐するものです。

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->

Paul Irish が提唱する使い方 は、次のようになります。

div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

このようにすれば、CSS ハックを使わず Valid なスタイルシートが出来上がりますネ。

さて、こういった IE に対する手厚い扱いは、次のようなマークアップにも表れています。

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

上記メタタグにより、複雑怪奇な IE の動作モードを、常にもっとも問題の少ない 最新モード にし、また可能であれば Chrome Frame を動作させます。

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

Google Chrome Frame

上記は、IE6 に対して、右のような Google Chrome Frame のインストールを促すポップアップを表示するスクリプトです。

ちなみに、X-UA-Compatible のメタタグは、HTML5 Boilerplate に同梱されている .htaccess の設定を用いれば index.html からは削除することができます。

何だかこの章は、「IE に対する特別待遇」 というタイトルがピッタリの内容ですが、あくまでも本来的な 目的 を原則としてみました ;-) 。

5.プログレッシブ・レンダリング

プログレッシブ・レンダリング を簡単に言えば、「イニシャル・ペイロード （ページを読み込みの初期負荷） を最小にし、かつ主要な要素から可能な限り早期に描画を行わせることにより、ユーザーが感じるサイト速度の向上を目指すこと」 です。

この原則は、Modernizr と他のスクリプトの読み込み位置の違いに端的に表れています。

...
	<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
...
</body>
</html>

つまり、Modernizr はレンダリングが開始される前までに実行されていなければならず、単に Put Scripts at the Bottom や Defer loading of JavaScript に従ってしまうと、レスポンシブな機能が働かなくなるので注意しましょう。もし、JavaScript の読み込み位置とページ表示速度の高速化について詳しくお知りになりたければ、拙作の scriptのdefer/asyncを理解し、ページの高速化方法を探る をご一読ください。

ところで、最初に読み込まれる Modernizr が CDN にアップされているともっとウレシイと思いませんか？ 実は、CloudFlare がスポンサーの CDN にあります！

http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js

Microsoft の CDN にも登録されています が、minify 版ではないので、デバッグ時などに使うにとどめるのが良いでしょう。

最後に、この原則に関する他のベストプラクティスを 参考情報5 に挙げました。色々コマゴマとありますネ。

参考情報5

まとめ

Web パフォーマンスに関するベストプラクティスが凝縮されているという HTML5 Boilerplate を、近年の技術トレンドに照らし合わせて、その中身を具体的に追いかけてみました。もちろんテンプレートという性質上、それ自体は単なる出発点でしかありません。そこにコンテンツを構築するためには、さらに細かなベストプラクティスを積み重ねていかなければならないでしょう。

しかし、基本的な原則を知った上でその仕組みをうまく活用していけば、それこそ 「簡単に、サクサクと」 スジの良いページを作ることができ、よりコンテンツ（中身）の制作に集中できるのではないかと思います。

おまけ

HTML5 Boilerplate と Initializr の index.html を比較してみると、それぞれに考え方の違いがあるようです。

HTML5 Boilerplate

<header> ～ <footer> までが、container で囲まれています。

</head>
<body>
<div id="container">
	<header>

	</header>
	<div id="main" role="main">

	</div>
	<footer>

	</footer>
</div> <!--! end of #container -->
...
</body>
</html>
Initializr

全体を囲むラッパーはなく、<header>、<article>、<footer> が個別のブロックで構成されています。

</head>
<body>
	<div id="header-container">
		<header class="wrapper">
			<nav> ... </nav>
		</header>
	</div>
	<div id="main" class="wrapper">
		<aside> ... </aside>
		<article>
			<header> ... </header>

			<footer> ... </footer>
		</article>
	</div>
	<div id="footer-container">
		<footer class="wrapper">
		</footer>
	</div>
...
</body>
</html>

パフォーマンス上に違いは無く、単に好みの問題だとは思いますが…。私は後者の方が好きです。なぜなら、既に <body> ～ </body> で囲われているって考える方が自然に思えるからです。

参考情報6
カテゴリー: Webテクノロジ タグ: ,
  1. コメントはまだありません。
  1. トラックバックはまだありません。