- Coding Methodology
- 第19回 大規模サイトコーディング（Dreamweaver テンプレート編）
第19回 大規模サイトコーディング（Dreamweaver テンプレート編）
大規模サイトでは、テンプレートをどれだけ作り込めるかによって、その後の量産ページの制作の制作効率が格段に変わります。特に大規模サイトでその影響は大きく、結果として、完成までの日数を大幅に短縮することが可能になります。たとえば、1ページあたりの工数を10分ずつ減らすことができれば、500ページのサイトであれば、5000分＝約10人日もの納期短縮が可能になることもあります。
大規模サイトのノウハウから、第15回でご紹介したパーツの作り方に引き続き、今回はDreamwever テンプレートの活用方法をご紹介します。
テンプレート設計 －テンプレートの「入れ子」構造－
テンプレート化の範囲によって、量産ページの生産性や、サイト制作中～運用スタート後の修正対応の効率に大きな差が出てきます。
たとえば同じサイト内で、ヘッダーフッターは共通でも、2カラム・3カラムのページが混在するサイトというのはよくあります。その場合、全サイト共通部分のみをテンプレート化すると、各ページを制作する際に統一感が少ないページになってしまうし、逆に複数のレイアウトごとにテンプレートを作成すると、共通部分に変更が生じたとき、いくつものテンプレートを変更する必要が出てきてしまいます。
このようなとき、サイト全体で共通の大枠部分を設定する「基本テンプレート」と、各レイアウトごとに細かく設定を行う「下層テンプレート」との2階層に分けて作成し、入れ子にすることで両方のメリットを生かせる設計になることがあります。
基本テンプレート
大規模サイトの基本のテンプレートは、サイト全体にかかわる共通部分の変更を一括して対応できるようにしておく必要があります。
そのため、基本テンプレートでは、ヘッダーフッターなど、サイトを通じて共通の最少部分を設定しておき、コンテンツ領域にどんなレイアウトが入っても対応できるようにします。
下層テンプレート
下層ページのテンプレートは、基本テンプレートを踏襲しつつ、ページごとに編集できる箇所をとことん減らします。これにより、ページごとのコーディング箇所を減らしサイトの統一性を高めます。
下層テンプレートでは、サイドメニューやパンくずなど、細かい箇所までテンプレート化します。
Dreamweaverのテンプレートタグ
テンプレートを使用する際、よく使われるDreamweaverのタグと、その主な使い方をご紹介します。
編集可能領域（ TemplateBeginEditable ）
個々のページごとに異なる部分を設定します。上記の例のように、コンテンツ領域を編集可能にするのはもちろんですが、<title>が「ページ名｜サイト名」というときなど、「ページ名」部分だけを個別に編集可能にする等、共通部分と個別ページごとの設定部分を細かく検討し設定します。
オプション領域（ TemplateBeginIf ）
表示・非表示を切り替えることができます。表示される中身の指定はテンプレートで行い、個々のページでは表示するかしないかだけを設定します。特定のページだけに出したいバナーや、ページが長いときだけに表示したい「このページの先頭へ」などを設定しておくと便利です。
条件分岐（ TemplateBeginMultipleIf ）
特定の条件のときのみに表示させます。条件文AがパターンBと一致、もしくは一致しないときに表示させることが可能です。
bodyタグの属性を条件として制御して、「bodyのidがXXのとき（XXではないとき）に表示」という形で使うことが多いです。
Dreamweaverテンプレートは非常に強力で役に立ちますが、Dreamweaver以外でファイル管理ができなかったり、一度テンプレートを外してしまうと再度テンプレートに当て込むことが非常に難しくなるなどの欠点もあります。制作フローの早い段階で、サイトの構成や運用方法などを見極めたうえで、テンプレート設計をすることが重要になります。
お詫び：「第18回ブラウザバグとその対応」のCSS記載に一部誤りがありました。大変失礼いたしました。
