タグクラウドについてお勉強中

dev php

お仕事でタグクラウドを実装してみようみたいな話が挙がっておりまして。

ちょっと NDA とか絡むので詳しくは書けないけど、だいたい以下のような感じで実装してみた。

  1. あるタグに関連するタグを任意の方法で抽出する。
    • この際に、それぞれのタグについてタグの重みを計算するための属性を保持させる
  2. 抽出したタグの中で重み属性が最大なもの (max) と最小なもの (min) を取得する
  3. 最大・最小の平方根 (max_sqrt, min_sqrt) を求める
  4. 係数を算出するために、タグの段階数 (n) を最大な平方根 (max_sqrt) と最小な平方根 (min_sqrt) の差で割る
  5. 最後に、抽出したタグ達の重み属性の平方根 (any_sqrt) と最小な平方根 (min_sqrt) の差に係数を掛ける

と、まぁこんな感じなんだけど、文字じゃ分かり辛いと思うので PHP 的な式に変換してみる。

<?php
/*
 * ・$tags は予め取得されているモノとする
 * ・$tags は下記のような構造を想定する
 *   $tags = array(
 *    'tag' => array(
 *     "タグ1",
 *     "タグ2",
 *     "タグ3",
 *     ...
 *    ),
 *    'number' => array(
 *     10,
 *     5,
 *     2,
 *     ...
 *    )
 *    'level' => array(
 *     0,
 *     0,
 *     0,
 *     ...
 *    )
 *   );
 *   ※ level は計算で求めるため、初期値は 0 としておく
 * ・係数算出のための段階数は 5 段階とする
 * ・数値が 0 だったら？とかはとりあえず無視する
 */
$max = max($tags['number']);
$min = min($tags['number']);
$max_sqrt = sqrt($max);
$min_sqrt = sqrt($min);
$coefficient = 5 / ($max_sqrt - $min_sqrt);
foreach ($tags['number'] as $index => $number) {
    $any_sqrt = sqrt($number);
    $level = ($any_sqrt - $min_sqrt) * $coefficient;
    $tags['level'][$index] = $level;
}
?>

まぁ、だいたいこんな感じかな？ (試してないから分からんけど)

あとは以下のような CSS でも定義してあげて、HTML を出力してあげれば良いんじゃないかな？

div.tag-cloud span.level-0 {
    font-size: 1em;
}

div.tag-cloud span.level-1 {
    font-size: 1.2em;
}

div.tag-cloud span.level-2 {
    font-size: 1.5em;
}

div.tag-cloud span.level-3 {
    font-size: 2em;
}

div.tag-cloud span.level-4 {
    font-size: 2.5em;
}

div.tag-cloud span.level-5 {
    font-size: 3em;
}

<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"; // ショートタグ対策 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Tag Cloud</title>
    <link rel="stylesheet" href="/css/tag-cloud.css" type="text/css" media="all" />
  </head>
  <body>
    <div class="tag-cloud">
<?php
foreach ($tags['tag'] as $index => $tag) {
?>
      <span class="level-<?= $tags['level'][$index]; ?>">
        <?= $tag; ?>
      </span>
<?php
}http://d.hatena.ne.jp/images/admin/markup_url.gif
?>
    </div>
  <body>
</html>

まぁ、サンプルなんで細かいところは気にしない。

だいたいこんな感じ、ってことで。

詳しくは kjirou さんのブログの "http://kjirou.sakura.ne.jp/mt/2007/09/post_57.html" を参照のこと。