15秒でHTML5サイトのテンプレートが作成できる「Initializr」

杉山貴章（オングス）
2012-03-01 19:30:00
  • このエントリーをはてなブックマークに追加

　HTML5対応のテンプレートツール「Initializr」にBootstorap 2向けのテンプレートが追加された。InitializrはWebサイト上で使用するフレームワークなどを選択するだけで、Webサイトで利用できるテンプレートを簡単に作成してくれるツールである。

テンプレートを使うメリット

　HTML5の登場で、Webサイトの表現力は格段に向上している。従来は特別なプラグインを使う必要のあった多彩なデザインが、Webブラウザの標準機能だけで実現できるようになりつつある。

　しかしながら、現時点でHTML5を使う上では気をつけなければならない点が多数存在することもまた事実である。もっとも重大な問題としては、Webブラウザ間でサポートする機能が統一されていないことだろう。素晴らしいと思って使ってみた機能が、ほとんどのブラウザで動作しなかった、ということにもなりかねない。もっと言えば、世の中にはまだHTML5の機能をほとんどサポートしていないWebブラウザが普通に使われている。代表格はバージョン8以前のInternet Explorerだ。残念なことに、IE6からIE8のシェアは依然として高く、世代交代の速度は極めて遅い。

　JavaScriptおよびCSSの果たす役割が従来よりも大きくなったことで、フロントエンドのコーディングがパフォーマンスに与える影響が相対的に増していることも注意しなければならない。GoogleのWebパフォーマンスチームに所属するSteve Souders氏は、主要Webサイトにおけるレスポンス時間の80～90％はフロントエンドの処理によるものだと指摘している。JavaScriptやCSSのコード量が増す中で、パフォーマンスを意識したコーディングは必須になってくる。

　このような様々な問題を、個人のノウハウだけで解決するのは大変だ。そこで、多くの事例から得られたベストプラクティスを詰め込んだHTML5対応のテンプレートが開発された。それが「Initializr」や、そのベースとなっている「HTML5 Boilerplate」である。これらのテンプレートを利用すれば、たとえHTML5のノウハウを持っていなかったとしても、最適なパフォーマンスとクロスブラウザ対応を持ったWebサイトを構築することが可能となる。

HTML5 Boilerplateで手軽にHTML5を始める

　まずHTML5 Boilerplate（以下、H5BP）の方から紹介しよう。H5BPは、HTML5の最新機能の使用や、クロスブラウザ対応、モバイルブラウザへの最適化、キャッシュや圧縮を活用したパフォーマンス向上などのベストプラクティスを盛り込んで作られたHTML/CSS/JavaScriptのテンプレート作成ツールである。H5BPの素晴らしさは公式サイトに簡潔にまとめられている。

　特筆すべき点としては、Modernizrと呼ばれる内蔵のユーティリティーライブラリが挙げられる。これはWebブラウザでサポートされているHTML5/CSS3要素を検出してその結果を<html>タグのクラス名に出力してくれるもの。また、HTML5shivという、バージョン8以前のIEでHTML5要素に対応するスタイル設定を行ってくれるライブラリや、Respondというメディアクエリの機能を提供してくれるライブラリなども用意されている。これらはクロスブラウザのWebサイトを作成する上で必須の機能だ。

　生成されるHTML/CSS/JavaScriptのコードはいずれも標準スタイルを強く意識したもので、HTML5の新要素を含みながら、必要最低限の構成にすることで全体のコード量を削減している。パフォーマンスについても非常に重視されていて、CSSを先頭に記述するという極めて基本的なことから、.htaccessファイルによる圧縮やキャッシュの設定による最適化まで、様々なノウハウが反映されたものとなっている。

　H5BPを使うには、まず公式サイトのダウンロードリンクからパッケージをダウンロードして解凍し、不要な機能を削除するなどしてカスタマイズする。その上でビルドスクリプトを実行すると、最適化されたテンプレートを生成することができる。

Initializrでもっと手軽にHTML5を始める

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]