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