the world loves the wannabees.

テンプレート解説：HTML編(3)

さて、今日はコンテンツブロックの中身についてです。まず最初はエントリから。例によって文書構造から始まりますが、まずは JUGEM を使っている場合にエントリに記述可能なアイテムを書き出してみます。

エントリ

• タイトル
• 投稿日
• 投稿時間
• 投稿者
• 本文
• 続き
• カテゴリ
• コメント数
• トラックバック数
• エントリ個別 URI

これらをどうやって配置するかは著者によって全く違うかと思います。とりあえず、JUGEM で配布されているテンプレートではこんな感じです。

• 投稿日
• タイトル
• 投稿者
• 本文
• 続き
• カテゴリ／投稿時間／エントリ個別 URI／コメント数／トラックバック数

…今イチ (^^; 特に最後の項目。１行に横並びでアイテムが並んでいるのが分かります。これはコンピュータが意味をくみ取れるデータ形式ではありません。マークアップのポイントは、タグの括りと文章における意味上の固まりが 1:1 で対応することです。そうでないと人間に比べると大変お粗末な言語処理能力しか持たないコンピュータが意味をくみ取れないからです。少なくとも、これくらいにはなって欲しいところです。

• 投稿日
• タイトル
• 投稿者
• 本文
• 続き
• エントリ周辺情報
  • カテゴリ
  • 投稿時間
  • エントリ個別 URI
  • コメント数
  • トラックバック数

で、もう一つ配置を決めるに当たって考慮しなければならないのは、このブロックの見出しは何になるべきかという点です。見出しは文書構造上重要です。見出しの内容は文書の内容を端的に表すと見なされるからです。実際、SEO（検索エンジン最適化）という分野でも見出しをつけること、特にタイトルと第1見出しを同じにするのは重要なんだそうです。前回の説明ではとりあえず <h2>エントリタイトル</h2> としてお茶を濁しましたが、これも著者によって見解の異なるところです。とりあえず以下は harvest での結論。

投稿日時（投稿日＋投稿時間）

タイトル（エントリ個別 URI リンク付き）

• 本文
• 続き
• エントリ周辺情報
  • カテゴリ
  • コメント数／トラックバック数

まぁ今になってこうなった理由を考えたら、文書構造の解釈云々より JUGEM の配布テンプレートでの表示順に引きずられてるな、という感じもしますが。エントリブロックの見出しを投稿日時とした辺りに苦し紛れの部分が (^^; JUGEM は1日にひとつのブロックが形成されるシステムではないので、投稿日のみにしてしまうと、1日に複数エントリを投稿したときに見出しが意味をなさなくなってしまう点を考慮したものです。で、下は上のマークアップ展開。例によって JUGEM 独自タグを含みます。

<h2>{entry_date} {entry_time}</h2>
<h3><a href="{entry_permalink}" title="本記事の個別リンク">{entry_title}</a></h3>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<ul class="entry_state">
<li class="entry_category">{category_name}</li>
<li class="num">{comment_num} / {trackback_num}</li>
</ul>

エントリタイトルに張ったリンクには本来 title 属性は不要（a タグの内容がリンク先の説明になっているため）なのですが、タイトルにエントリ個別リンクを張るというのは一般の JUGEM ユーザにはなじまない習慣かと思ったので、ツールチップを出して説明するというブラウザ実装依存の姑息な手段を使っております。

さて、今度はコメントとトラックバック。さくっとやってしまいたいのでいっぺんに書きます。コメントとトラックバックはエントリ個別ページにのみ現れるブロックですが、復習の意味でその時のコンテンツブロック内の文書構造をコメント・トラックバックブロックの内容とともに挙げておきます。

エントリ

• （上記参照）

コメント

• 今まで頂いたコメントのリスト
  • 投稿時間
  • 投稿者
  • コメント内容
• コメントフォーム

トラックバック

• このエントリのトラックバック URI
• トラックバックリスト
  • 送信元 blog タイトル
  • 送信元エントリタイトル
  • 概要
  • 受信時間

コメントとトラックバックは、中にそれぞれ2つのブロックを持っています。エントリブロックが第2階層だったので、コメントとトラックバックは第2階層です。コメントとトラックバックはエントリの付属物とも言えるので、コメントとトラックバックもエントリの下に入って第3階層ブロックになるという考え方もありそうです。

屁理屈はともかく、harvest での文書構造はこうです。

エントリ

• （上記参照）

コメント

• 今まで頂いたコメントのリスト

  by 投稿者 on 投稿時間

  コメント内容

  by 投稿者 on 投稿時間

  コメント内容

• コメントフォーム

トラックバック

• このエントリのトラックバック URI
• トラックバックリスト
  • リスト（どこから／どこのどなたが／いつ／どのような内容で）
  • リスト
  • リスト
  • リスト

続いてマークアップ展開。

<!-- BEGIN comment_area -->
<div id="comments">
<h2>コメント</h2>
<h3>この記事に対するコメント</h3>
<dl class="comment_entry" title="この記事に対するコメント">
<!-- BEGIN comment -->
<dt>by {comment_name} on {comment_time}:</dt>
<dd><p>{comment_description}</p></dd>
<!-- END comment -->
</dl>
<h3>コメントする</h3>
<form>コメントフォーム（省略）</form>
</div>
<!-- END comment_area -->

<!-- BEGIN trackback_area -->
<div id="trackback">
<h2>トラックバック</h2>
<dl><dt>この記事のトラックバックURI</dt><dd>{trackback_url}</dd></dl>
<h3>この記事に対するトラックバック</h3>
<!-- BEGIN trackback -->
<dl class="tb_entry">
<dt>Title:</dt><dd>{trackback_title}</dd>
<dt>From:</dt><dd>{trackback_blog_name}</dd>
<dt>When:</dt><dd>{trackback_time}</dd>
<dt>Excerption:</dt><dd>{trackback_excerpt}</dd>
</dl>
<!-- END trackback -->
</div>
<!-- END trackback_area -->

細かい話ですが、コメントリストは定義リスト（dl）要素ひとつでコメント者の情報とコメント内容を並べ、トラックバックリストでは一つのトラックバックに一つの定義リストを使っています。例によってこの辺は解釈次第でどうにでもなるんですが、私としては○○＝△△と定義できるものは定義リストで書くので、コメントリストは複数の A says B のかたまり、トラックバックリストは Title/From/When/Excerption の定義をひとかたまりとして、それが場合に依っては複数ある、という感じです。…コメントがひとつもついてないと空の dl 要素ができてしまうんですが (-_- )

あとはプロフィールブロックですが、こちらは JUGEM で配付しているテンプレートではエントリブロックと構造が同じなので、harvest でのマークアップ展開のみ提示して説明は割愛させていただきます (_ _)

 <!-- BEGIN profile_area -->
<div id="profile">
<h2>プロフィール</h2>
<h3>{profile_name}</h3>
<div class="entry_body">{profile_description}</div>
</div>
<!-- END profile_area -->

テンプレート解説：HTML編(蛇足)

ところで、takkyun＠ふろむにぅじぃさんのお勧めのお蔭さまで、こんなくそ理屈っぽいエントリに随分アクセスを頂いております。こちらを見てマークアップ直してみたという方もいらっしゃるようで大変有り難く思っているんですが、実は今まで説明したことを適用しても、HTML-lint などの評価システムの結果には何の影響も出ません(爆)

というのが、この手の評価システムはあくまで W3C が提示している HTML 仕様に合致しているかどうかしか判断しておらず、対して私は一連のエントリでその辺りのことについては全く触れていないからです。大体コンピュータが文章を読んで人間のように文意を理解することができないからこそマークアップが必要なわけで、コンピュータが文章を読んでどこにマークアップしたらいいのか判定できるのならそもそもマークアップ要らないわけです (^^; ちゅーことで、特に JUGEM でいい点取りたいと思われている方は こちらのエントリを参照されたら良いと思います。

えーと…………(-_- ) 次回はですね（ってまだ続くんかい！）、やっと CSS 編に行きます。一応今までのながーい説明でマークアップについて語るという目的は達成したと思うんですが、実際の話、テンプレートデザインがなかなかマークアップ本位にならない理由は見た目が悪い（うまいことできない）という点につきるわけです。…まぁ私が人様にデザインの何たるかを教えられるはずもありませんが、マークアップ本位のテンプレートに対する CSS の適用の仕方みたいなのをお見せすれば、そっから自分でどんどんいけちゃう方もいるかな、と思いまして。CSS には正当な（valid な）HTML に適用されるべきという明確な規定がありますので、評価システムでの高得点の上げ方に関係する話もちょっとはすることになるだろうと思っております。

てなわけで、こちらの方面にまるきり興味のない方はもう少しスルーしてて下さい (^^; てか、そんな方々にこんなところで話しかけてもダメだろ。