
15秒でHTML5サイトのテンプレートが作成できる「Initializr」
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を始める
- 新着記事
- 特集
- ブログ
- 企画特集
-
次の一手はこれだ!
-
連載!プロが語るストレージ戦略
-
明日からではもう遅い?!
-
特集:IT最適化への道
-
さあ、クラウドで解決しよう。
-
データの散在と非常率運用がネック
-
いままさに社会にとっての転換点
-
請求書がきてからでは遅い
-
いまあるデータで身近な業務をDX
-
講演の見どころを紹介
-
保育業界のDX(後編)
-
デジタルを当たり前と言えるか?
-
セキュリティの今を知る
-
モバイルデバイスもターゲットに!
-
話題のセキュリティ事故体験ゲーム
-
いまさら聞けない「PPAP」
-
連載!プロが語るストレージ戦略
-
内部不正や不注意をどう防ぐ?
-
ゼロトラストに不可欠なID管理
-
保育業界のDX(前編)
-
IDaaSって何?
-
利便性とセキュリティの両立
-
ビッグデータ最前線!
-
連載!プロが語るストレージ戦略
-
企業DXのキモはクラウドにあり