2005
Jul
15th
はてなのnaoyaさんのnaoyaのはてなダイアリー - HTML::TagCloudを読んで、COREBlog用のモジュールを作ろうと思っていたのを思い出しました。この Cloud というのは、Flickrやdel.icio.usなどで採用されているのですが、Flickrの場合だと写真が、Del.icio.usだとブックマークが、どのようにタグ付けされているかを、その文字のサイズの大小によって表示させる方法と考えて良いのかな。
ということで、作ってみました。右に表示されているサイドバーの内の、CATEGORIESと表示されている部分がそれです。それぞれの文字の大きさが違いますが、文字が大きいほどそのカテゴリのエントリが多いことを意味しています。
最初はDTMLだけでなんとか書こうと思っていたのですが、（こちらは会社の先輩の）いとうさんに「JavaScriptを使った方が簡単じゃない？」とのアドバイスを頂いたこともあり、DTMLとJavaScriptで書きました。
もうちっときれいに書けそうな気もしますがとりあえず。
ということで、作ってみました。右に表示されているサイドバーの内の、CATEGORIESと表示されている部分がそれです。それぞれの文字の大きさが違いますが、文字が大きいほどそのカテゴリのエントリが多いことを意味しています。
最初はDTMLだけでなんとか書こうと思っていたのですが、（こちらは会社の先輩の）いとうさんに「JavaScriptを使った方が簡単じゃない？」とのアドバイスを頂いたこともあり、DTMLとJavaScriptで書きました。
もうちっときれいに書けそうな気もしますがとりあえず。
ということで、設定方法。
- まずはmodulesにcategories_cloudというDTMLドキュメントを追加します。僕は不安なのでcategoriesモジュールをコピペしました。
- categories_cloudの内容は以下のような感じ。
スタイルを5つ用意して、文字のサイズを変えています。でもって、そのカテゴリに属すエントリの個数が全体のうちの10% / 8%/ 6% / 4% 以上かどうかでそれぞれのクラスに振り分けています。
- あとはmodules内のindex_htmlに
- まずはmodulesにcategories_cloudというDTMLドキュメントを追加します。僕は不安なのでcategoriesモジュールをコピペしました。
- categories_cloudの内容は以下のような感じ。
スタイルを5つ用意して、文字のサイズを変えています。でもって、そのカテゴリに属すエントリの個数が全体のうちの10% / 8%/ 6% / 4% 以上かどうかでそれぞれのクラスに振り分けています。
<dtml-comment>
### Categories Cloud Module ###
</dtml-comment>
<div class="sideboxtitle">
<dtml-if "_.len(document_title)>0"><dtml-var document_title>
<dtml-else>Categories</dtml-if>
</div>
<div class="sidebody">
<style>
span.ccloud0 {font-size: 180%;}
span.ccloud1 {font-size: 160%;}
span.ccloud2 {font-size: 140%;}
span.ccloud3 {font-size: 120%;}
span.ccloud4 {font-size: 100%;}
</style>
<script>
var a = [<dtml-in category_list sort=name>
['<dtml-var blogurl missing="">/categorylist_html?cat_id=<dtml-var id>',
'<dtml-var name>', <dtml-var count>],
</dtml-in>];
var t = 0;
for (var i=0; i<a.length; i++)
t += a[i][2];
for (var i=0; i<a.length; i++) {
p = a[i][2] / t;
if (p > 0.1)
c = 'ccloud0';
else if (p > 0.08)
c = 'ccloud1';
else if (p > 0.06)
c = 'ccloud2';
else if (p > 0.04)
c = 'ccloud3';
else
c = 'ccloud4';
var o = '<span class="' + c + '"><a href="' + a[i][0] + '">'
+ a[i][1] + '</span> ';
document.write(o);
}
</script>
</div>
- あとはmodules内のindex_htmlに
<dtml-var categories_cloud>を足すのみで。
Posted by setomits at 10:30 |
Comments: 1
次に FireFox で確認したところ、こちらも字の大きさが違わない...。
スタイルシート？