MkItYs: 中間文書を作る（なぜ独自のタグを作るのか〜ページ単位からの脱却）

ページ単位からサイト単位へーー独自のタグで最適な構成を作ってみます。

ＨＴＭＬの問題：ページ単位

ウェブのコンテンツを記述する言語がＨＴＭＬですが、このＨＴＭＬのコードを書くのはかなり面倒ですよね。

おそらくいちばん大変なのは、サイト全体の共通部分（ヘッダ、フッタ、ナビゲータ）の記述でしょう。同じ記述をすべてのページに書いていくことになり、これが何十・何百ページもあると、手に負えなくなります。［※１］

このような問題が出てくるのは、ＨＴＭＬが＜ページ＞単位だからです。

※１: その手間を省くしくみのひとつがコンテンツ管理システム（ＣＭＳ）ですが……ただここでは、そのＣＭＳをどう作るか、ということから考えています。

ページ単位からサイト単位へ

ならタグの体系を＜サイト＞単位にすることで、コードをよりシンプルに書けるのでは？、という発想が出てきます。

ここではじっさいに、その＜サイト＞をあらわすカタチを、独自のタグを使って書いてみることにしますーーとりあえずそれが実現可能かどうかは気にせず、ウェブサイト全体を記述するのに＜理想的＞と思えるカタチを考えます。

まずはサイト全体の枠組が必要です。次のようなタグにしてみます：［※１］

<x:site>
  ...
</x:site>

サイトには、個別のページがありますよね：

<x:site>
  <x:page>...</x:page>
  <x:page>...</x:page>
  ...
</x:site>

それぞれのページを区別するために、識別子（ＩＤ）をつけます：

<x:site>
  <x:page key="index">...</x:page>
  <x:page key="organization">...</x:page>
  ...
</x:site>

このような感じで考えていくわけですが、イメージは湧いてきたでしょうか？

ここで各ページには、そのページ固有の記述だけを書けるようにしたいと思います（このあたりがコードの記述を面倒にする要因のひとつなので）。そのために、ページ間で共通の記述を書けるタグを用意します（ヘッダ、フッタ、ナビゲータ、など）：

<x:site>
  <x:head>...</x:head>
  <x:navi>...</x:navi>
  <x:page key="index">...</x:page>
  <x:page key="organization">...</x:page>
  ...
  <x:foot>...</x:foot>
</x:site>

なんとなくウェブサイトの設計図っぽくなってきました。

※１: ここでタグ名（要素名）に「x:」を付けているのは、ＨＴＭＬのタグと区別するためですーーじっさい＜名前空間＞という考え方があり、ＸＭＬという形式では、名前空間で区別する際にはこのように書きます。

自動生成するタグを考える

次は、タグの内容をみていきましょう。

まずヘッダです。内容はこんな感じでしょうか：

<x:head>
  <header>
    <h1>＊＊＊のウェブサイト</h1>
    ...
  </header>
</x:head>

フッタはこんな感じでしょうか：

<x:foot>
  <footer>
    <p>＊＊＊</p>
    ...
  </footer>
</x:foot>

ナビゲータにはたいていメニューを書きますが、そもそもカレントのページはふつうリンクをつけません。また相対パスでリンクを指定している場合、ページのあるフォルダの深さが違えば、リンクも調整する必要があります。なのでまともに書けば、ページごとにメニューの記述は違ってきますーーこれでは共通化する意味がないので、ここではメニューのためのタグを作ってしまいます（あくまで理想を追求します……細かいことはあとから考えます）：［※１］

<x:navi>
  <nav>
    <x:menu/>
    ...
  </nav>
</x:nabi>

次に個別のページをみていきます。トップページはこんな感じでしょうか：

<x:page key="index">
  <main>
    <p>ようこそ、＊＊＊のサイトへ</p>
  </main>
</x:page>

ただ利用者が訪問する最初のページには、たいてい新着一覧がありますよね。なら新着一覧を表示するタグも作ってしまいましょう（ここで属性「list」は表示件数とします）：

<x:page key="index">
  <main>
  <p>ようこそ、＊＊＊のサイトへ</p>
  ...
  <x:news list="25"/>
  ...
  </main>
</x:page>

組織のページについても、メンバ一覧を表示するタグがあれば便利かもしれません：

<x:page key="organization">
  ....
  <x:member/>
  ...
</x:page>

※１: 細かいことはあとから考えるわけですが……ただメニューについては、ページの表題とフォルダの深さ、およびページ間の依存関係が分かっていれば、そこから自動生成できそうだ、というのは推測できるのではないでしょうか（＜カレントページにリンクをつけない＞という処理も、メニューを生成する過程で自動判定できるものです）。

サイトをあらわすタグの構成

ここでいったん、これまで出てきた記述をまとめてみます：

<x:site>

  <!-- 共通部分：ヘッダ／ナビゲータ -->

  <x:head>
    <header>
      <h1>＊＊＊のウェブサイト</h1>
      ...
    </header>
  </x:head>
  <x:navi>
    <nav>
      <x:menu/>
      ...
    </nav>
  </x:navi>

  <!-- 個別部分：ページ群 -->

  <x:page key="index">
    <main>
      <p>ようこそ、＊＊＊のサイトへ</p>
      ...
      <x:news list="25"/>
      ...
    </main>
  </x:page>
  <x:page key="organization">
    ....
    <x:member/>
    ...
  </x:page>
  ...

  <!-- 共通部分：フッタ -->

  <x:foot>
    <footer>
      <p>＊＊＊</p>
      ...
    </footer>
  </x:foot>

</x:site>

この流れでいくらでも書けそうですね……すくなくとも共通部分はひとつにまとめられるので、ページ数がどれだけ増えても、修正があれば一箇所ですむようになります。

どうでしょう、＜独自のタグで最適な構成を作る＞ことがどういうことか、イメージしてもらえたでしょうか。

中間文書

さて、上のタグの構成をみて、なにか気づくことはないでしょうか？ーーたとえば＜本＞なども、ページがあり、メニュー（目次）があり、共通の部分（全体の体裁）がありますーーそのような視点でみると、タグの体系をうまく工夫することで、（ウェブサイトの記述にかぎらず）かなり汎用に使えるものになりそうな気もします。たとえば全体を囲むタグを次のような名前にすることで、より汎用性を意識する動機になるかもしれません：

<x:book>
  ...
</x:book>

このように、さまざな媒体に向けて、あるていど汎用に構成される文書を「中間表現／中間形式のソース文書」と言ったりします……さすにが長いので、ここでは略して＜中間文書＞と呼ぶことにします。［※１］［※２］

※１: 中間表現／中間形式は、さまざまなプラットフォームやファイル形式に変換するための、中間的な表現／形式ですーーこれを経由することで、多対多の（メッシュでいえばフルコネクト状になる）変換の対応を、１対多の（中間表現／中間形式を中心とするスター状の）関係にすることができます。

※２: この＜中間文書＞から各媒体への変換はＸＳＴＬなどを使いますが、その逆は、（相手はマークアップ形式とはかぎらないので）文字列を直接あつかえるプログラミング言語を使って変換します（awk, perl, ruby, etc.）。

ここでは、そういった中間文書を適切に作り、さまざまな媒体の文書を生成するやり方を解説していきますーー抽象的に意味づけされたタグによってドキュメントを管理するーー効率的な文書管理の手法のひとつです。［※１］［※２］［※３］

※１: このサイトも、中間文書である１枚のファイルに、すべての構成と内容を書いています（そのファイルから、いまあなたがみているこのページも生成しています）。

※２: 各種ＣＭＳやフレームワークのテンプレートでは、ＨＴＭＬに埋め込む外部プログラムのコードが剥き出しになっているものもあります。これはこれでひとつの手法ですが、静的な宣言であるタグにくらべると、ＨＴＭＬ文書との親和性は低いかもしれません（とくに権限別の更新（デザイナとの協業など）を考えると、ＨＴＭＬと同じ感覚で＜タグで指定できる＞というのは、利点といえます）。

※３: ここで＜抽象的＞と断っているのは、中間文書のタグの意味づけを、具体的／表面的なものにしないためです。たとえば文書のある箇所を＜強調＞するタグを作るとして、それは「x:strong」になるかもしれません。しかしそれを「x:red 」とか「x:blink 」などにはしない、ということですーー赤や点滅は、ウェブのコンテンツや本にするときに、表現する側が決めることです（そもそも紙の本では点滅させられませんしね）。中間文書は、個別の表現には関与しません。中間文書のタグは、それが文書のなかでどういう意味づけになるのかを示すものです。

関連

ＨＴＭＬの問題：ページ単位

ページ単位からサイト単位へ

自動生成するタグを考える

サイトをあらわすタグの構成

中間文書