この記事は時間経過やプログラムのバージョンアップなどの諸々の事情によって,現状に正しくそぐわない内容になっている可能性があります。関連記事やアーカイブを参照してみてください。
巷では Ajax 云々が大人気です。あの Google Maps も実のところ、Ajax のコアを成す JavaScript を使ってあれだけのことを実現しています。FLASH に頼らずにブラウザだけで完結しているのは本当に驚きですね。JavaScript もまだまだ捨てたものじゃないという優れたお手本だと思います。
さて、記事分類の新たな切り口として先日、本サイトにも導入してみた TagCloud ですが、JavaScript の実力にビックリしたことを糧に、
今回、これを JavaScript を用いてパワーアップしてみました。Google Maps には遠く遠く及びもしませんでしたが、その一部を真似てスライダコントロールモドキを導入し、また、タグのソート順を自由に切り替えられるようにもしてみました。
TagCloud
タグによる folksonomy の実現には、
Ogawa::Memorandaで公開されている
Tagwire Pluginを使用しています。
また、TagCloud の生成は、
TagwireでTagCloudのコードを
大変に参考にさせて頂きました。
コードの本質部分はほとんど同じになっています。
有用な
プラグインを開発・公開されている
ogawa さんに感謝を m(_ _)m
以下に独自の改造を紹介しながら説明していますので、
本サイトの TagCloudを参照されながら読んで頂くと判りやすいかと思います。
フォントサイズの調整
タグの使用回数からフォントサイズを求める計算式を変更しています。
記事が増えて
ブログ全体のタグの使用回数が増えてくると、
オリジナルのコードαではフォントサイズが上限なく大きくなります。
改造後のコードβではタグの使用回数の最大値と最小値を基にして、
使用頻度が最も少ないタグのフォントサイズを size_min に、
使用頻度が最も多いタグのフォントサイズを size_max に線形補間しています。
これにより、
ブログ全体のタグの使用回数の多寡に関わらず、
ダイナミックに変化する TagCloud を生成することができます。
カットオフ値による表示・非表示についても、同じ原理で正規化された出現回数を基に判定しています。
今は単純に線形補間としていますが、タグの使用頻度の分布まで考えた方がモア・ベター
ソート順の切り替え
タグのソート順をボタン一発で変更できるようにしてみました。
今のところ"辞書順","更新日順","使用頻度順"によるソート切替えが可能です。
使用頻度順ソートについては、カットオフ値による表示・非表示切替えがあるので、
効果のほどはイマイチかもしれません。
切替えボタンの
onclick ハンドラで所望の TagCloud を表示し、
それ以外を非表示にしています。単純。
更新日でソート
オリジナルの
Tagwire Pluginでは、
タグを使用頻度と辞書順でしかソートできません。
今回、更新日によるソートにも対応したかったので、
プラグインも少し改造してあります。
tagwire.pl の
tags サブルーチン中に以下の部分を追加します。
これにより
sort_by="date" オプションで、タグが登録された記事の更新日でソートが行えます。
また、他同様 sort_order による昇順/降順指定もそのまま有効です。
スライダコントロール
タグの使用頻度に応じてタグの表示・非表示を切り替えることができますが、
この部分を
Google Maps で使われている左端のズームコントローラを真似て(というか見た目そのまんま)
スライダコントロール風にしてみました。
ブラウザによってイベントハンドラの登録方法が異なるようで、
全てのブラウザについて動作の保証が取れていません。
特にスライダ部分の動作が大きくことなるようです
(Netscape7.1…動作、FireFox…動作、IE6.0…一部動作、Opera…全くダメ)
うぁ〜…手間だなぁ(´・ω・`)
ソース
TagCloud ページのインデックスアーカイブ
テンプレートから抜粋を示します。
JavaScript の後半部分はスライダコントロール関連のコードです。
IEとOperaでは一部(または全部)で不具合が出ているので修正の必要があります
('05/09/26 追記)
この記事を読んだ人はこんな記事も読んでいます
Ajax, Qjax, Wjax, Sjax, Zjax, AHax, AUax, AIax, AKax, AMax, ANax, AjQx, AjWx, AjSx, AjZx, AjaZ, AjaS, AjaD, AjaC
ブラウザ
Folksonomy, Dolksonomy, Rolksonomy, Tolksonomy, Golksonomy, Volksonomy, Colksonomy, FIlksonomy, F9lksonomy, F0lksonomy, FPlksonomy, FLlksonomy, FKlksonomy, FoKksonomy, FoOksonomy, FoPksonomy, FolJsonomy, FolIsonomy, FolOsonomy, FolLsonomy, FolMsonomy, FolkAonomy, FolkWonomy, FolkEonomy, FolkDonomy, FolkXonomy, FolkZonomy, FolksInomy, Folks9nomy, Folks0nomy, FolksPnomy, FolksLnomy, FolksKnomy, FolksoBomy, FolksoHomy, FolksoJomy, FolksoMomy, FolksonImy, Folkson9my, Folkson0my, FolksonPmy, FolksonLmy, FolksonKmy, FolksonoNy, FolksonoJy, FolksonoKy, FolksonomT, Folksonom6, Folksonom7, FolksonomU, FolksonomH, FolksonomG
JavaScript, HavaScript, UavaScript, IavaScript, KavaScript, MavaScript, NavaScript, JQvaScript, JWvaScript, JSvaScript, JZvaScript, JaCaScript, JaFaScript, JaGaScript, JaBaScript, JavQScript, JavWScript, JavSScript, JavZScript, JavaAcript, JavaWcript, JavaEcript, JavaDcript, JavaXcript, JavaZcript, JavaSXript, JavaSDript, JavaSFript, JavaSVript, JavaScEipt, JavaSc4ipt, JavaSc5ipt, JavaScTipt, JavaScFipt, JavaScDipt, JavaScrUpt, JavaScr8pt, JavaScr9pt, JavaScrOpt, JavaScrKpt, JavaScrJpt, JavaScriOt, JavaScri0t, JavaScri-t, JavaScriLt, JavaScripR, JavaScrip5, JavaScrip6, JavaScripY, JavaScripG, JavaScripF
MovableType, NovableType, JovableType, KovableType, MIvableType, M9vableType, M0vableType, MPvableType, MLvableType, MKvableType, MoCableType, MoFableType, MoGableType, MoBableType, MovQbleType, MovWbleType, MovSbleType, MovZbleType, MovaVleType, MovaGleType, MovaHleType, MovaNleType, MovabKeType, MovabOeType, MovabPeType, MovablWType, Movabl3Type, MovablRType, MovablDType, MovablSType, MovableRype, Movable5ype, Movable6ype, MovableYype, MovableGype, MovableFype, MovableTTpe, MovableT6pe, MovableT7pe, MovableTUpe, MovableTHpe, MovableTGpe, MovableTyOe, MovableTy0e, MovableTy-e, MovableTyLe, MovableTypW, MovableTyp3, MovableTypR, MovableTypD, MovableTypS
プラグイン
プログラミング
寄せられたコメント (全 7 件中、最新 5 件まで表示しています)
ありがとうございます。
ファイルを早速ダウンロードしてテストしてみましたが、今度はテンプレートのエラーとなりました。
ただ、エラー表示された内容のようなタグが無いのに表示され…。
いただいたファイルの中身を見てみたのですが、かなり改造されているんですね。
プログラマでは無いしがないWeb屋の私には中々解読が手強そうです(^^;
とりあえず、何とかテンプレートを修正して使用させていただきたいと思います。
更新日でのタグのソートは,私が勝手にプラグインを改造した結果,実現できるようになった機能でした。
TagwireプラグインはとりあえずMT4.x系でも騙し騙し(?)使えているっぽいので,テンプレートの書き方の問題のような気がします>エラー
現在,このサイトで使っているTagwireプラグインを置いておきますので参考にしてください。
http://www.magicvox.net/cgi-bin/mt/plugins/tagwire/tagwire.pl
申し訳ございません、大事なことを書き忘れていました。
MTのバージョンは3.2です。
やはりこれだけ古いバージョンだと厳しいんでしょうかね…。
事情によりバージョンUpができないので、何とか対応できたらと考えているのですが。
はじめまして。
更新日でソート改造を行ってみたのですが、下記のようなエラーが発生してしまい、再構築ができませんでした。
Undefined subroutine &MT::Plugin::Tagwire::entries called at lib/MT/Builder.pm line 159.
非常に面倒なテンプレートにしてしまっているために、何とか更新日でソートをしたいと考えているのですが、エラーの原因・回避策をご教授いただけないでしょうか…。
ご指摘ありがとうございましたm(_ _)m
説明文はMT標準のタグ機能に倣うように書いているんですが,
タグ機能はOgawa::memorandaのTagwireプラグインを未だに使っているために,
説明と実際が違うことがよくあるんですよ…(直せよ
MTは下位互換性についてはかなり善処している方だと思いますが,
やっぱり未だに移行できない部分というのもあるもんです。