「Tagwire」と「MT-XSearch」で『Tag Cloud』のページを作る

  • 投稿日:
  • by

もうお気づきの方もいるかと思いますが、
ページ上のナビゲーションバー「TAG」というのがあります。

これを開くと、ずら~~っと単語が並んで、
それぞれの文字の大きさもいろいろなものになっています。

これがいわゆる、「Tag Cloud」です。

これは何かというと、このブログでの、いわゆるキーワードを羅列してあり、
出現頻度の回数が多いほど字が大きくなります。

cutoff.gif

mozinoookisa.gif


また、各単語をクリックすると、
そのTAGが使われているエントリーの一覧が表示されます。

↓こんな感じ
list.jpg


では、これの作成方法をば。。。



まず、「Tagwire」をインストールします。

上記から、「Tagwire.zip」をダウンロードし、解凍します。

解凍した「tagwire.pl」MTのPluginsディレクトリにアップロードします。

正しくインストールできていれば、MovableTypeのメインメニューにTagwire Pluginが新規にリストアップされます。


それで、肝心のTAGですが、
これはエントリーの「キーワード」へ入力することになります。

キーワードは、さまざまな表記の仕方があるようですが、
私の場合は、デリミタ(区切り文字)として、「 , 」(カンマ)を使用しています。

それには理由がありますが、それは後述します。


では、それぞれのエントリーでキーワード欄にTAGを入れていきましょう。

↓こんな感じです。

,MovableType, BLOG, エントリー,


それでは、「TAG Cloud」ページを新規テンプレートとして作成します。

私の場合、以下のように作成しました。

<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 target="_blank" href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&delimiter=,&search_key=Tagwire&search=<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

<script type="text/javascript">
function calcFontSize(count) {
return count / 3 + 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>


青文字のように、デリミタは「,」と指定しましょう。


このテンプレートを再構築すれば、「Tag Cloud」ページのできあがりです。

続いて、このTag Cloudページからエントリーリストへジャンプできるように設定します。


それには、「MT-XSearch」をインストールします。

上記ページから、「mt-plus」をダウンロードします。

解凍すると、以下のようなファイルが出てきますので、アップロードします。

mt-xsearch.cgi → (MT)/ mt-xsearch.pl  → (MT)/plugins XSearch.pm → (MT)/extlib/MT/

「mt-xsearch.cgi」には実行権を与えてください。

# chmod 755 mt-xsearch.cgi


次に、日本語対応のために、
「mt-xsearch.cgi」「mt-xsearch.pl」修正を加えます。


mt-xsearch.cgi

$ctx->stash('CGI',$q);
my $out = $tmpl->build($ctx)
or die "Building search template failed: ".$tmpl->errstr;
print $q->header.$out;
my $charset = $mt->{cfg}->PublishCharset;
print $q->header(-charset=>$charset).$out;

};
if ($@) {
print "Content-Type: text/html\n\n";


mt-xsearch.pl

my $pages = $limit ? ($count-($count % $limit)) / $limit : 1;
$pages += ($limit && $count % $limit) ? 1 : 0;
my $offset = $xsearch->args->{offset} || 0;
my $current = $offset / $limit + 1;
my $current = $limit ? ($offset / $limit + 1) : 1;
$ctx->stash('MT::XSearch::current_page',$current);
$ctx->stash('MT::XSearch::pages',$pages);
my $builder = $ctx->stash('builder');

赤文字部分を消し青文字を追加します。


つづいて、新規で以下のようにテンプレートモジュールを作成します。


テンプレート名:「XSearch Tagwire」

<form method="get" action="<$MTCGIPath$>mt-xsearch.cgi" id="form"> <input type="hidden" name="blog_id" value="<$MTBlogID$>" /> <input type="hidden" name="search_key" value="Tagwire" /> <input type="hidden" name="delimiter" value="," /> <label for="search" accesskey="4">Search this site:</label> <input id="search" name="search" size="20" value="<$MTSearchString decode_url="1" encode_html="1"$>" /> <input type="submit" value="Search" /> </form>

<br />

<MTSearchResults>
<MTSearchHeader>
Results found: <strong><$MTSearchResultCount$></strong>
<br />
<br />
<ul>
</MTSearchHeader>
<li><a href="<$MTEntryLink$>"><$MTEntryTitle$></a>.......[ <a href="<MTCGIPath>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID$>&blog_id=1">Edit</a> ]</li>
<MTSearchFooter>
</ul>
<p>Searched on: <span style="font-size: 14px;"><strong><$MTSearchString decode_url="1"$></strong></span></p>
</MTSearchFooter>
</MTSearchResults>
<MTNoSearch><p>No search performed.</p></MTNoSearch>
<MTNoSearchResults><p>Nothing found.</p></MTNoSearchResults>


青文字のように、そのエントリーの編集画面へのリンクも付け加えています。

また、赤文字のように、ここでもデリミタを「,」と指定します。


これでいちを完了です。

私の場合、こちらのページのようになりました。


しかし、、、キーワードが多くなってくると、表示が遅い。。。


ところで、なんでデリミタを「,」にしたのかというと、
metaタグKeywordsで使用したいからです。

以下のようにすれば、
TAGをmetaタグのキーワードとしてページ毎に追加できます。

<meta name="keywords" content="ブログペットリング,MovableType,CSS,スタイルシート,カスタマイズ,自宅サーバ,Apache2,カメラ,サンスベリア,インテグラ,TypeR,パニック障害,うつ病,銀河鉄道999,自律神経失調症,日記,Spamassassin,user_prefs,qmail,fml,ディスカス,映画,音楽,アフィリエイト,ブログ,ウエブログ,小遣い稼ぎ,<$MTEntryKeywords$>" />

といった感じです。


みなさまの参考になれば幸いです(^^;)


このエントリーを書くのに、何日かかったか。。。(^^;)