Web 開発の現場では、チーム・メンバーが即座に Web 開発プロセスを開始できるように、一般的なファイル構造、基本的な命名規則、標準ライブラリーなどを含む標準的なファイル・セットを作成しておく、ということがよく行われています。そうしておくことで、プロジェクトの実質的な作業を開始するのが非常に容易になるだけではなく、開発者をチーム内のコーディング標準に従わせるようにすることができ、標準的なファイル構成を強制することもできます。HTML5 Boilerplate はそうした概念を最先端の Web 開発のために完成させたものです。

HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。この記事では、HTML5 Boilerplate を使ってプロジェクトを開始するための実用的な手法の概要を説明し、また既存のフレームワークやコーディング・スタイルに合うように HTML5 Boilerplate を調整する方法をいくつか説明します。

HTML5 をサポートするための HTML5 Boilerplate

HTML5 Boilerplate の核心部分には、HTML5 によるサイトやアプリケーションの開発を今すぐ支援する要素が含まれています。そうした要素には以下のようなものがあります。

• Modernizr は小規模なユーティリティー・ライブラリーであり、Windows® Internet Explorer® で新しい HTML5 要素をスタイル設定したり、ブラウザーでサポートしている HTML5/CSS3 機能をすべてのブラウザーで検出したりするために活用することができます。HTML5 による開発を行う際に Internet Explorer ブラウザーのバージョン 9 よりも前のバージョンをサポートする場合には、Modernizr (または、このすぐ後に説明する Modernizr に代わる手段) は、HTML5 Boilerplate プロジェクトで提供される要素の中でも絶対に必要な要素です。
• スターター CSS ファイルは HTML5 Doctor Reset の上に構築されており、インテリジェントなデフォルトや機能強化をいくつも含んでいます。
• 文書のスケルトンとして全体に HTML5 の構文が組み込まれており、新しいセマンティック要素が用意されています。

コアとしての HTML5 関連機能に加え、HTML5 Boilerplate プロジェクトには優れたベスト・プラクティスがいくつか実装されています。以下はその一部です。

• プロジェクト全体をとおしてフロントエンドのパフォーマンスを非常に重視しており、適切な構造 (CSS が先頭にあり、JavaScript コードが最後)、Google Analytics の非同期実装、パフォーマンス・ベースの数々の機能強化がプロジェクトの Apache ANT ビルド・スクリプトに実現されています。
• ブラウザーの違いに対応するための補助機能が用意されています。例えば HTML 要素に指定される Internet Explorer のバージョン特有のクラス、Internet Explorer バージョン6 用に PNG の問題を自動修正する機能などがあります。
• サンプルの .htaccess ファイルや web.config ファイルを使用することにより、HTML5 の機能や Web フォントを活用できるようにサーバーをセットアップすることや、スマート・キャッシング・ポリシーによってサイトの応答を高速化することができます。
• 典型的なリセットを大幅に拡張して CSS が強化されています。スタイルシートによって、インテリジェントに選択された要素が再構築され、時によると賢明なデフォルトが指定されます。また、便利なヘルパー・クラスもいくつか追加されます。.clearfix クラスは今後皆さんがよく使うことになるクラスですが、他にも .hidden や .visuallyhidden などが含まれており、どれも非常に実用的です。また、スケルトン出力スタイル、ページ分割型メディア・スタイル、メディア・クエリーも含まれており、応答性の高い Web を設計することができます。

ここに挙げたものだけでも数が多いと思えるかもしれませんが、これは HTML5 Boilerplate プロジェクトに含まれるもののごく一例にすぎません。これらの機能を追跡している人にとっても、これは膨大なリストです。実際、あまりにも機能が膨大なため、HTML5 Boilerplate プロジェクトでは「Delete キー歓迎」と言っているほどです。つまり HTML5 Boilerplate にはありとあらゆるものが集められており、デフォルトで含まれているすべての機能を誰もがすべてのプロジェクトで必要とするわけではない、ということです。

こうしたことから、HTML5 Boilerplate を扱う際の核心となる考え方が得られます。つまり HTML5 Boilerplate はコードのベースとして使用されることを意図しているため、このプロジェクトの初期状態でファイルを操作することは不可能であり、皆さん自身がファイルを操作できるようにする必要があります。このことを念頭に、HTML5 Boilerplate プロジェクトを開始する手順について、そして Delete キーを使ってカスタマイズする方法について説明しましょう。

上に戻る

Boilerplate を使用する

以下のセクションを読み進めるに当たり、この記事で説明する内容は皆さん自身のプロジェクトのセットアップ方法を示すためのものではなく、どのようなセットアップが可能か、どのようにセットアップする必要があるかを示すものである、ということを頭に入れておいてください。これらの説明はあくまでも、皆さんの特定のプロジェクトや開発スタイルのベースを準備するためのものです。

コードを入手する

コードを入手する最も容易な方法は、単純に HTML5 Boilerplate プロジェクトの Web サイトからダウンロードすることです (「参考文献」を参照)。この記事では、まさに皆さんがそれを実行し、「stripped (簡略)」版を入手したものとします。

別の方法として、git を使い慣れている人であれば、HTML5 Boilerplate プロジェクトを複製し、以下の 2 つの方法のいずれかを使用して HTML5 Boilerplate プロジェクトの完全なコピー入手することができます。

• UNIX® シェルにアクセスできる場合には、プロジェクトのビルド・ディレクトリーから、用意されている createproject.sh ファイルを実行します。すると HTML5 Boilerplate のルート・フォルダーに空のディレクトリーが作成されます。
• Windows マシンを使用しているためにシェル・スクリプトを実行できない場合、あるいは出力ファイルを柔軟に配置したい場合には、stripped ブランチをチェックアウトしてからアーカイブをエクスポートします。通常、そのためには Smart Git や TortoiseGit のようなツールを使用しますが、以下のようにコマンドラインから実行することもできます。
  
  

  git checkout -b stripped origin/stripped git archive stripped --format=zip --output=/path/to/your/files.zip

  
  

どのような方法を使用した場合であれ、新たに作成されたコピーに移動し、カスタマイズについて掘り下げることにしましょう。

上に戻る

カスタマイズ

最初にどのような編集をするかは、HTML5、CSS3、その他の新しい高度な技術をどの程度多用するつもりかによって変わってきます。コンテンツ・サイトやブログを作成する場合、あるいは単純に新しいセマンティック・マークアップを使って、新しい技術に対応したサイトにしたい場合には、外部の Modernizr スクリプトを簡単な html5shiv スニペットで置き換えます。html5shiv コードは古いバージョンの Internet Explorer で新しいセマンティック要素を CSS で操作できるようにする部分のみを処理します。Modernizr は高速ですが、Modernizr によって公開されるテストを活用しない場合には、単純化されたオプションを選択することで、ユーザーに対する応答時間を数ミリ秒短縮することができます。

私が自動的に削除してしまうセクションは、一番下にあるプロファイリング・セクションです。このセクションを使用しない場合には、即座に削除しましょう。皆さんの現在のプロジェクトによっては、Internet Explorer 6 用に含まれている PNGFix ソリューションも削除するとよいでしょう。

HTML 文書自体の外側では、プロジェクト・ルートにあるいくつかのファイルやフォルダーも即座に削除することができます。テスト・フォルダー、web.config、crossdomain.xml、nginx.conf は必要なく、また robots.txt や .htaccess については皆さん自身のバージョンがあるからです。

1 つの簡単な追加事項

Windows を実行しているコンピューター上の Internet Explorer で protocol というファイルを使ってテンプレートの開発およびテストを行うと、リモートからインタラクティブに何かを実行しようとしたときに、間違いなくセキュリティー・ダイアログ・ボックスが次々にポップアップ表示されることになります。この問題を回避するためには、単純に doctype 宣言のすぐ後に Mark of the Web を挿入する必要があります。下記の簡単なスニペットは Internet Explorer を Internet ゾーンに配置し、目障りなセキュリティー・ダイアログ・ボックスを表示しないようにします。

<!doctype html>
<!-- saved from url=(0014)about:internet --> 

ちなみにこのコードも HTML5 Boilerplate プロジェクトのビルド・スクリプトによって削除されるため、このコードが本番環境に残ることはありません。

フォルダー構造

フォルダー構造のカスタマイズは典型的な作業ではありませんが、フォルダー構造を見ると、HTML5 Boilerplate は単なるベースとなるものであり、それ以上のものではないということがよくわかります。もし皆さんにとって気に入らない部分があったら、それを変更してしまいましょう。皆さんのプロジェクトを推進するのは皆さんなのです。

私はプロジェクトを開始する前に必ず、最初にフォルダー構造を調整します。既存の構造に問題があるわけではありませんが、私の場合、静的アセット (スクリプト、フラッシュ要素、画像、スタイルシート) を最上位レベルの _assets というディレクトリーに保持するのが好きなのです。そうすることでルート・ディレクトリーがすっきりとし、頻繁に参照される要素がファイル・ウィンドウのディレクトリー・ツリーの最上部に配置されることになります。ファイルの統合だけではなく、私は CSS フォルダーに 2 つの子ディレクトリーを追加するようにしています (それぞれ Web フォント用と CSS 画像用)。コンテンツとして画像を使用するサイトを数多く扱った経験から、私はコンテンツ画像をインターフェース画像とは別の場所に保持する方法を好みます。そのために 2 つのフォルダーが必要になります。

また、私は js フォルダーの階層構造も単純化するようにしています。そのために、libs、mylibs、profiling ディレクトリーを削除し、それぞれのディレクトリーの中身を 1 つのフラットな js ディレクトリーに移動します。その結果としてのフォルダー構造を示したものが図 1 です。

この時点で、HTML 文書の中に記述されたパスが新しいフォルダー構造に対応していることを確認するだけで、調整は終わりです。次のセクションではビルド・スクリプトを少し調整する方法を説明しますが、大まかに言えば、これで新しいプロジェクトを開始する準備が整ったことになります。

上に戻る

ビルド・スクリプト

静的サイトとして提供するために、あるいは後で CMS やその他のプラットフォームとの統合のためのビルド・キットとして提供するために、サイトをパッケージ化する準備が整ったら、/build ディレクトリーを検討する必要があります。現状の HTML5 Boilerplate には ANT ビルド・スクリプトがあり、このスクリプトの中にコンテンツのパッケージ化に役立つタスクがいくつか含まれています。

注: 他のビルド・システムを皆さんのプロジェクトに統合したい場合、そして皆さんが Rake、Apache Maven、その他のビルド・システムをマスターしている場合には、github にアクセスし、そのプロジェクトを fork して、プロジェクトを開始します。

ビルド・スクリプトは何をするものなのか

このビルド・スクリプトは Java™ ベースのビルド・ツールである ANT を使用して、以下のタスクを実行します。

• YUI Compressor によって JavaScript を組み合わせ、縮小化します。
• CSS を組み合わせ、縮小化します。
• jpegtran と optipng によって JPG ファイルと PNG ファイルを最適化します。
• 開発専用のコードを削除します。
• htmlcompressor を使って HTML を縮小化し、構成します。
• インテリジェントなキャッシングを行えるように、ファイル名を変更します (具体的には、更新されたファイルのキャッシュを破棄します)。

注目すべきタスクは以下の 4 つです。

• build: 簡単な HTML 最適化、インライン・スクリプトとスタイルの縮小化、外部 JavaScript コードと CSS の連結と縮小化、画像処理を行います。
• buildkit: 後に本番プロセスで読みやすくするための HTML のホワイトスペースの保持、インライン・スクリプトとスタイルの縮小化、外部 JavaScript コードと CSS の連結と縮小化、画像処理を行います。
• minify: HTML の完全縮小化、インライン・スクリプトとスタイルの縮小化、外部 JavaScript コードと CSS の連結と縮小化、画像処理を行います。
• text: HTML の完全縮小化、JavaScript コードと CSS の連結と縮小化を行います。画像の最適化は行いません。

デフォルトの HTML5 Boilerplate を実行している場合には、Java 技術がインストールされていてパスに ANT がありさえすれば、上記のタスクは機能するはずです。

もし皆さんが私と同じようにフォルダー構造を少し変更した場合には、このビルド・スクリプトを少しカスタマイズする必要があります。それらの変更の大部分は build.properties というファイルの中で行いますが、ビルド・スクリプト自体も 1 行か 2 行変更する必要があるかもしれません。

build.properties の変更 (リスト 1) はすべてディレクトリー・ベースです。変数が更新され、ビルド・スクリプトは JavaScript コード、CSS、画像の新しい場所を指すようになっています。

#build properties is where you override default configuration elements.
#in my case I just need to set some new folder references.
# Custom Build options ---------------------------------
# Project structure -----------------------------
# Directory names
dir.assets   = _assets
dir.js  = ${dir.assets}/js
# Main JS script folder (Will be concatenated and minified)
dir.js.main  = ${dir.js}
dir.css  = ${dir.assets}css
dir.images  = ${dir.build}/images
dir.cssimages  =${dir.css}/images

私の環境の場合、上記リストの最後の行で指定している画像ディレクトリーを参照するように build.xml の 1 行を修正する必要があります。そのための簡単な変更を示したものがリスト 2 です。ここではオペレーティング・システム・レベルで分岐していることがわかります。つまり以下の例では Windows 環境を想定しています。Linux® と Mac OS X への分岐もあり、そこにも同様の変更が必要です。

<target name="imagesjpg" depends="copy">
<echo message="Clean up those jpgs..."/>
[snip...]
<apply executable="tools/jpegtran.exe" osfamily="windows">
<fileset dir="./${dir.publish}/${dir.images}/" includes="*.jpg"/>
<!-- Adding in my css/images directory -->
<fileset dir="./${dir.publish}/${dir.cssimages}/" includes="*.jpg"/>
[snip...]
</target>

これらの変更を終えると、皆さんの好みどおりに調整され、完全に機能するプロジェクトが作成できたことになり、最適化されたコードをビルドする準備が整ったことになります。

上に戻る

まとめ

この記事からわかるように、HTML5 Boilerplate プロジェクトを使ってみる上での壁は極めて低く、またさまざまなことを試すことができます。ぜひ皆さんも HTML5 Boilerplate プロジェクトを試してみてください。HTML5 Boilerplate プロジェクトによって可能なことを発見し、何か足りないものや余分なものがある場合には、不安がらずに皆さん専用にカスタマイズしてみてください。

参考文献

学ぶために

• Github で HTML5 Boilerplate を追跡してください。
  
  
• HTML5 Boilerplate のドキュメントを調べてみてください。
  
  
• Twitter で HTML5 Boilerplate をフォローしてください。
  
  
• Twitter で developerWorks をフォローしてください。
  
  
• HTML5 について学ぶために、W3C の仕様を見てください。
  
  
• CSS3 の新機能について学んでください。
  
  
• developerWorks の Web development ゾーンには Web ベースのさまざまなソリューションを解説した技術記事が豊富に用意されています。
  
  
• developerWorks の Technical events and webcasts で最新情報を入手してください。
  
  
• developerWorks On demand demos をご覧ください。初心者のための製品インストール方法やセットアップのデモから、上級開発者のための高度な機能に至るまで、多様な話題が解説されています。
  
  

製品や技術を入手するために

• HTML5 Boilerplate プロジェクトの Web サイトから HTML5 Boilerplate のコードをダウンロードしてください。
  
  
• Internet Explorer を HTML5 に対応させるためのスクリプト、html5shim について学んでください。
  
  
• IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2®、Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。
  
  

議論するために

• 今すぐ developerWorks のプロフィールを作成し、HTML5 に関するウォッチ・リストを設定してください。My developerWorks とずっとつながっていられます。
  
  
• Web 開発に関心を持つ他の developerWorks メンバーを見つけてください。
  
  
• Web のトピックに焦点を絞った developerWorks のグループの 1 つに参加し、皆さんの知識を共有してください。
  
  
• Roland Barcia が彼のブログの中で Web 2.0 とミドルウェアについて語っています。
  
  
• developerWorks のメンバーが Web のトピックに関して共有するブックマークを調べてみてください。
  
  
• 即座に答えを得るために、Web 2.0 Apps フォーラムを訪れてください。
  
  
• 即座に答えを得るために、Ajax フォーラムを訪れてください。
  
  

著者について

Rob Larsenは Web サイトや Web アプリケーションの構築や設計に 11 年を超える経験があります。彼は現在、Isobar のインターフェース・アーキテクトであり、世界最大のブランドの何社かに対し、HTML5、CSS3、その他の新興技術を扱う業務を行っています。彼は「HTML + CSS + JavaScript」というブログで Web や Web 技術について書いています。

この記事を評価する

コメント

上に戻る

目次

• HTML5 をサポートするための HTML5 Boilerplate
• Boilerplate を使用する
• カスタマイズ
• ビルド・スクリプト
• まとめ
• 参考文献
• 著者について
• コメント