HTML5 Boilerplate入門
初めに
HTML5 Boilerplateは，必要なファイル一式が詰まったHTML5フレームワークです。
チームでの開発では，ファイル構造，基本的な命名規則，使用するライブラリーなどを共有することが多々あります。
その一つの回答として，いくつものフレームワークが提案されています。
HTML5 Boilerplateはその中でも割と古参のフレームワークであり，カスタマイズ性に優れているとされています。
このページでは，一通り作成準備を終わらせるまでを記録します。
目次
一式をダウンロード
まずは，公式ページにアクセスします。
中央のDownloadボタンを押せば最新のファイル一式がダウンロードできます。
Html5Boilerplate公式ページなお，
1 | npm i html5-boilerplate --save |
で,パッケージマネージャーのnpmでローカルインソールできます。
解凍
zipファイルで落ちてくるので，何も考えず解凍します。
すると，下記のファイル群が出てきます。
Html5Boilerplatehome一式あらゆるページが構築できるよう，ツールやCSS・Javascriptなど多くのファイルが含まれています。
一つのプロジェクトで全てを使うことはないので，この中から必要なモノを取捨選択していくことになります。
公式も「Delete キー歓迎」だそうですｗ
ピックアップ
静的なホームページ構築に必要そうなファイルをピックアップします。
.editorconfig…各エディタごとに共通のコーディングさせるためのツール。
humans.txt…制作者を明示的にするためのファイル？
robots.txt…検索エンジンのクローラー（ロボット）のWEBページのへのアクセスを制限するためのファイルで、ロボットに向けた命令文（アクセスを許可/許可しない）を記述します
site.webmanifest…ウェブマニフェスト。オフライン作業やプッシュ通知の受け取りなどのその他の可能性を持ったウェブサイトを構築できる。
ビルド
ビルドとはWebページのパフォーマンス(読み込み速度など)を上げるため，HTML・CSS・JavaScriptなどの空白を削除する事。
HTML5 BoilerplateではのANT ビルド・スクリプトが含まれています。
ビルドによって
- YUI Compressor によって JavaScript を組み合わせ、縮小化します。
- CSS を組み合わせ、縮小化します。
- jpegtran と optipng によって JPG ファイルと PNG ファイルを最適化します。
- 開発専用のコードを削除します。
- htmlcompressor を使って HTML を縮小化し、構成します。
- インテリジェントなキャッシングを行えるように、ファイル名を変更します (具体的には、更新されたファイルのキャッシュを破棄します)。
とのこと。
ANTについては別記事に。
余分な豆知識
Boilerplateは定型文という意味。
参考
HTML5 Boilerplate を使用して Web 開発を容易に始める byIBM
HTML5 BoilerplateのGitHubページ
