« Thingamablog 1.0.2-OKAMURA-20051025 配布 | Main | 残るは MonthLabel だけ »
Thingamablog にコメントやトラックバックを付けるための道具には幾つかの選択肢がある。大きく分けると次のようになる。
.Mac では CGI が使えないので CGI 型を使用しようとすると必然的にレンタルサーバや自前のサーバを利用することになる。そうしたらそっちでブログを公開してもよいわけで、ここではあくまでも .Mac を主体に考えていきたいのでサービス型を検討した。
検討したと言っても多くのものを検討したわけではない。Tecknik.net: Commenting: Systems などに一覧されているが、確実に UTF-8 など日本語が表示できるエンコードをサポートしていて Trackback もでき、更に無料でも使用できるものとなるとやっぱり HaloScan くらいしか見つからなかった。他のは日本語が扱えるかどうかは外から見ただけではわからなかった。サインナップしてみたら UTF-8 が使えないとかでは嫌だし。HaloScan はときどき調子が悪くなるが、CacheUpIt があるので致命的なことにはならない。
まず、HaloScan アカウントを取得し、HaloScan の設定を行う。特に大事なのが 設定ページの中の Character Encoding
の設定だ。ここで日本語が表示可能なエンコードを選択しておかなければならない。
次に Install ページへ行って thingamablog
と Display trackback code
にチェックを入れて [Next > >] ボタンを押して Thingamablog 用のコードを表示させるわけだが、ここで表示されるコードは次の理由で薦められない。特に Step 2: Automated for Thingamablog Users
のコードはかなりまずい。
コメントページやトラックバックページへのリンクが javascript スキームの URL になっているので、JavaScript を処理できないとリンクを辿ることができないからだ。
健常者でもポップアップウィンドウが開いたことに気付かないこともたまにはあると思う。ましてや操作に慣れない人や、急な変化をすぐに認識できない人や、スクリーンリーダーを使っている目が不自由な人には、ポップアップウィンドウはかなりわかりにくいインターフェースだろう。
そもそも HTML 4.01 Strict や XHTML 1.0 Strict には a 要素に target 属性は存在しない。旧態のタグ付けからの移行用の Transitional では残っているが、新しいウィンドウを勝手に表示させるのは推奨されていないということだ。
HaloScan の調子が悪く Step 1
の JavaScript がロードできないとそうなってしまうからだ。
三つ目問題について最近 HaloScan も認識したらしく Handling HaloScan downtime gracefully というページでよりよいコードがアナウンスされている。ところがどっこいここのコードもあまりお薦めできない。まだ一つ目と二つ目の問題が残っていることに加えて、次の問題が新たに発生するからだ。
標準でない要素なので相互運用性に問題が発生する可能性が大きい。CSS で white-space: nowrap; などを付ける方がよい。
script 要素を知っている上でサポートしないブラウザであればそうはならないが、script 要素を全く知らないブラウザでそうなってしまう。例えば携帯電話のブラウザなどに見られる。
というわけで Handling HaloScan downtime gracefully で提示されているコードをベースにもっとよいコードを付ける手順を示す。上に述べた問題点の他にも色々考慮してみた。
この JavaScript ファイルは script 要素で長々と記述しろと HaloScan が提示している JavaScript コードをファイルにしたものだ。
web ディレクトリとは Thingamablog を最初に起動したときに場所を訊かれた database 置き場にある数字列によるディレクトリ(一つのブログの全データが入っている)の直下にある web ディレクトリのことだ。
<script type="text/javascript" src="<$BaseURL$>/haloscan.js"></script>
<script type="text/javascript" src="http://www.haloscan.com/load/YOURNAME"></script>
head 要素とは <head> から </head> までのこと。YOURNAME は自分の HaloScan アカウント名に置き換えなければならない。
対象となるテンプレートは次のとおり。
<a href="http://www.haloscan.com/comments/YOURNAME/entry_<$EntryID$>" title="「<EntryTitle><$EntryTitle strip_html="1"$></EntryTitle>」へのコメント"><script type="text/javascript"><!--
HaloScanCount('entry_<$EntryID$>', 'comment');
// --></script>Comment<script type="text/javascript"><!--
HaloScanPlural('entry_<$EntryID$>', 'comment');
// --></script></a>
<a href="http://www.haloscan.com/comments/YOURNAME/entry_<$EntryID$>" title="「<EntryTitle><$EntryTitle strip_html="1"$></EntryTitle>」へのコメント" onclick="HaloScan('entry_<$EntryID$>');return false;"><script type="text/javascript"><!--
HaloScanCount('entry_<$EntryID$>', 'comment');
// --></script>Comment<script type="text/javascript"><!--
HaloScanPlural('entry_<$EntryID$>', 'comment');
// --></script></a>
<a href="http://www.haloscan.com/tb/YOURNAME/entry_<$EntryID$>" title="「<EntryTitle><$EntryTitle strip_html="1"$></EntryTitle>」へのトラックバック"><script type="text/javascript"><!--
HaloScanCount('entry_<$EntryID$>', 'trackback');
// --></script>Trackback<script type="text/javascript"><!--
HaloScanPlural('entry_<$EntryID$>', 'trackback');
// --></script></a>
<a href="http://www.haloscan.com/tb/YOURNAME/entry_<$EntryID$>" title="「<EntryTitle><$EntryTitle strip_html="1"$></EntryTitle>」へのトラックバック" onclick="HaloScanTB('entry_<$EntryID$>');return false;"><script type="text/javascript"><!--
HaloScanCount('entry_<$EntryID$>', 'trackback');
// --></script>Trackback<script type="text/javascript"><!--
HaloScanPlural('entry_<$EntryID$>', 'trackback');
// --></script></a>
対象となるテンプレートは次のとおり。
もちろん YOURNAME は自分の HaloScan アカウント名に置き換えなければならない。
テンプレートを更新すると影響するページがちゃんと生成されて公開される。
手順 2,3 のコードの中で YOURNAME を自分の HaloScan アカウント名に置き換えるわけだが、単純に置き換えるとテンプレートに汎用性がなくなる。そこで Custom Tags を次のように設定する。
そして手順 2,3 の YOURNAME を <$HaloScanAcount$> に置き換えると更によいだろう。