「エヴァンゲリオン」に興味の無い顔をして暮らしていますが、TVシリーズと古い映画版も殆ど見ている大熊猫です。
さて今回は社内で「業務の効率化の為にコーディングテンプレートを作ろう！」と言う話になり、
このBLOGの名前でもある「最低の珍獣」から名前を取って「最低」と「の」そして「珍獣」の3バージョンのテンプレートを考えてみました。とりあえず、チーム内で共有したレベルの草案ですが概要を書いてみようと思います。
今回はマツイさんが以前に書かれていた事も参考にさせていただきました。ｗ
尚、以降の説明に関しては最上層にあるindex.htmlを想定しています。
●「最低」テンプレート
まずは「最低」テンプレートです。
小規模のWebサイトで特別なエフェクトを必要としない場合の「最低」必要なものを用意したテンプレートです。つまりjQueryのプラグインを利用したり、スクラッチで作る必要が無い場合を想定しています。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>最低</title> </head> <body>「最低」テンプレート
小規模のWebサイト且つjQueryを使う必要が無い、場合を想定した「最低」必要なものを用意したテンプレート
</body> </html>
以下、頭から順に解説をしていきます。
DOCTYPE（全テンプレート共通）
取り急ぎ今回はHTML5にしています。必要におおじてXHTML1.0版も作成するつもりです。
<!DOCTYPE HTML>
Description,Keywords（全テンプレート共通）
SEOとしての効果はなんともですが一応入れています。
OGP（全テンプレート共通）
OGPが必要でないケースもあるでしょうが入れてみました。
CSS（全テンプレート共通）
Sassを使う事がチーム内では浸透してきましたが、今回は初期化とスタイルの定義用ファイルを分けてみました。
初期化にはnormalize.cssを採用しています。その他の定義用にstyle.cssを用意しています。
ロールオーバーとスムーススクロール（ページ内リンク）
特別なエフェクトが必要無い場合もロールオーバーとページ内リンクは利用するケースが多いので、ライブラリーを用意しています。ただこの程度のエフェクトのみの場合はネィティブなJavaScriptで良いと思い、ロールオーバーはこちらの記事で解説されているArai氏作成の「rollover.js」を採用しましたｗ
スムーススクロールはto-Rさん作成のものを採用しています。これらは手を加えない前提なので統合して圧縮してしまっても良いかもしれません。
Google Analytics（全テンプレート共通）
殆どの場合、Google Analyticsは入れる事になるので用意してみました。
●「の」テンプレート
「の」テンプレートはノーマルなjQueryを使う場合を想定したテンプレートです。
こちらが一番利用されるのでは無いかと思っております。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>の</title> </head> <body>「の」テンプレート
のーマルなjQueryを使う場合を想定したテンプレート
</body> </html>
JavaScriptの定義
jQueryは現在時点（12.11.28）での最新版（1.8.3）を採用としています。
また、このテンプレートの場合はロールオーバー等のエフェクトは状況に合わせたプラグインを採用するので、特に用意していません。「main.js」はスクラッチでJavaScriptを書く場合のファイルです。
「珍獣」テンプレート
最後に「珍獣」版です。
こちらはHTML5やCSS3に対応していない下位バージョンのIEでも極力同じ表現を実現する為のテンプレートです。
IE6,7,8を半ば強引にモダンブラウザに近づけたり、色々と無理をしています。
<!DOCTYPE HTML> <head> <title>珍獣</title> </head> <body>「珍獣」テンプレート
HTML5 CSS3に非対応のブラウザも可能な限り対応させる場合を想定したテンプレート
</body> </html>
IE下位バージョン用のシグネチャ
IE6,7,8それぞれに特有のスタイルをCSSで適用するためのシグネチャ（サイン）です。
CSSではこのように利用します。
div.hoge{
min-height: 100px;
}
html.ie6 div.hoge{
height: 100px;
}
Google Chrome Frame
「Google Chrome Frame」は、Google Chromeで使用されているレンダリングエンジンやJavaScriptエンジンなどを、IEの古いバージョンでも利用できるようにするプラグインです。簡単に言うとIEをGoogle Chromeにしてしまうプラグインです。
といえ、Chrome Frameが初めから入っているとは到底思えないので、入っていない場合はインストールを諭すためのプラグイン「CFInstall.min.js」を用意しています。
二行目のScriptはCFInstall.checkに指定できるオプションを指定しています。インストールを諭す画面を浮かせて表示する（ライトボックスのような感じで）”overlay”が推奨なようなので今回はそのように設定しています。他にも別ウインドウにする指定もあるようです。
詳しくはこちら（英語）をご覧下さい。
参考
- Google Chrome Frame: サイト管理者向けガイド – terkel.jp
- 2009-09-24 IEをHTML5対応にするプラグイン、Google Chrome Frameを試してみた
HTML5とCSS3への対応
以下は下位バージョンのIE(6,7,8)についてもIE9レベルでHTML5とCSS3を利用可能にする為の処理になります。
html5shiv.js
IE8以前のブラウザにも、HTML5のタグをちゃんと認識させるためのライブラリ。
IE9.js
CSSの擬似要素を利用出来るようになり、さらにHTML5で追加された新要素も対応させる事が出来ます。
「html5shiv.js」と併用させる必要が無いように感じますが「IE9.js」は基本的にCSSの対応に力を入れているので併用する方が良いそうです。また両者を併用する事による弊害は無いそうです。
参考
CSS3 PIE
ソース上では記載がないですが、CSS3 PIEを採用しています。使用方法は公式サイト解説がありますので割愛しますがCSS3で利用可能になった下記がプロパティが対応可能となります。
- border-radius(角丸)
- box-shadow（影）
- border-image（ボーダーイメージ）
- CSS3 Backgrounds (背景画像の複数指定)
- Gradients（グラデーション）
※追記：チーム内でトラブルが多いので推奨しないと言う意見がでました。
ライブラリの読み込み
以前であれば上記のようにgooglecodeにアクセスするのが主流でしたが最近では他のJavaScriptファイルと同様にWebサイトのディレクトリ内に（js/html5.jsのように）置き、リンクさせるのが主流のようです。
理由は以下の通りです。
- ソースコードリポジトリへのリンクは行うべきではない
- 最新のソースコードではない場合がある
- 3分間キャッシュされない
※尚、先ほどの「CFInstall.min.js」はローカルにダウンロードしても動作しないようなので、例外としてGoogle Ajex Libraryから読み込むようにしています。Google Ajex Libraryはリポジトリでは無いのでそもそも当てはまらないと教えてもらいました。
利用上の注意
「珍獣」テンプレートは対応ブラウザをIE8からを想定しいますが半ば強引ですがIE7も（一応IE6でも概ね）モダンブラウザと保々同様の装飾やエフェクトを再現出来ます。
このようにJavaScriptのプラグインを利用すれば、モダンブラウザでないものを無理やりモダンブラウザに近づける事は可能です。
ですが
特に印刷対応（ブラウザをそのまま再現して印刷する場合）を重視するWebサイトでは採用については避ける方が良いと考えます。
※尚、「Google Chrome Frame」はユーザーにプラグインのインストールを求める為、現実的では無いのでボツになる前提で入れてみました。
まとめ
今回は「最低」「の」「珍獣」テンプレートの草案を公開してみました。
今のところスマートフォンやタブレットなどのタッチデバイスについては念頭に入れていない仕様です。
まだまだ草案ですので汎用テンプレートにそれらを含めるかもチームや社内の意見を取り入れてブラッシュアップしたいと思います。