【翻訳】Initializr – 素晴らしいHTML5 Boilerplateのスタート用テンプレート


Initializrガイド（http://www.mk-dizajn.com/en/2011/06/initializr-izvrstan-html5-predlozak-za-svaki-web-projekt/）の日本語訳です。誤訳等はお手数ですがコメント欄でご指摘下さい。

Initializr – 素晴らしいHTML5 Boilerplateのスタート用テンプレート


InitializrはPaul IrishとDivya Manianによって作られた、HTML Boierplateをベースしたwebプロジェクトを素早く開始するための素晴らしいツールです。これは、あなたが必要とするだけの機能をもったクリーンなテンプレートを素早く作る手助けとなります。これの作者はJonathan Verrecchiaです。

テンプレートの作成プロセスと、使われているテクノロジーの幾つかの詳細は、以下のテキストをご覧ください。

HTMl5 Boilerplate

HTML5 BoilerplateはPaul Irish, GoogleとDivya Manianによって作られた、パワフルで堅牢な"マスターテンプレート"です。テンプレートはhtml, cssとjavascriptの設定ファイルで構成され、協調して高速で全てのブラウザで安定した見た目（同じという意味ではない！）を作るためのレスポンシブなwebページを作成します。これはさらにModernizr, jQueryとEric MeyerによるCSS reset2を含みます。


Boilerplateは、ほとんどの人はプロジェクトで利用しないながら、特定の場合やプラットフォームのための、その他多くのコンポーネントも含みます。標準では不可能なInternet Explorer 6や7といったブラウザでのJavascriptプロファイリングや、Google analitics, flashのためのクロスドメインxml設定ファイル, IIS, nginx, apacheやappengineの設定ファイル等々…。

要するに、特定のプロジェクトに不要なファイルをすっかり削除してしまうのは凄く時間が掛かるのですが、そこでInitializrの出番なんです！

Initializr - 高速でカスタマイズされたBoilerplate

Initializrに底通するアイデアは、Boilerplateをシンプルにして、人々がほんの数クリックで必要とするファイルを選択できるようにすることです。Initializrが生成するコードはオリジナルのBoilerplateをベースにしています。プロセス全体のパーツやオプションは以下で説明します。

HTML/CSS

Boilerplateは空のスタートページ（index.html）を生成しますが、Initializrは基本的なレイアウトを生成して、そこから開始できます。インデックスページは基本的なブロックを生成します。例えば：ヘッダ、フッタ、ナビゲーションバー、サイドバーブロック（aside）それとサンプルのブログページです。


Javascript

BoilerplateはデフォルトでjQueryフレームワークを含んでいます。あなたは圧縮バージョン、非圧縮バージョンまたは全く含まないかを選択できます。圧縮バージョンを選択することをお勧めします。


互換性

HTML Shiv：
モダンなブラウザは新しい機能やHTML5タグを完全にサポートしていますが、バージョン8未満のIEブラウザはそれらを「理解」するためにいささか助けを必要とします。このjavascriptコードのかけらはHTML5shivと呼ばれます。ShivはjavascriptのcreateElement()関数を使っています。

Modernizr：

Modernizrはブラウザの機能のセンサとして使われるスクリプトです。これはHTMLshivとセンサ検知機能を含みます。ページのレンダリングイベントで、これはclass名を追加します。例えば：
< html lang="en" class="js flexbox canvas canvastext webgl no-touch">
...
< /html>
これらのclassを使って、正当なCSSで特定のブラウザ向けに一貫したレイアウトを構築することができます。

サーバ設定

Initializrは大部分のポピュラーなwebサーバファイルを含めるオプションも提供しています。IIS, apache, nginxやgoogle app engineなどを使っていれば、configファイルの最適化されたバージョンを含めることができます。configはURLパートからwwwを除くように予め設定されているのを指摘したほうが良いでしょう。これを元に戻すにはapacheの.htaccessで以下のような感じにします：
< IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
< /IfModule>

Downloadボタン

必要なコンポーネントを選んだら、大きなダウンロードボタンを押すだけで終わりです、ジャジャーン！

選択してダウンロードすると、アーカイブはこんな風に見えます。

TOTO.txt - 次は何？

アーカイブにはTODO.txtが含まれていて、ダウンロード後にプロジェクトを開始するために取るステップを概説しています。言語コードが英語（en）で無い場合に変更することを忘れないでください, 404エラーページを作成してください…
 .___       .__  __  .__       .__  .__                
 |   | ____ |__|/  |_|__|____  |  | |__|______________ 
 |   |/    \|  \   __\  \__  \ |  | |  \___   /\_  __ \
 |   |   |  \  ||  | |  |/ __ \|  |_|  |/    /  |  | \/
 |___|___|  /__||__| |__(____  /____/__/_____ \ |__|   
          \/                 \/              \/

さらに進むために

InitializrはオリジナルのBoilerplateの軽量バージョンです。Boilerplateそのものの知識を広げたり、設定の各パートの情報や、「なんでここでこんなコード???」という質問（所々で思うかも）をもっと得たりする場合にはBoilerplateの作者である　Paul Irishによるこのビデオをご覧ください。


HTML5BoilerplateとInitializrの公式ページ

0 件のコメント:

コメントを投稿

登録: 投稿 (Atom)