TagCloudをJavaScriptでパワーアップ

Posted by
ぴろり
Posted at
2005/09/24 17:27
Trackbacks
関連記事 (3)
Comments
コメント (3)
Post Comment
コメントできます
Category
MovableType
 巷では 云々が大人気です。あの Google Maps も実のところ、 のコアを成す を使ってあれだけのことを実現しています。FLASH に頼らずにだけで完結しているのは本当に驚きですね。 もまだまだ捨てたものじゃないという優れたお手本だと思います。

 さて、記事分類の新たな切り口として先日、本サイトにも導入してみた TagCloud ですが、 の実力にビックリしたことを糧に、 今回、これを を用いてパワーアップしてみました。 Maps には遠く遠く及びもしませんでしたが、その一部を真似てスライダコントロールモドキを導入し、また、タグのソート順を自由に切り替えられるようにもしてみました。

この記事をはてなブックマークに追加する この記事のはてなブックマーク数 | この記事をlivedoorクリップに追加する この記事のlivedoorクリップ数 | この記事をYahooブックマークに追加する この記事のYahoo!ブックマーク数 | この記事をdel.icio.usに追加する

TagCloud

 タグによる folksonomy の実現には、 Ogawa::Memorandaで公開されている Tagwire Pluginを使用しています。 また、TagCloud の生成は、 TagwireでTagCloudのコードを 大変に参考にさせて頂きました。 コードの本質部分はほとんど同じになっています。 有用なを開発・公開されている ogawa さんに感謝を m(_ _)m
 以下に独自の改造を紹介しながら説明していますので、 本サイトの TagCloudを参照されながら読んで頂くと判りやすいかと思います。

フォントサイズの調整

 タグの使用回数からフォントサイズを求める計算式を変更しています。 記事が増えて全体のタグの使用回数が増えてくると、 オリジナルのコードαではフォントサイズが上限なく大きくなります。 改造後のコードβではタグの使用回数の最大値と最小値を基にして、 使用頻度が最も少ないタグのフォントサイズを size_min に、 使用頻度が最も多いタグのフォントサイズを size_max に線形補間しています。 これにより、全体のタグの使用回数の多寡に関わらず、 ダイナミックに変化する TagCloud を生成することができます。

 カットオフ値による表示・非表示についても、同じ原理で正規化された出現回数を基に判定しています。

今は単純に線形補間としていますが、タグの使用頻度の分布まで考えた方がモア・ベター

ソート順の切り替え

 タグのソート順をボタン一発で変更できるようにしてみました。 今のところ"辞書順","更新日順","使用頻度順"によるソート切替えが可能です。 使用頻度順ソートについては、カットオフ値による表示・非表示切替えがあるので、 効果のほどはイマイチかもしれません。
 切替えボタンの onclick ハンドラで所望の TagCloud を表示し、 それ以外を非表示にしています。単純。

更新日でソート

 オリジナルのTagwire Pluginでは、 タグを使用頻度と辞書順でしかソートできません。 今回、更新日によるソートにも対応したかったので、も少し改造してあります。 tagwire.pltags サブルーチン中に以下の部分を追加します。

 これにより sort_by="date" オプションで、タグが登録された記事の更新日でソートが行えます。 また、他同様 sort_order による昇順/降順指定もそのまま有効です。

スライダコントロール

 タグの使用頻度に応じてタグの表示・非表示を切り替えることができますが、 この部分を Maps で使われている左端のズームコントローラを真似て(というか見た目そのまんま) スライダコントロール風にしてみました。

によってハンドラの登録方法が異なるようで、 全てのについて動作の保証が取れていません。 特にスライダ部分の動作が大きくことなるようです (Netscape7.1…動作、FireFox…動作、IE6.0…一部動作、…全くダメ)  うぁ〜…手間だなぁ(´・ω・`)

ソース

 TagCloud ページのインデックスアーカイブから抜粋を示します。

の後半部分はスライダコントロール関連のコードです。 IEとでは一部(または全部)で不具合が出ているので修正の必要があります ('05/09/26 追記)


この記事を読んだ人はこんな記事も読んでいます ?

その他の関連する記事


関連記事/トラックバック (最新 5 件を表示しています)

nuishi.Pastorale のスクリーンショット
タイトル
Tag Cloud with PHP & CSS
Trackbacked at
2006/07/22 23:37
from
nuishi.Pastorale
評価
Web Scouter
概要
Tag Cloudはタグの出現頻度・更新頻度を視覚的に表現したものです。当ブログでは各ページの下部に表示していますが、これはTagwireプラグインとPHP、C...

Frumenty のスクリーンショット
タイトル
Tag Cloud
Trackbacked at
2006/03/04 07:15
from
Frumenty
評価
Web Scouter
概要
Tag Cloudを導入しました。

eternalheart.com のスクリーンショット
タイトル
TagCloudのページを作る
Trackbacked at
2006/02/24 22:55
from
eternalheart.com
評価
Web Scouter
概要
上のメニューバーの右のほうにTagsっていうリンクがあるんですけど、やっとのこと...

この記事のトラックバック URL

寄せられたコメント (最新 5 件を表示しています)

Posted by
ぴろり ◆OLEEi.VOX.
at
2008/04/15 08:45
ID
S82uqLMc

ご指摘ありがとうございましたm(_ _)m
説明文はMT標準のタグ機能に倣うように書いているんですが,
タグ機能はOgawa::memorandaのTagwireプラグインを未だに使っているために,
説明と実際が違うことがよくあるんですよ…(直せよ

MTは下位互換性についてはかなり善処している方だと思いますが,
やっぱり未だに移行できない部分というのもあるもんです。

Posted by
bzbell
at
2008/04/15 07:43
ID
5m6U.dm2

おはようございます^^

記事の方興味深く読ませてもらいました。
記事内の count_min、count_max にセットする最少数、最大数取得のところを、lastn ではなく limit にしたら正しく表示されました (; ̄∇ ̄A

Posted by
ぴろり
at
2006/03/04 18:34
ID
uZw.HXvI

タブのドラッグが不調だったので外しましたorz

コメントを投稿する

 (必須/公開)
 (必須/非公開)
 

コメントスパム防止のため投稿前に ランダムな数字 ? を入力してから投稿してください。 お手数ですがご協力のほど宜しくお願いいたします。(必須)