カテゴリの指定数2005年05月19日 09時21分

アサブロを触ってみていろいろと要望が出てきたので、今日はその要望についてまとめてみました。書いていて長くなったので3つの記事(この記事、HTMLに対する要望願望)に分けることにします。

現在アサブロではひとつの記事に対してカテゴリを2つまでしか指定できませんが、これははっきり言って少ないと思います。というのも、私はこの「カテゴリ」というのをディレクトリとしてではなくラベル、もしくは記事に対するキーワードとして使いたいと思っているからです。

記事をコンピュータのファイルに例えるならば、従来のようにファイルの内容ごとにディレクトリを作って整理するのではなく、ファイルにさまざまなキーワード(メタデータ)をつけてそこから絞り込んでいくというか、つまりは最近注目が集まっているデスクトップ検索技術を使うのと同様に記事を整理していきたいのです。

カテゴリを2つ指定できるのだから単純なディレクトリ構成よりは幅を持たせられますが、ここはもう一歩踏み込んで最低3つ、できれば5つかそれ以上のカテゴリを指定できるようにしてほしいです。

ですが、こういう使い方をすると現在のアサブロのインターフェースではカテゴリの一覧が膨れ上がってしまう恐れがあります。私が参考にしたいと思っているのはねこめしにっきのジャンル分けなのですが、ここまでやってしまうととてもカテゴリの部分にそのまま納めることはできません。

だからやるとしてもそれよりは簡単な構成になってしまうでしょうが、それでも今のままではカバーしたいキーワードをカバーしきれないかもしれないので指定できる数を増やしてほしいところです。(なんだかんだ言ってこのままでも使っているうちに慣れてしまいそうな気もしますが……)

アサブロの生成するHTML (要望)2005年05月19日 09時23分

先日の更新でHTMLに少し手が入れられたのですが、個人的にここはこうしてほしいという部分があるので書いておきます。なお、この記事では積極的に直してほしい部分を取り上げ、できればこうであってほしいなという点については別記事でまとめることにします。

  1. div.mod-description、div.mod-category直下のdiv要素(「このブログについて」と「カテゴリ」に関する本文)のclassがmod-textになっています。ほかの部分と比較するに多分mod-bodyの間違いでしょう。
  2. div.mainの子要素としてdiv.naviが2つ存在しますが(「前の記事」「次の記事」といったナビゲーションが入るのか?)、それぞれnavi-top、navi-bottomというidまたはclassを加えて区別できるようにしてほしいです。(主にスタイルのため。)
  3. div.calendarの子要素にclassがmod-captionであるh2要素(内容は「カレンダー」あたりが適切か)およびclassがmod-bodyであるdiv要素を追加し、カレンダーを構成するtable要素は追加されたdiv要素の子要素にしてほしいです。つまり、現在は要素の親子関係が
    div.mod.mod-calendar
    └ table.calendar
    となっているところを、
    div.mod.mod-calendar
    ├ h2.mod-caption (カレンダー)
    └ div.mod-body
       └ table.calendar
    としてほしいのです。(スタイルを作成する際にツールバーのほかの項目と一貫性を持たせるられるようにするため。) スタイルシートにて.mod-calendar .mod-caption { display: none; }としておけば表示も今とは変わらないはずです。
  4. DOCTYPE宣言が<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">と存在しないものになっているので、正しく<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">としてほしいです。
  5. フッタに存在するアサブロのバナー画像に、HTML 4.01 Strictには存在しないborder属性が記されているので、これを削除してほしいです。リンク画像につくボーダーを消すのはスタイルシートで#footer a img { border: none; }としてほしいです。
  6. アサブロバナー画像のimg要素及びコメント送信フォームのinput要素の開始タグがXMLの空要素タグのように記述されています。(XHTMLではなく)HTMLを使うのなら/>ではなく>でタグを閉じてほしいです。

さまざまなスタイルを作っていくにあたって、表現の可能性を増やすためにもぜひ検討していただきたいと思います。

アサブロの生成するHTML (願望)2005年05月19日 09時25分

先の記事ではぜひ修正してほしいと思った部分を挙げましたが、ここではこのままでもいいかもしれないけどできればこうしてほしいなと思う部分を挙げていきます。

1. コメント送信フォーム周り

今のコメント送信フォームは、ベタのテキストとinput要素、br要素が並んでいるだけでスタイルシートによるレイアウト変更の余地がほとんどありません。たとえば以下のように定義リストを使うことでレイアウトデザインの自由度が増すと思います。

<form ...>
<dl>
<dt class="comment-name"><label for="comment-name">名前:</label></dt>
<dd class="comment-name">
    <input id="comment-name" name="name" value="" size="32">
</dd>
<dt class="comment-mail"><label for="comment-mail">メールアドレス:</label></dt>
<dd class="comment-mail">
    <input id="comment-mail" name="mail" value="" size="50">
</dd>
<dt class="comment-url"><label for="comment-url">URL:</label></dt>
<dd class="comment-url">
    <input id="comment-url" name="url" value="" size="50">
</dd>
<dt class="comment-content"><label for="comment-content">コメント:</label></dt>
<dd class="comment-content">
    <textarea id="comment-content" name="content" cols="60" rows="5"></textarea>
</dd>
</dl>
<p class="comment-submit">
<input type="submit" name="comment" value="確認">
<input type="hidden" ...>
</p>
</form>

classはスタイルのためですがなくてもいいかもしれません。隠れコントロール(<input type="hidden" ...>)はform要素の直下に置けないため確認ボタンのあととしました。

2. カレンダー周り

これはスタイルのためではなくHTMLの考え方に沿ってのことですが、どうもカレンダーの表のマークアップが中途半端のような気がします。

2005/05
01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

上に挙げたのが今のカレンダーです。「2005/05」という月表示は表全体の見出し、「日月火……」という曜日名はヘッダ行として表せると思いますがいずれもそうはマークアップされていません。それを修正すると以下のようになります。

<table class="calendar" summary="2005年5月のカレンダー">
<caption class="calendar-title">2005/05</caption>
<colgroup class="calendar-sun-col"></colgroup>
<colgroup class="calendar-wday-col" span="5"></colgroup>
<colgroup class="calendar-sat-col"></colgroup>

<thead>
<tr>
<th class="calendar-sun-name" scope="col">日</th>
<th class="calendar-wday-name" scope="col">月</th>
<th class="calendar-wday-name" scope="col">火</th>
<th class="calendar-wday-name" scope="col">水</th>
<th class="calendar-wday-name" scope="col">木</th>
<th class="calendar-wday-name" scope="col">金</th>
<th class="calendar-sat-name" scope="col">土</th>
</tr>
</thead>

<tbody>
<tr class="calendar-row">
<td class="calendar-cell">01</td>
<td class="calendar-cell">02</td>
...
<td class="calendar-cell">30</td>
<td class="calendar-cell">31</td>
<td class="calendar-cell callendar-space" colspan="4"></td>
</tr>
</tbody>
</table>
2005/05
01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

table要素にsummary属性を追加し、月表示はcaption要素、曜日名はth要素としてマークアップ、表の構造を表すためにcolgroup要素、thead要素、scope属性を使っています。また、tbody要素の最初または最後に現れうる日付を含まないセルにはスタイルシートから利用できるようcallendar-spaceというclass名を加えました。

もし何らかの理由で月表示をセルとしてマークアップしたいというのなら以下のようになるでしょう。

<table class="calendar" summary="2005年5月のカレンダー">
<colgroup class="calendar-sun-col"></colgroup>
<colgroup class="calendar-wday-col" span="5"></colgroup>
<colgroup class="calendar-sat-col"></colgroup>

<thead>
<tr>
<th colspan="7" class="calendar-title">2005/05</th>
</tr>

<tr>
<th class="calendar-sun-name" scope="col">日</th>
<th class="calendar-wday-name" scope="col">月</th>
<th class="calendar-wday-name" scope="col">火</th>
<th class="calendar-wday-name" scope="col">水</th>
<th class="calendar-wday-name" scope="col">木</th>
<th class="calendar-wday-name" scope="col">金</th>
<th class="calendar-sat-name" scope="col">土</th>
</tr>
</thead>

<tbody>
<tr class="calendar-row">
<td class="calendar-cell">01</td>
<td class="calendar-cell">02</td>
...
<td class="calendar-cell">30</td>
<td class="calendar-cell">31</td>
<td class="calendar-cell callendar-space" colspan="4"></td>
</tr>
</tbody>
</table>
2005/05
01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

3. 個別記事の大見出しのリンク

現在個別の記事のページは「<記事のタイトル>: <ブログ名>」という形式の内容になっていますが、この文字列全体にそのブログのトップページへのリンクが貼ってあります。しかし、トップページへのリンクなのに個別の記事のタイトルが入っているというのは少々混乱の元かもしれません。できるならトップページへのリンクはブログ名の部分のみにしたほうがいいと思います。


以上、些細なことではありますが、余力があったら修正していただけるとうれしいと思う次第です。

IEでレイアウトが崩れる2005年05月19日 09時44分

このブログのトップページをWinIEで見てみたらレイアウトが見事に崩れてツールバーが下に行ってますね。まったく、IEのバグにも困ったものです。IE7では修正されていることを切に願うばかり。

しばらくは用意されたスタイルのままで行くつもりでしたがこれは早めにスタイルを書き換えたほうがいいかもしれません。まあそういいつつなかなか取り掛かれないのが私の性なのですが。