Tagwire+mt-xsearchでTag Cloudを作成する｜Materializing [マテリアライジング]

色んなサイトで見掛けるようになった、タグ(キーワード)を羅列させて表示させているものをMTで利用するカスタマイズです。サイト内で人気のキーワードが判ったり、あるキーワードを元に辿り着いたビジターに対して、ピンポイントで記事内容を提供出来る意味でも有用ではないでしょうか。
ただし、これを行う際には「サイト内のキーワードをきちんと選定する」事が大事になります。

必要プラグインを入手する

tagwire プラグイン：Tagwire Plugin.ja JP - Ogawa Code
mt-xsearch プラグイン：Download mt-plus | Appnel Internet Solutions

アップする前の準備

●mt-xsearch プラグイン
mt-xsearchプラグインとmt-xsearch CGIスクリプトを日本語対応にする。

mt-xsearch.pl を以下のように修正。66行目

修正前
my $current = $offset / $limit + 1;

修正後
my $current = $limit ? ($offset / $limit + 1) : 1;

mt-xsearch.cgi を以下のように修正。27行目

修正前
my $mt = MT-&gt;new( Config =&gt; $MT_DIR . 'mt.cfg', Directory =&gt; $MT_DIR )

修正後
my $mt = MT-&gt;new( Config =&gt; $MT_DIR . 'mt-config.cgi', Directory =&gt; $MT_DIR )

44行目

修正前
print $q-&gt;header.$out;

修正後
my $charset = $mt-&gt;{cfg}-&gt;PublishCharset;
print $q-&gt;header(-charset=&gt;$charset).$out;

※サーバーによっては、1行目のperlパスを「#!/usr/bin/perl」に書き換える必要があります。私の使ってるXREAでは要改変でした。500Errorが出る際には試してみて下さい。

プラグインのアップロード

●tagwire プラグイン
MTルートディレクトリ/plugins に tagwire.pl をアップする

●mt-xsearch プラグイン
mt-xsearch.cgi ・・・ mt.cgi と同じ場所
mt-xsearch.pl ・・・ MTルートディレクトリ/plugins の中
XSearch.pm ・・・ MTルートディレクトリ/extlib の中に MT ディレクトリを作成してその中に。

＜＜設置例＞＞
mt-xsearch.cgi (要実行権限)
plugins/mt-xsearch.pl
extlib/MT/XSearch.pm

Tag Cloud表示用の作成

テンプレート→インデックスタブ→テンプレートを新規作成

テンプレートの名前：Tags
出力ファイル名：tags.html　(tags.php)
このテンプレートにリンクするファイル：空白
再構築オプション：チェックする
テンプレートの中身：下記をコピー・ペースト

<style type="text/css">
ul#tags { border: 1px solid #CCC; padding: 10px; margin: 10px; display: none; }
#tags li { display: inline; }
#tags li a { border-width: 0; color: #000; }
#tags li.hot a { color: #00F; }
#tags li.old a { color: #777; }
#tags li.oldest a { color: #CCC; }
#tags li a:active, #tags li a:hover { color: #6C3; }
.coffButton { color: #000; background: #fff; border: 1px solid #ccc;
  padding: 2px; cursor: pointer; }
a.coffButton:hover { color: #000; background: #ccc; }
#coff { font-weight: bold; padding: 2px; }
</style>
<p>
Cutoff Parameter:
<a onclick="decCoff(5)" class="coffButton">-5</a>
<a onclick="decCoff(1)" class="coffButton">-1</a>
<a onclick="incCoff(1)" class="coffButton">+1</a>
<a onclick="incCoff(5)" class="coffButton">+5</a>
<span id="coff">0</span>
</p>

<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&search_key=Tagwire&search=<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

<script type="text/javascript">
function calcFontSize(count) {
	return count / 6 + 12;
}
var tags = new Array();
var now = (new Date()).getTime();
var tagsNode = document.getElementById('tags');
var childNodes = tagsNode.childNodes;
for (var i = 0; i < childNodes.length; i++) {
  var e = childNodes.item(i);
  if (e.nodeName.match(/li/i)) {
    var s = e.title.split(':');
    e.style.fontSize = calcFontSize(s[1]) + 'px';
    var d = s[2].split('-');
    var diff = (now - (new Date(d[0], d[1] - 1, d[2])).getTime()) / 86400000;
    if (diff < 14) e.className = 'hot';
    else if (diff > 365) e.className = 'oldest';
    else if (diff > 60) e.className = 'old';
    tags.push([ e, s[1] ]);
  }
}
tagsNode.style.display = 'block';
 
var coff = 0;
var coffNode = document.getElementById('coff');
function decCoff(c) {
  if (coff == 0) return;
  coff -= c;
  if (coff < 0) coff = 0;
  coffNode.innerHTML = coff;
  refreshCoff();
}
function incCoff(c) {
  if (coff == 20) return;
  coff += c;
  if (coff > 20) coff = 20;
  coffNode.innerHTML = coff;
  refreshCoff();
}
function refreshCoff() {
  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];
    tag[0].style.visibility = (tag[1] <= coff) ? "hidden" : "visible";
  }
}
</script>

エントリーの編集画面を変更する

この設定により、エントリーにキーワードを設定出来るようになります。

エントリーの編集画面を開く　(新規でも既存でも良い)
画面下方にある「画面の表示設定を変更」をクリック
「カスタム」にチェックを入れ、「キーワード」の項目にチェックを入れる　(他は好みで)
「保存」ボタンを押して閉じる

キーワード(タグ)の設定

エントリー編集画面にて「キーワード」の項目が出ているので、そこにタグとして表示させるキーワードを設定します。

・空白文字が区切り
・空白を含む文字をひとつのタグとして認識させたい場合は、ブラケット([])やシングルクォート(')、ダブルクォート(")で括る

作成したテンプレートにアクセスする

作成した tags.html　(tags.php) にアクセスして動作確認。
埋め込んだキーワードに関するエントリーの一覧が表示されれば完了です。

タグとタグオプション

●MTTags

glue="glue"・・・glueで指定された文字列をタグの間に挿入表示
sort_by="tag|tag-case|count"・・・順序指定。大文字・小文字を区別しないアルファベット順(tag)、大文字・小文字を区別するアルファベット順(tag-case)、出現頻度順(count) デフォルトは大文字・小文字を区別しないアルファベット順(sort_by="tag")
sort_order="ascend|descend"・・・昇順(ascend)、降順(descend)。デフォルトは昇順(ascend)
lastn="N"・・・N個まで表示。デフォルトは全て表示
case_sensitive="0|1"・・・キーワードの大文字・小文字を区別するかどうかを指定。デフォルトは区別する(case_sensitive="1")

コンテナタグ内で利用可能なタグ
<$MTTag$>・・・タグを表示
<$MTTagCount$>・・・タグの出現回数を表示
<$MTTagDate$>・・・タグが最後に追加された日時を表示。MTEntryDateなどと同様にformat, language, utcオプションが使用可能。
<$MTTagsTotal$>・・・全てのタグの個数を表示。MTTagsコンテナの直後でも利用可能
<$MTTagsTotalSum$>・・・全てのタグの出現回数の総和を表示。MTTagsコンテナの直後でも利用可能

以上。

参考記事：
■MovableType備忘録: Tag Cloudのページを作ってみる　[MovableType備忘録]
■小粋空間: Tag Cloud のページを作る　[小粋空間]
■TagwireでTagCloud - Ogawa::Memoranda
■TagwireとMT-XSearchによる動的タグアーカイブ - Ogawa::Memoranda

2006/11/03 17:39:58：記事書き直し
2007/01/31 23:02:04：記事書き直し

Tagwire+mt-xsearchでTag Cloudを作成する｜Materializing [マテリアライジング]