あかつきのお宿

お茶の間、小説の間、それから音楽の間を見ると、何かタイトルがぐるぐると動いているボックスがあるじゃないですか。まあ、マウスを合わせないとぐるぐると動かないんですけど。

これは、Wordpressのプラグインとして公開されている、タグクラウドを3D表示にするWP-Cumulusを利用したものです。もちろんそのままでは使えないので、Wordpressの外でも使えるようにちょこっといじりました。

当初はこのサイトにWordpressは使わない予定でしたからそんな感じで作ったんですが、結局ブログのためにWordpressを入れてるわけだし、それならWordpressの関数を使えるようにすれば良かったかもしれないですね。面倒だから（やり方がよく分かってないから）やらないっすけど。



正直、ソースを読んでも動きがあまりちゃんとは理解できなかったので、とりあえずwp-cumulus.phpの中にあるWordpressの関数が使われている部分だけCakePHPでも動く感じに直したら、↓こんな感じになりました。あまり必要のない部分は端折って書きます。

//Controller側
ob_start();
echo '<a href="{$this->webroot}novels/a/1">タイトル</a>(1)';
$param['buf'] = urlencode(ob_get_clean());	
$param['soname'] = 'so'.rand(0,9999999);
$param['movie'] = $this->webroot.'tagcloud.swf?r='.rand(0,9999999);
$param['divname'] = 'wpcumuluscontent'.rand(0,9999999);
$this->set(compact('param'));

//View側
<div id="<?php echo $param['divname'] ?>">
    <p><?php echo urldecode($param['buf']) ?></p>
</div>
<script type="text/javascript">
    var <?php echo $param['soname'] ?> = new SWFObject("<?php echo $param['movie'] ?>", "tagcloudflash", "304", "260", "9", "#ffffee");
    <?php echo $param['soname'] ?>.addParam("allowScriptAccess", "always");
    <?php echo $param['soname'] ?>.addVariable("tcolor", "0x000000");
    <?php echo $param['soname'] ?>.addVariable("tcolor2", "0x000000");
    <?php echo $param['soname'] ?>.addVariable("hicolor", "0x000000");
    <?php echo $param['soname'] ?>.addVariable("tspeed", "100");
    <?php echo $param['soname'] ?>.addVariable("distr", "true");
    <?php echo $param['soname'] ?>.addVariable("mode", "cats");
    <?php echo $param['soname'] ?>.addVariable("categories", "<?php echo $param['buf'] ?>");
    <?php echo $param['soname'] ?>.write("<?php echo $param['divname'] ?>");
</script>

あとはダウンロードしてきたWP-Culumusの中にあるswfobject.jsとtagcloud.swfを所定の場所に置いてあげれば動くと思います。少なくともうちのは、上記のソースで動作してます。

Ｃｏｎｔｒｏｌｌｅｒ側の処理で、タイトルの後ろに『(1)』ってのがあるんですけど、これは本来なら生成されるタグクラウドの各タグに紐づいている記事の数だと思います。本来はタグとかカテゴリを表示するためのプラグインですからね。でまあ、今回の僕は小説や楽曲のタイトルが出るだけなので、紐づく記事の数とか関係ないんですけど、これ書いとかないとどうも表示が上手くいかないみたいです。

たぶん、この数字で表示される文字の大きさを変えていると思うんです。実際のタグクラウドって、重みづけされてますからね。人気のタグは文字がおっきいとか。

で、紐づいている記事の件数が0の場合は、表示されないような設計になっているのかもしれません。だからここを省略すると、表示されないようになっているのかも。最初そのことに全然気づかなくて、結構はまりました。何で表示されないんだろうな～ってずっと思ってたんですが、これが原因だったみたいです。

上の例ではタイトル1つ分のリンクしか生成してないですが、ここをループ処理とかすれば、複数表示が出来ます。僕の場合は、小説も楽曲もDBからランダムで15個のデータを取って来て、表示させてます。

ob_start();
foreach($data as $val) {
    echo '<a href="リンクURL">タイトル</a>(1)';
}
$params['buf'] = urlencode(ob_get_clean());
～以下略～

ちなみに、MySQLにはrand()という、データをランダムに取って来る関数があるんですが、これはかなり処理が重いらしいので、やるのならPHP側でランダムにIDをいくつか生成して、IN句にぶっこんでデータを持って来る方がいいみたいです。