今更タグクラウド
今更なんだけど、ちょっと必要になったのでPHPでタグクラウドを作ってみる(・∀・)
正しい(?)やりかたは知らないので、とりあえずタグ毎の個数を使って、重み付けは線形で、CSSでフォントを変更する方法で。
こんな感じ。
<?php $list = array( array( 'tag' => 'タグ1', 'count' => 12 ), array( 'tag' => 'タグ2', 'count' => 7 ), array( 'tag' => 'タグ3', 'count' => 18 ), array( 'tag' => 'タグ4', 'count' => 9 ), array( 'tag' => 'タグ5', 'count' => 13 ), ... ); $fonts = array( 'cloud0', 'cloud1', 'cloud2', 'cloud3', 'cloud4', 'cloud5', 'cloud6', 'cloud7', 'cloud8', 'cloud9' ); $min = null; $max = null; foreach( $list as $cloud ) { $min = ( ( $min == null ) ? $cloud[ 'count' ] : ( ( $min < $cloud[ 'count' ] ) ? $min : $cloud[ 'count' ] ) ); $max = ( ( $max == null ) ? $cloud[ 'count' ] : ( ( $max > $cloud[ 'count' ] ) ? $max : $cloud[ 'count' ] ) ); } $scale = ( $max - $min + 1) / count( $fonts ); // 出力 echo "<div class=\"cloud\">\n"; foreach( $list as $cloud ) { $font = $fonts[ round( ( $cloud[ 'count' ] - $min ) / $scale ) ]; $url = ...; echo "<a href=\"{$url}\" class=\"{$font}\">{$cloud['tag']}</a>\n"; } echo "</div>\n"; ?>
$listは、実際にはDBから集計した値。
使うCSSはこんな感じ。
.cloud { text-align: center; } a.cloud0 { font-size: 80%; } a.cloud1 { font-size: 100%; } a.cloud2 { font-size: 120%; } a.cloud3 { font-size: 140%; } a.cloud4 { font-size: 160%; } a.cloud5 { font-size: 180%; } a.cloud6 { font-size: 200%; } a.cloud7 { font-size: 220%; } a.cloud8 { font-size: 240%; } a.cloud9 { font-size: 260%; }