HTML5 Boilerplate - A rock-solid default for HTML5 awesome.

Webを取り巻く技術開発や仕様の策定、ブラウザの実装などの進展はとても早い。新しいデバイスが登場すれば適用する技術のスポットも変わるなど、日々めまぐるしい勢いで状況が変化している。こうした技術をキャッチアップし、いち早くテクニックやティップス、ベストプラくティスとして発表するブログの更新もとても早い。

HTML5やCSS3、最新のJavaScriptに関するティップスやテクニック記事はすでに数多く登場している。こうした技術を活用し、HTML5をベースにベストプラクティスを組み合わせていけば、最初からそれなりにできのいいものを開発することができる。しかし、話題はさまざまなサイトのブログやTwitterメッセージに分散しており、そうした情報を年間単位でさかのぼりながらまとめていくのは容易な作業ではない。

そんなWebデベロッパ、Webデザイナにとって素晴らしいサイトが登場した。HTML5 Boilerplateだ。名前のとおり作業のベースとして使える原版を配布するという意味がある。HTML5、CSS3、JavaScriptなどのベストプラくティブをまとめあげて、サイトを構築する場合の最初のテンプレートとして活用できるものを配布している。配布されている成果物のディレクトリ構造もそのまま利用できる作りになっており、これから新規で開発したい場合には嬉しいプロダクトだ。

HTML5 Boilerplate	HTML5 Boilerplate配布物のディレクトリ構造。この構造をそのまま利用できる

HTML5 Boilerplate配布物例 - HTML5 Boilerplateサイトより抜粋	HTML5 Boilerplate配布物例 - HTML5 Boilerplateサイトより抜粋

HTML5 Boilerplate配布物例 - HTML5 Boilerplateサイトより抜粋	HTML5 Boilerplate配布物例 - HTML5 Boilerplateサイトより抜粋

HTML5 Boilerplateの説明によれば、HTML5 Boilerplateでまとめあげたテンプレートには次のような特徴があるという。

• IE6を含めたクロスブラウザに対応。
• HTML5に対応。
• 優れたパフォーマンスを発揮するための最適化されたキャッシュと圧縮規則を適用。
• ベストプラクティスとされる設定をデフォルトに採用。
• モバイルブラウザ向けの最適化対応 (iOS、Android、Opera Mobileなど)。
• プログレッシブエンハンスメントを活用した性能の低いブラウザへの対応。
• クロスブラウザ制御を最大限にするためのIE特別対応。
• 能力に応じた記述がしやすいように用意された.no-jsおよび.jsクラス
• JavaScriptプロファイル機能対応。
• IE6におけるPNG問題に対処。
• HTML5機能の活用と高速なページロードを実現するための.htaccessファイルを同梱。

今後の開発内容としてJavaScript、CSS、画像を結合して最小化するツールの統合、GZIP圧縮通信機能の統合、SASSおよびHAMLの移植があげられている。強制的なGZIP圧縮通信の実現と、結合およびミニファイ機能が統合されれば、そのまま本番運用まで考慮したツールとして活用できるようになる可能性がある。