L
次のページ
H
前のページ
U
上のページ

« Mac_Stripe-XHTML_Strict-ja に不備がありました | Main | Mac_Stripe-XHTML_Strict-ja をブラッシュアップ »

2005年12月12日

Thingamablog + HaloScan + .Mac の課題

テンプレートをもっとブラッシュアップするためにパラノイア的に色々試しているのだが、色々改善すべき点がある。正しい HTML や XHTML を出力するだけでなくアクセシビリティとユーザビリティをより向上させるために必要な事柄を列挙してみる。

Thingamablog で対応した方が良いこと

<$BlogTitle$><$PageTitle$> が Basic 型であること。

<$BlogTitle$><$PageTitle$> は title 要素とかヘッダ部分のすぐ下、あるいは RSS の title 要素などで使われている。置き換えられる文字列に & < > が入っていてもそれを実体参照にすることができないので、invalid になってしまう。特に RSS では致命的だ。

エントリのタイトルに & < > が入っていても <$PageTitle$> の代わりに <BlogEntry><EntryTitle><$EntryTitle encode_html="1"$></EntryTitle></BlogEntry> を使えば対応できる。しかしブログやカテゴリのタイトルに & < > が入っていると対処できない。

属性値にすることも考えるとエントリやカテゴリのタイトルに & < > それと " を使いたいときはそれぞれ &amp; &lt; &gt; そして &quot; と書くことになる。これで回避はできるのだが、そういう制約はない方がよい。必ず知らずに普通に書いてしまうユーザが出てくるからだ。

さもなければ、GUI 上の表示はユーザが入力したとおりにし、内部で使うときには実体参照するという方向もあり得る。しかし、それではテンプレートが HTML や XML を生成する前提になってしまう。テキストであればなんでも生成できるようにしておいた方が Thingamablog の可能性を維持できる。

だからこれらのテンプレートタグのようにユーザが入力した文字列に置き換えられるところは全て Hypertext 型にしておいて提供するテンプレートで encode_html="1" などを使用して対応するのが望ましい。

<$RssLink$><$BaseURL$> が Basic 型であること。

ここには & < " > は入ってきそうもないが、%-escape ができないという問題がある。

例えば各ページへリンクしているページ一覧を参照できるように Technorati を利用しようしたとする。そうすると次のような URL を使う必要がある。

http://www.technorati.com/search/homepage.mac.com%2Fyuji_okamura%2FDotMac%2Ft%2Farchives%2F2005%2F10%2Fentry_38.html

しかし http:// を取り除くことも / を %-escape して %2F にすることもできない。JavaScript に噛ませる方法があるが、JavaScript が使えないブラウザでの代替が存在しない。

テンプレートの工夫では対処できないから URL 型というようなテンプレートタグの新しい型があるといいのだが…。

テンプレートで工夫した方が良いこと

「続きを読む(Read More)」のリンクは title 属性を付けた方が良い。

「続きを読む(Read More)」のリンクは全て同じ文字列になってしまっている。読み上げブラウザや携帯電話のブラウザで参照するとき、リンクになっているところをジャンプしながら読む場合がある。そのときに同じ文字列でリンクしているとどこへのリンクなのかはっきりしない。

この場合はリンクの文字列自体を工夫してエントリのタイトルを付けるのが最も良い解法なのだが、そうすると今度は見た目に長ったらしくなってしまう。

妥協点として title 属性を用いるのが良いだろう。読み上げブラウザが対応しているかどうかはわからない(多分対応していないのが多い)が、標準の手段によるリンクの差別化方法だから、対応していなければ開発元には頑張って貰うというスタンスも筋は通っているからだ。(でも、今困っている人に対応するのが一番いいのには変わりはない。)

投稿時刻を permalink にする習慣も考えものだ。時間自体はエントリを指し示していないからだ。リンク先の情報として不十分。色々考えるとエントリのタイトルを permalink にするのが正解だと思う。

「続きを読む(Read More)」のリンク先は要約の直後がいい。

Front PageArchive Page などで要約を読み、更に読もうと思って Entry Page に移動してきた人がもう一度要約を読むのは煩わしいことだ。

特に読み上げブラウザでは、要約を読み飛ばす手段が現状では用意されていない。だから読み上げスピードを速くしてまだ読んでいないところを探すことになるが、せっかく読みにきてくれた人達にそんなご苦労はさせたくない。

だから Entry Page の本文開始部分にアンカーが自動で入るようにして、「続きを読む(Read More)」のリンク先はそこにするのがいいだろう。

サイト上の現在位置を示すものを付けた方が良い。

Index Page を除いて形式が告示しているためにサイト上のどの位置にいるのかが非常にわかり難い。ナビゲーションが一貫しているのはよいと思うのだが、Archive Page にいるのか Front Page にいるのか Category Page にいるのかがはっきりしない。

このため目的の記事を探すために同じ Category Page に移動したり、同じ Archive Page に移動することが起きそうだ。

ここはバナー部分を工夫すると良さそうだ。今はどのページも h1 要素はブログタイトルになっている。Entry PageCategory Page よりももっと主題が絞られているわけだからそれを h1 要素にした方がより内容を表していると思う。その方が SEO としても効果を期待できる。

よい方向性が思い付かないこと

RSS のリンク先も本文からがいい。

Read More と理由で RSS での item 要素(この場合はエントリ)の link 要素の内容も Entry Page の本文開始部分へのフラグメントを付けた URL が望ましい。

item 要素には guid 要素があってそこに isPermaLink="true" を付けているのだから permalink はちゃんと示している。だから permalink を RSS から取得したいアグリゲータはそこから取得すればいいのだ。

しかし、テンプレートのアプローチではこれを実現するのはかなりややこしいことをしなければならない。不可能ではなさそうだが feed.template の見通しが悪くなるので考えものだ。

コメントからもとのページへ戻れるようにしたい。

XHTML 1.0 Strict を使用しているからコメントは別画面で開くことができない。これは制約でもあるが実は意図している。目が見えない人にとってたとえ別画面で開くと事前に知らされていたとしても別画面は使いづらいものということなのだそうだ。

しかし一方でコメントのページから元のページに戻る手段がブラウザの機能で元のページに戻る以外にない。HaloScan に寄付をしてアカウントを Basic から昇格させた上で JavaScript による工夫が必要になる。無料でやることは .Mac では不可能だ。特に、コメントの RSS からジャンプしてきたときは現状の Thingamablog と HaloScan では全く不可能だ。たとえアカウントを昇格させたとしても。

一つの方法は Thingamablog が少なくとも Entry PageArchive PageIndex Page という組み合わせ相当の情報をそれぞれのページに沿って xml ファイルとして出力する機能を備えるというもの。そうすれば JavaScript でそれを読みながらエントリの ID をキーにコメントが対応するエントリの Entry PageArchive Page を探し出すことができる。ただし、エントリ数が多くなると JavaScript から読み込むファイルの数も多くなるので低帯域接続のユーザ(自分だ!)は少し辛くなるかもしれない。

HaloScan 側の拡張でも方法はありそうだ。しかし、HaloScan は Thingamablog のためのものではないし、HaloScan を説得できなければ拡張してもらえないからあまり現実的ではない。

いずれにしろ JavaScript しか頼るものがない .Mac + Thingamablog + HaloScan という組み合わせでは限界だ。別に .Mac でなくても相当面倒な工夫が必要になることではあるが。