2010年3月4日木曜日

データと見た目と機能の分離

アプリケーションを開発するときに表示とビジネスロジック、データと3つに分けるとプログラムが見やすくなると言われています。 それと同様にWebページを作成する場合も3つに分けるとシンプルに書くことができます。
  • 文章
  • 見た目
  • 機能
の三つに分けると非常にシンプルになります。文章とは文字や写真などのデータ、見た目は文字の大きさや写真のレイアウトなど、機能は例えばリンクをクリックしたら別ウインドウで開くなどの処理の事です。

サンプルファイルを解凍すると「混合」と「分離」が現れます。 混合の方は一つのHTMLファイル上に全てが入っています。分離の方は3つのファイルに分かれています。

混合のファイルは見た目の指定が文章上で行われているので非常に文章が読みにくくなっています。長い文章を入力しているとケアレスミスなどでレイアウトがおかしくなる可能性があります。 また、Aタグでは新しいブラウザを開くTargetも入っているので更に読みにくくなっています。

分離のファイルではHTMLは非常にシンプルであり、文章と必要最小限のタグのみです。見た目を指定するスタイルシートとクリックしたときの動作を決めるスクリプトがそれぞれ別のファイルになっています。

ファイルが分離しているとそれぞれのメンテナンスが非常にやりやすくなります。 例えば文章を共同作業で入力する場合、出来るだけHTML文がシンプルな方が作業性が上がります。 スタイルシートとスクリプトファイルは分かる人が特別にメンテナンスすることが出来、貴重な人材を有効に使えるようになります。

また、見た目が別になっているので、季節が変わったりした場合や印刷用の文章を作る場合、色弱者を対象にしたハイコントラストの表示にしたい場合にも簡単に変えることができます。

サンプルファイルのダウンロードはここから

0 件のコメント:

コメントを投稿