![images](../img/imgtop_sub_g.png)
ページ単位からサイト単位へーー独自のタグで最適な構成を作ってみます。
関連
- ◯
- 文書の管理
- ◯
- 静的サイトジェネレータを作る(4つの基本フィルタ):sh, PowerShell
HTMLの問題:ページ単位
ウェブのコンテンツを記述する言語がHTMLですが、このHTMLのコードを書くのはかなり面倒ですよね。
おそらくいちばん大変なのは、サイト全体の共通部分(ヘッダ、フッタ、ナビゲータ)の記述でしょう。同じ記述をすべてのページに書いていくことになり、これが何十・何百ページもあると、手に負えなくなります。[※1]
このような問題が出てくるのは、HTMLが<ページ>単位だからです。
- ※1
- その手間を省くしくみのひとつがコンテンツ管理システム(CMS)ですが……ただここでは、そのCMSをどう作るか、ということから考えています。
ページ単位からサイト単位へ
ならタグの体系を<サイト>単位にすることで、コードをよりシンプルに書けるのでは?、という発想が出てきます。
ここではじっさいに、その<サイト>をあらわすカタチを、独自のタグを使って書いてみることにしますーーとりあえずそれが実現可能かどうかは気にせず、ウェブサイト全体を記述するのに<理想的>と思えるカタチを考えます。
まずはサイト全体の枠組が必要です。次のようなタグにしてみます:[※1]
<x:site> ... </x:site>
サイトには、個別のページがありますよね:
<x:site> <x:page>...</x:page> <x:page>...</x:page> ... </x:site>
それぞれのページを区別するために、識別子(ID)をつけます:
<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>
なんとなくウェブサイトの設計図っぽくなってきました。
- ※1
- ここでタグ名(要素名)に「x:」を付けているのは、HTMLのタグと区別するためですーーじっさい<名前空間>という考え方があり、XMLという形式では、名前空間で区別する際にはこのように書きます。
自動生成するタグを考える
次は、タグの内容をみていきましょう。
まずヘッダです。内容はこんな感じでしょうか:
<x:head> <header> <h1>***のウェブサイト</h1> ... </header> </x:head>
フッタはこんな感じでしょうか:
<x:foot> <footer> <p>***</p> ... </footer> </x:foot>
ナビゲータにはたいていメニューを書きますが、そもそもカレントのページはふつうリンクをつけません。また相対パスでリンクを指定している場合、ページのあるフォルダの深さが違えば、リンクも調整する必要があります。なのでまともに書けば、ページごとにメニューの記述は違ってきますーーこれでは共通化する意味がないので、ここではメニューのためのタグを作ってしまいます(あくまで理想を追求します……細かいことはあとから考えます):[※1]
<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>
- ※1
- 細かいことはあとから考えるわけですが……ただメニューについては、ページの表題とフォルダの深さ、およびページ間の依存関係が分かっていれば、そこから自動生成できそうだ、というのは推測できるのではないでしょうか(<カレントページにリンクをつけない>という処理も、メニューを生成する過程で自動判定できるものです)。
サイトをあらわすタグの構成
ここでいったん、これまで出てきた記述をまとめてみます:
<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>
このように、さまざな媒体に向けて、あるていど汎用に構成される文書を「中間表現/中間形式のソース文書」と言ったりします……さすにが長いので、ここでは略して<中間文書>と呼ぶことにします。[※1][※2]
- ※1
- 中間表現/中間形式は、さまざまなプラットフォームやファイル形式に変換するための、中間的な表現/形式ですーーこれを経由することで、多対多の(メッシュでいえばフルコネクト状になる)変換の対応を、1対多の(中間表現/中間形式を中心とするスター状の)関係にすることができます。
- ※2
- この<中間文書>から各媒体への変換はXSTLなどを使いますが、その逆は、(相手はマークアップ形式とはかぎらないので)文字列を直接あつかえるプログラミング言語を使って変換します(awk, perl, ruby, etc.)。
ここでは、そういった中間文書を適切に作り、さまざまな媒体の文書を生成するやり方を解説していきますーー抽象的に意味づけされたタグによってドキュメントを管理するーー効率的な文書管理の手法のひとつです。[※1][※2][※3]
- ※1
- このサイトも、中間文書である1枚のファイルに、すべての構成と内容を書いています(そのファイルから、いまあなたがみているこのページも生成しています)。
- ※2
- 各種CMSやフレームワークのテンプレートでは、HTMLに埋め込む外部プログラムのコードが剥き出しになっているものもあります。これはこれでひとつの手法ですが、静的な宣言であるタグにくらべると、HTML文書との親和性は低いかもしれません(とくに権限別の更新(デザイナとの協業など)を考えると、HTMLと同じ感覚で<タグで指定できる>というのは、利点といえます)。
- ※3
- ここで<抽象的>と断っているのは、中間文書のタグの意味づけを、具体的/表面的なものにしないためです。たとえば文書のある箇所を<強調>するタグを作るとして、それは「x:strong」になるかもしれません。しかしそれを「x:red 」とか「x:blink 」などにはしない、ということですーー赤や点滅は、ウェブのコンテンツや本にするときに、表現する側が決めることです(そもそも紙の本では点滅させられませんしね)。中間文書は、個別の表現には関与しません。中間文書のタグは、それが文書のなかでどういう意味づけになるのかを示すものです。