メインコンテンツへスキップ

データ設計

1.データ設計

HTMLは、
データ記述言語です。
そのデータの構造を
設計する事は、
HTML文書の構造を
設計する事です。

HTMLは、木構造で表したデータモデルのデータ記述言語です。

使い捨ての文書だとしても、やはり簡易でも良いから設計はするべきでしょう。まぁその設計自体が、無意識で行われている場合もあります。しかし無意識だと設計が残りません。残す, 明示する事により、経験, 改善, 他機能の付加が容易になると思います。何よりも文書データの設計による整理により、内容の見直しや見せ方の再確認が出来ます。

尚ここで想定している設計の対象は、文書データ単体です。Webサイトではなく、Webページです。ただ、個々のページをしっかり設計する事により、サイトの設計にも繋がると思います。

2.ドキュメントツリー

ドキュメントツリーは、
文書の要素を階層化して
枝分かれしたツリー構造に
構成した物です。

ドキュメントツリー とは、ソースドキュメントを HTML言語でエンコードされた要素を階層化して枝分かれしたツリー構造に構成した物の事です。無理して言い換えると、「元の文書を HTML言語で要素を読み解いて、その要素間の関係を木構造に表した図をドキュメントツリーと言います。」かな。
文書 ( ドキュメント ) 木構造図 ( ツリー ) と造語してみました。
このツリーの各要素には、親要素が1つだけあります。ただし、ルート要素には親要素がありません。HTML文書でのルート要素は、html要素です。ルート要素を言い換えると、基点要素です。

ドキュメントツリーは、ルートが document であるノードツリーです。

document
html
head
body
meta
title
h1
p
form
dfn
ul
span
table
li
li
caption
tbody
button
button
tr
th
td
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ドキュメントツリーの例</title>
  6. </head>
  7. <body>
  8. <h1>ドキュメントツリーの例</h1>
  9. <p><dfn>ドキュメントツリー</dfn>とは、文書の要素を階層化して枝分かれしたツリー構造に構成した物です。</p>
  10. <form>
  11. <ul>
  12. <li><button>ボタン１</button>クリックすると空送信します。</li>
  13. <li><button>ボタン２</button>クリックすると空送信します。</li>
  14. </ul>
  15. <span>ブロックとインラインの混在</span>
  16. <table>
  17. <caption>テーブル</caption>
  18. <tbody>
  19. <tr>
  20. <th>ヘッダ</th>
  21. <td>データ</td>
  22. </tr>
  23. </tbody>
  24. </table>
  25. </form>
  26. </body>
  27. </html>

このソースドキュメントを元に、要素を階層化して枝分かれしたツリー構造に構成した物が、上記のドキュメントツリーです。(属性やテキストノードは省略しています。)

１行目 <!DOCTYPE html>は、HTMLの要素ではないのでドキュメントツリーの対象外です。
10行目にdfn要素の外にテキストがp要素の内容としてありますが、ドキュメントツリーの段階では意識していません。描画の前の時点で、描画の為に仮想の纏まりが生成されますが、それについては別途に記述します。

ドキュメントツリー

ドキュメントツリーとは、文書の要素を階層化して枝分かれしたツリー構造に構成した物です。

  • クリックすると空送信します。
  • クリックすると空送信します。
ブロックとインラインの混在
テーブル
ヘッダ データ

body要素をdiv要素に, h1要素をh3要素に代えて、上記のソースドキュメントのbody要素以下の描画を例示しました。
これを例と言うているのは、筆者である私はユーザーエージェントがどの様に描画するか意識せず、ただソースドキュメントを提示しているだけだからです。

3.基本形

HTMLの文法により、
１番目は文書に関する
付加的な情報で
２番目は文書の
コンテンツです。

HTMLは要素(エレメント・Element)で構成されています。その要素の配置の規則で、文書のルート要素はhtml要素です。html要素に許可されている内容は、ひとつの head要素と、それに続くひとつの body要素を使用できると決まっています。つまり、最初に文書のコンテンツを置いて、続けて付加的な情報とするデータ設計は出来ません。疑似的な方法として、最初の付加的な情報の部分を空として文書のコンテンツの一部として付加的な情報を配置できます。

document
html
head
body
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

html要素, head要素, body要素は、配置が決まっていてどれも開始タグ, 終了タグ 共に省略できます。

html要素はルートであるので、属性でその付加的な情報を表すとその文書の付加的な情報を表すのとほぼ同じです。文書に関する付加的な情報をどの様に扱うか、データ設計としてしっかり考えるべきかと思います。

4.メタデータ

付加的な情報の、
取捨選択, 記述方法を
設計する事は
大事です。

ここで検討するのは、HTML文書の付加的な情報であり個々の内容の付加的な情報についてではないので注意して下さい。個々の内容の付加的な情報は、個々の内容自体のデータ設計にて検討します。

故に付加的な情報の、整理, 分類が必要になります。次にHTMLの文法を意識して配置を設計します。その結果、データの加工の可否が関係していろいろ妥協が必要になるかもしれません。

メタデータコンテンツ

メタデータコンテンツ(Metadata content.)という、付加的な情報を表す要素があります。この要素で記述して、付加的な情報を記述する目的が達成できるか評価します。目的が達成できれば、この要素が記述できる箇所である head要素が記述できるhtml要素の最初のまとまりとして設計します。

html要素の属性

属性は、要素の付加的な情報を表します。ルート要素の属性は、文書の付加的な情報を表す事になります。目的の達成の為に、属性で記述する必要がある場合があります。この場合のデータ設計での表記方法が少々大変かもしれませんが、これは要素の内容(コンテンツ)ではなく要素の属性(アトリビュート)です。属性は開始タグに記述するので、タグを取り除いたデータには、この情報は含まれない事になります。

その他

元データの都合により、付加的な情報を本文の後に配置したい場合などは、本文のデータの一部として設計する必要があります。その場合は、メタデータコンテンツである要素の個々の仕様を確認して、どの要素をどの属性を付加して記述すればよいか確認する必要があります。付加的な情報の記述の目的によっては、この方法が不可能であり、記述方法, データの位置が限定されている場合があります。

5.本文

文書の内容を、
木構造で表す
データ設計が
必要です。

HTMLは木構造で表したデータモデルとしています。なので元データが配列の場合、データを分析, 整理して木構造で設計する必要があります。後入れ先出し, 先入れ先出し, 線形リストなどのデータ構造の場合も、木構造に置き換える必要があります。