- Coding Methodology
- 第7回 大規模サイトの事前準備（テンプレート・パーツ類の作成）
第7回 大規模サイトの事前準備（テンプレート・パーツ類の作成）
大規模サイトでは、サイト内の各ページに共通で使われているパーツが数多くあります。共通パーツは、量産コーディングに入る前に用意しておくわけですが、それらをどれだけ、どのような形で用意するかによって、以後のページの制作スピード、修正への対応の柔軟性が大きく変わってきます。
既存ソフトの機能も、最大活用
大規模サイトコーディングのイメージ
パーツをくみあわせてコーディングすることで、各ページの制作が効率化・スピードアップすると同時に、コーディング仕様の統一化や、全体修正への柔軟な対応が可能になります。
弊社では、基本的にはDreamweverを使用してコーディングをしていますが、実は、このソフトはかなり高機能で、活用すれはするほど、効率化を図ることができます。
特に大規模サイトの場合、既存の機能を活用するだけで、複数人での共同作業が、とても効率的になることがあります。
たとえば、全ページ共通部分に関しては、テンプレート化して編集不可能領域とすることで、最初の1ページだけをチェックして、ページごとのチェックを省略できる領域を増やします。
印刷プレビューでの崩れなどについては、当初のテンプレート時にすべてのブラウザで印刷プレビューを確認しておき、各ページ毎の崩れは、コンテンツ領域についてのみを確認すればよくなり、大幅な戻り作業をなくすことが可能になります。
また、全ページではなくても多くのページに出現するボタンや、コンテンツ内ローカルメニューなどは、ライブラリ化することで、複数回コーディングする必要がなくなります。また、「レイアウトは同じだけれども中身は違う」というときは、スニペットを使用することで、1度のコーディングで、複数のページに活用でき、コーディングのスピードアップと同時に、複数のコーダーが担当したページであっても、各個人のコーディングのクセが出ないように、サイト内のコーディング仕様を統一化していけるというメリットもあります。
使い勝手のよいクラスを準備する
大規模サイトで使用するクラス例
弊社でテンプレート設計から制作させていただく場合、これらのDreamweverの機能を使うほか、classの書き方にも、いくつかの工夫をしています。たとえば、マージンの調節のためだけに新しいボックスを作らなくてもいいように、あらかじめ想定されるそれぞれの開き幅にあわせて。mt（margin topの略）、ml（margin leftの略）などを用意したり、横に入る画像サイズが可変であっても同じclassが流用できるテキスト流し込みボックスなど、1つ1つはちょっとした工夫ですが、「なるべく少ないスタイルで、効率化とサイト内標準化の推進」を意識したコーディングをしています。
大規模サイトで使用するクラス例
（1）場所・レイアウトによらず、スペースを調節可能なクラス。
（2）画像サイズが変わっても画像に合わせて回り込み可能なクラス。
事前準備として、そのサイト全体を見通し、必要となることが想定されるクラスを作成しておきます。各ページのコーディング前に、8割程度のクラス設計を終え、のこり2割ほどを各ページ個別CSSでコーディングできるのが理想的です。
