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

« Thingamablog 1.1b4 が出ました | Main | Mac OS X 10.5(Leopard) で Thingamablog »

2008年01月11日

HaloScan + JS-Kit によるエントリのレーティング

コメント&トラックバックをブログに追加できるサービス HaloScan が JS-Kit と連携してエントリのレーティング機能をサポートしました。

Thingamablog でこれを利用する(一つの)方法を説明します。

オリジナルの説明ではうまくいかない

まず HaloScan のダッシュボードから辿ることができる JS-Kit の説明のページでは

<div class="js-kit-rating" title="" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>

HaloScan: Customizing the Ratings widget から2008年1月11日に引用

というコードをコピーして、最初の div 要素をレーティング表示させたいところに、次の script 要素を body 要素の終了タグの直前にペーストしてからページを公開するという説明がしてあります。

しかし、それを実際にやってみてもうまくいきません。恐らくエントリページはうまくいっていたと思うのですが、メインページ(main.template)、カテゴリページ(category.template)、アーカイブページ(archive.template)など複数のエントリがあるところではこれでうまくいくはずがありません。なぜならこれらのページではレーティング表示させたい箇所が複数あるのに、どれがどのレーティングかを区別する情報が全く存在しないからです。

インストラクションコードの改良だけでも駄目

この情報の欠如を補うのが上のインストラクションコードにある title="" permalink="" という属性指定の部分だろうと予想して、そこに各エントリのタイトルと固定リンクが入るようにしてやってみました。

具体的には各テンプレートで次のようにしました。

<div class="js-kit-rating" title="<Entry Title><$EntryTitle encode_html="1"$></EntryTitle>" permalink="<$EntryPermalink$>"></div>

しかしこれも駄目でした。エントリページではレーティング結果が残りますが、メインページには反映されません。

解決への試行錯誤

これを解決するヒントは同解説ページの「Multiple rating widgets on one page」の項と「Same ratings on different pages」の項です。ここには一つのページで複数のレーティング表示をするための説明と複数のページで同じレーティングを表示するための説明が書いてあります。

これらによると path 属性値に何のレーティングかを識別するための値を入れればよいとわかります。しかしながら具体的にどんな値を入れればよいのかがわかりません。URL の中のパス部分を入れればよいような感じがしますが、その確証がありません。レーティングの FAQ のページを読むと、Blogger 用のコードから path 属性だけでなく title 属性や permalink 属性もこれまでの解釈で正しいと読み取れます。しかしその上にあるレーティングのリセットの説明を併せて読むと path 属性値は実はなんでも良さそうにも思えます。

そこで、エントリページの URL のパス部分を本当に入れた場合と、HaloScan のコメントの ID に使用するものを入れた場合の両方を試してみました。HaloScan のコメントの ID はそのままのもの(例えばこのブログでしたら“entry_265”)を実際のブログに埋め込んでみました。後にもっと URL のパス部分のような形式にするためにその先頭に / を付けたものもテストページで試してみました。

しかし、実際にうまくいったのはエントリページの URL のパス部分を本当に入れた場合だけでした。うまくいくとは次のことです。

  1. レーティングを付けることができる。
  2. リロードしても付けたレーティングが残っている。
  3. 他のページで同じエントリのレーティングが同じように参照できる。

うまくいかなかったケースでは 2 や 3 が駄目でした。

うまくいく設定

というわけで結局のところ次のようにすればこの機能が利用できるとわかりました。

  • title 属性には <Entry Title><$EntryTitle encode_html="1"$></EntryTitle> でエントリのタイトルを入れる。
  • permalink 属性には <$EntryPermalink$> でエントリの固定リンクを入れる。
  • path 属性には固定リンクの URL のパス部分を入れる。

問題は固定リンクの URL のパス部分です。Thingamablog のデフォルトではたしかエントリの単独ページは存在せず、アンカー(フラグメント)付きのアーカイブページが固定リンクになっていたと記憶しています。アーカイブページはブログの設定で一ヶ月とか一週間とか、そういう期間毎のエントリの集合のページです。これが週ベースの期間になっているとパス部分のみをテンプレートタグで再現するのが困難に思われます。

幸い私の場合は月毎のアーカイブページにしているため次のようにしてうまくできました。

<div class="js-kit-rating" title="<Entry Title><$EntryTitle encode_html="1"$></EntryTitle>" permalink="<$EntryPermalink$>" path="/yuji_okamura/iSawIt/archives/<DayHeader><$DayHeaderDate format="yyyy"$>/<$DayHeaderDate format="MM"$></DayHeader>/entry_<$EntryID$>.html"></div>

私と同じように月毎のアーカイブページを使用し、エントリ単独のページをエントリの固定リンクにしている場合はこのコードを参考にすればレーティング機能を付けることができるでしょう。