トイレのうず

ここは LOVELOG なんだけれど、お友達の blog の「For the mind：タグクラウドの表示」の記事を読んで気になったのでいろいろ調べてしまったので、ご報告がてら記事にしてみる。
タグクラウドの表示の何が問題かというと、Windows Internet Explorer でタグクラウドの行間が狭く表示されるらしい。他のブラウザで確認したところきちんと表示されていた、とのこと。

Windows IE での見え方

Mac Safari での見え方

（サンプルとしてFor the mindの画面をお借りしました。）

なんとなく、Windows IE のスタイルシート周りが悪いんじゃないかと思ってソースを見てみたらびっくり。Seesaa のタグクラウドはパラメーターに対するフォントの大きさを class 属性には持っていなくて（class=”_tag”）、title 属性に/をつけて無理矢理持たせている（title=”○○/2″）のだ。これを tag_cloud.js という Javascript で読み込んで、フォントサイズを決定し、それを Javascript の element.style.fontSize でフォントサイズを後からレンダリングし直しているのだ。これには正直びっくりした。
普通、他のMTのタグクラウドのプラグインなんかは、サーバー側でパラメーターを処理してフォントサイズを決定して、それを class 属性に吐き出すような処理をしている。普通に設計したら、こっちの方法をとると思う。
けれど、Seesaa はその処理をサーバーにさせると負担が増大するから嫌なのか、クライアントであるブラウザにさせている。これが、IE でタグクラウドの行間が狭くなって文字が重なってしまったりする原因。
IE にはバグが多くて、今回のこれもそのバグに1つでしょう。一度読み込んでレンダリングしたの文字のサイズを Javascript から変更されても、元のフォントサイズの行間で表示してしまう。だから、タグクラウドのフォントサイズが大きくなったときに、文字が重なってしまうのです。そういうとき、どうなるかをきちんと検証していなかった Seesaa のシステムのミスですね。

さて、回避の方法がないのかと思って、いろいろ探ってみましたが、簡単な方法はなくて、ちょっと、HTML をいじって、しかも Javascript も変更しなくちゃいけない。
ちょっと面倒だけれど、文字が重なるのが嫌な人のために書いておきます。（何度も書くけど、ここは LOVELOG だけどなぜか Seesaa の話。）Javascript は手を加えたものを用意したので使ってください。手を加えたっていっても、Internet Explorer で表示したときのみ行間も指定する、っていうスクリプトを追加しただけですけど。

タグクラウド行間狭化補正方法

1) ここから tag_cloud.js をダウロード。

2) Seesaa にダウンロードしたファイルをアップする。
　・「記事投稿」→「ファイルマネージャー」でアップロードでダウンロードしたtag_cloud.jsを指定。
　・新しいディレクトリ「js」を作成し、アップロード。

3) タグクラウドのHTMLを変更する。
　・「デザイン」→「コンテンツ」のタグクラウドをダブルクリック。

　・オーバーフローしたウインドウの右上「コンテンツHTML編集」をクリック。
　・1行目を次のように変更
　<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
　↓
　<script type="text/javascript" language="javascript" src="http://○○○○.up.seesaa.net/js/tag_cloud.js"></script>
　○○○○は blog URL 「http://○○○○.seesaa.net/」の部分。
　・保存→閉じるをクリック。

4) 全ページを再構築する。

するとWindows IEでの表示もOK。

For the mindの管理人 uguisu さん、画面をサンプルでお借りしました。事後報告ではありますが、ここでお礼を申し上げます。ありがとうございます。

ちなみに追加した Javascript は以下のような感じです。緑の文字の部分を追加しました。

for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
tag[0].style.fontSize = calc_fontSize(tag[1], tags.length, max, min, levels, min_fs, factor) + 'px';
IBN = navigator.appName.toUpperCase();
//IEの場合のみ行間を指定する
if (IBN .indexOf("EXPLORER") >= 0) {
tag[0].style.lineHeight = calc_fontSize(tag[1], tags.length, max, min, levels, min_fs, factor) + 3 + 'px';
}
}