Initializerとは?

Initializrは、HTML5対応のWebサイトの雛形を生成できるWebサービスだ。Modernizr、jQuery、Bootstrap2といったJavaScript/CSSライブラリに対応しており、マウスクリックで構成をカスタマイズするだけで、Webサイトの雛形をzipファイルでダウンロードすることができる。

図1 : Initializer

Initializrを使ってみよう

Initializrの使い方は非常に簡単だ。トップページで「Classic H5BP」「Responsive」「Bootstrap 2」のいずれかを選択すると、詳細なオプションを選択するためのフォームが表示されるので、必要に応じてカスタマイズして画面の一番下にある「Download it!」をクリックすればよい。また、「What's inside?」をクリックすると、ダウンロード前にどのような内容でテンプレートが生成されるのかを確認できる。

図2 : テンプレートの生成(1)

図3 : テンプレートの生成(2)

図4 : ダウンロード前に内容の確認が可能

生成されるテンプレートは以下のようにシンプルなHTMLとCSSでデザインされたものだ。これをベースに編集することで、HTML5ベースのWebサイトを簡単に作成することができる。

図5 : 生成されるテンプレートの例(1)

図6 : 生成されるテンプレートの例(2)

選択可能なオプションは、テンプレートの種類やjQueryの有無 (最小化するかどうかも選択可能)をはじめ、.htaccessやnginx.confといったWebサーバ向けの設定ファイルの有無、LESS (CSSをプログラマティックに記述できるもので、Initializrで生成したテンプレートではJavaScriptを使用してCSSに変換される)を使用するかどうか、Chrome FrameやGoogle Analytics向けの記述を含めるかどうかなどだ。

なお、Initializrは常に改良が加えられており、今後も新しいJavaScript/CSSライブラリやテンプレートに対応したり、選択可能なオプションが変更される可能性があるという点には留意していただきたい。

InitializrとHTML5 Boilerplate

Intializrで生成可能なテンプレートは、H5BP (HTML5 Boilerplate)のサブセットとなっている。H5BPでは、HTML5を扱う上で便利な機能やベストプラクティスを組み合わせたテンプレートを提供している。

図7 : HTML5 BoilerplateのWebサイト

H5BPにはブラウザの差異の吸収し、応答性のよいWebサイトを構築するためのノウハウが反映されたものになっている。Initializrを使用して生成したテンプレートも、基本的にH5BPに従った構成となっているため、Initializrで生成したテンプレートをベースにすることでH5BPが提供するベストプラクティスを反映したサイトを構築できるというわけだ。

なお、H5BPにはJavaScript、CSS、HTMLを縮小化するためのAntビルドファイルが同梱されているが、Initializrでもオプションを選択することでテンプレートに含めることが可能だ。

まとめ

Initializerはデモの作成に利用してもよいし、本格的なWebサイトやWebアプリケーションを構築するためのベースにすることもできるだろう。うまく活用することで、HTML5を使用したサイトを構築するための手間を大きく削減できるはずだ。また、HTML5の利用にあたり、先人達のノウハウを利用できるという点も大きなメリットといえるだろう。

本連載でもたびたび紹介しているが、最近WebベースのIDEや開発ツールが多数登場してきている。今回紹介したInitializrは開発ツールというほど大げさなものではないが、必要なときに手軽に利用できるという利点がある。このほかにもWeb上で利用可能な開発ツールには様々なものが存在するが、本連載では今後も折に触れこういったツールを紹介していきたい。