matuダイアリー

adiaryでタグクラウド - matuダイアリーでadiaryのカテゴリ一覧をタグクラウド化するJavaScriptを公開させていただきましたが、いくつか修正をおこなったのでVer1.00としてリリースさせていただきます。
ダウンロードと設置については、元記事をご覧ください。

■Ver0.00からの変更点

• フォントサイズを指定できるようにしました。
  詳細はコチラ
  
• 描画方式の変更しました。
  appendChild()->innerHTMLに変更したため、結果として描画回数を減すことができ、高速化しています。（ベンチマーク参照）
  
• ソースを少し整理しました。
  変数の汚染対策、JSLint対応、他
  

■ベンチマーク

adiaryCategoryCloud()を100回実行した際の処理時間をそれぞれのブラウザで計測してみました。単位はミリ秒です。

#	Firefox 3.0.1	IE6	Google Chrome	Opera 9.26
adiary_cc.js Ver 0.00	26791	59500	13937	59063
adiary_cc.js Ver 1.00	5632	11297	4096	4968

DOMスクリプティングにおいては、描画回数を減らすことがどれだけ重要かを示す結果になりました。とくにOpera…。

adiaryのカテゴリ一覧のタグクラウド化をJavaScriptで実装してみました。
正確にはカテゴリクラウドというかもしれないんですが、とりあえず、公開してみようかと思います。
ちなみに、Firefox3、IE6、Google Chrome、Opera9.26で動作確認しています。

■表示例

画像は少し拡大していますが、だいたいこんな感じです。

通常のカテゴリ一覧	タグクラウド化したカテゴリ一覧

■特徴

• カテゴリ一覧をよく見るタグクラウド形式で表示します。
• サブカテゴリもタグとして扱います。
• カテゴリ一覧のリスト表示しているノードの下位のノードを操作対象とします。
  <ul class="hatena-section main-category">～</ul>以外は操作しないので、その他のノードには影響がありません。
  
• カテゴリ名はシャッフルして表示します。
• ソースが汚いです(笑)

■導入

使ってあげてもいいという方はダウンロードしてご自由にお使いください。
ただし、使用に際しては、自己責任でお願いします。

ダウンロード(Ver 1.00)

• adiary_cc.js
• adiary_cc.min.js（圧縮版）

設置

大前提として、日記帳の設定でカテゴリ一覧を表示するにチェックを入れておく必要があります。

1. ダウンロードしたスクリプトをどこかに置きます。
   ここでは、adiary.jsと同じ/path/to/adiary/themeに置きます。
   
2. 埋め込みテキストのカテゴリ一覧より後ろの箇所に以下の2行を挿入します。
   

   <script type="text/javascript" src="http://url.to.adiary/theme/adiary_cc.js"></script>
   <script type="text/javascript">adiaryCategoryCloud();</script>
   

   url.to.adiaryはご利用環境に合わせて修正してください。
   

■フォントサイズ指定オプション

Ver1.00からフォントサイズの指定ができるようになりました。
adiaryCategoryCloud(min, max)
でタグクラウドで表示する際の、最小フォントのサイズと最大フォントのサイズを指定できます。
単位はpxで、指定できる範囲はmin,maxともに8から64です。
オプションの指定がない場合、もしくは指定の方法に（数値が大きすぎるなど）問題がある場合はデフォルト値を採用します。
省略した場合のデフォルト値は最小フォントのサイズが10px、最大フォントのサイズが24pxです。

フォントサイズ指定サンプル

<script type="text/javascript">adiaryCategoryCloud(10,32);</script>

と指定すれば、最大フォントサイズに32pxが指定され、デフォルト値の24pxよりも大きいため、タグクラウドのフォントサイズに、よりバラツキが生じます。

<script type="text/javascript">adiaryCategoryCloud(16,16);</script>

と指定すると、最小・最大フォントとも16pxが指定されたことになり、すべてのタグ名（カテゴリ名）が16pxで表示されます。