モジュール組み

Takazudo edited this page May 11, 2011 · 5 revisions

モジュール組み

パーツをモジュール化してHTMLテンプレートを組むための概念。
モジュールとは、ページを構成する小さなパーツの単位。
モジュールが並べられてページが成り立つと考える。

具体的なページ :
http://bp-mobile.pxgrid.net/
モジュールの一覧 :
http://bp-mobile.pxgrid.net/_template/modules.html

なぜモジュールか

例えば1000のページを作るとき、1000枚のデザインを起こすのは非効率な方法と言える。そのような考えのもとでページを作っていけば、同じようなCSSを何度も何度も書くことになり、CSSの容量・数は無限に増えてしまう。このような状況を回避するため、ページを構成するデザインパーツの単位を「モジュール」と考え、この組み合わせでページを作っていくのがモジュール組みの基本的な考え方。

モジュール組みでHTMLテンプレートを設計する場合、初めの段階で、使われるモジュール群を全てコーディングしてしまう。このコーディングを行うのは、基本的に一人だけにする。この一人が作ったモジュール群をコピペしながら大量のページを作っていく。

何がモジュールか

どのような単位がモジュールなのかという明確な取り決めは無い。
むしろ、設計・デザイン段階より、ページがどのようなモジュールの集合で組み立てられるか考えておく必要がある。
もしモジュールベースで考えられていないデザインをコーディングする時は、デザインを構成する要素らをモジュールに切り分け、HTMLテンプレートに起こすという設計作業が必要になる。

モジュールのコーディング

例1: お問い合わせブロック

HTML

<section class="mod-contact">
    <h1 class="h">お問い合わせ</h1>
    <div class="img"><img src="/common/img/_dummy/1.png" width="100" height="100" /></div>
    <p class="p">Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。</p>
    <p class="nav"><a href="http://www.pxgrid.com/">株式会社ピクセルグリッド</a></p>
<!-- /.mod-contact --></section>

CSS

/**
 * .mod-contact
 */
.mod-contact{
    padding:15px;
    overflow:hidden; /* clear float */
    margin:0 0 .75em;
    border:1px solid #444;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
    .mod-contact img{
        vertical-align:top; /* kill img space */
    }
    .mod-contact .h{
        padding:0 0 .5em;
    }
    .mod-contact .img{
        float:right;
        padding:0 0 10px 10px;
    }
    .mod-contact .p{
        overflow:hidden;
        padding:0 0 8px;
    }
    .mod-contact .nav{
        clear:both;
    }

モジュールには名前を付ける。
この名前は、mod-モジュール名 という形式にする。
この名前をクラスとして、モジュールを構成する一番外側の要素に付与する。
そして、このモジュールを構成する全ての要素は、このクラス名を起点にスタイルを当てる。

モジュール内で使用されるクラス名には、特別なルールは無いが、極力、ハイフンを含めないようにする。
このように全てのモジュールを組み立てることで、モジュール同士でのクラス名の競合を防ぐ。
全てのモジュールのスタイルが、.mod-モジュール名 から始まるセレクタで定義されていれば、モジュール内でのスタイリングに、どのような単語を使っても問題ないことになる。

例2: 段落

HTML

<p class="mod-p">段落です段落です</p>

CSS

/**
 * .mod-p
 */
.mod-p{
    padding:0 0 .75em;
}

p要素は、HTMLで定義されている段落を示す要素であるが、段落をページの中に用意したい場合は、例えば、「mod-p という段落モジュールを用意する」と考える。

これが p{ padding:0 0 .75em; } であってはならない。
なぜなら、p要素は、それ単独で使われるだけでは無く、他のモジュール内でも使用される可能性があるからである。

例えば、例1でもp要素が使用されているが、この例1を作るとき、p要素にはどんなスタイルが当たっているのか、気にする必要はない。なぜなら、全てのモジュールは、.mod-モジュール名 から始まるセレクタによりスタイルが定義されているので、新しいモジュールを作る時、div, span, p, h1, h2... 等の、HTMLを構成する基本的な要素は、リセットされたままに保たれているからである。

モジュール組みにおいて、モジュールのスタイルを書くときは、そのモジュール外の要素に対して、一切影響しないようカプセル化してCSSを書くのを基本とする。

classとidについて

モジュール組みを行う時、モジュール名をクラス名とし、これを起点にスタイルを当てると上記で書いたが、これはid属性であってはならない。以下がその理由。

  • モジュールがユニークであるか否かを、将来のことまで見越して確実に判断することは不可能。
    #mod-モジュール名 を起点にスタイルを当てていたと仮定し、それ以降、1つしかページ内に存在しないと思っていたそのモジュールが、そのページの中で再度使用される状況が発生した場合、多くのページを書きなおさなければならない可能性が発生する。
  • idとclassでは詳細度に差が出てしまう
  • JavaScriptを使い、複数のページを1つの文書内に存在させることがある。
    この場合、同一のidを持つ要素が複数存在してしまうことになる。
    例:ページがスライドして切り替わるUI
    これは、ヘッダやフッタといった、絶対に一つしか存在しえないようなモジュールに関しても同様。

画像について

モジュール内で使用される画像(主に背景画像)は、そのモジュール専用の画像ディレクトリを作り、そこにまとめる。
例えば、mod-productInfo で使用される画像は、/common/img/mod-productInfo/ 内に格納する。
ただし、矢印やアイコンなど、複数のモジュールで共通使用される画像については、このルールに必ずしも合わせる必要は無く、適宜ディレクトリわけを行う。基本的には、モジュールを構成する画像は全て、そのモジュール専用の画像ディレクトリに格納するものの、共通の画像が現れたら整理するといった考えでよい。

モジュールの入れ子について

後で書く

モジュールを拡張するクラスについて

後で書く

モジュールの継承について

後で書く

入れ子を許容するモジュールについて

後で書く

よく使うクラスについて

あとで書く
innerとかwrapとか。

既存サイトに新しいモジュールを追加するばいいについて

あとで書く jQuery uiみたいにガチガチにクラス固めて書くとか

自由にクラスを付けられないような状況について

例えば、多くのブログは、記事をWYSIWYGのような仕組みで更新するが、この中に入れる一つ一つのp, ul等にクラスを当てるのは、記事を書く人物がHTMLに詳しくない限り、かなり厳しいと見込まれる。このような場合、例えば、そのWYSIWYGで編集する領域を mod-entry という一つのモジュールとして考え、これを起点にスタイルを当てる。

モジュール組みが実現したいことは、安全で保守性の高いHTMLテンプレートであり、運用負荷を高めることではない。何がモジュールかを、機能や要件により随時適切に判断する。