Ramdom Entry Pickup
- 2006年 「Amazonアフィリエイト」成果 (2006年12月30日)
- 激速！「Ajax」でのブログ内全文検索 (2006年09月22日)
- 更新Ping・送信先一覧 (随時更新) (2006年10月26日)
- 画像のアップロード先のデフォルトを変更する(MT3.3) (2006年09月10日)
- ガチャピン：カート (2005年04月01日)
« 波ダッシュ、何とかならないのかな？(その1) | メイン | 嫁のブログ・・・・・Σ(ﾟロﾟ*)!!(BlogPet) »
「Tagwire」と「MT-XSearch」で『Tag Cloud』のページを作る
Category : [ Linux, MovableType, インターネット ]
January 27, 2006 11:34
TAG : [Blog,Customize,Entry,Internet,Javascript,MovableType,Plugin,Spamassassin,TAG,Tag Cloud,Tagwire,Template]
Permalink
January 27, 2006 11:34
TAG : [Blog,Customize,Entry,Internet,Javascript,MovableType,Plugin,Spamassassin,TAG,Tag Cloud,Tagwire,Template]
Permalink
もうお気づきの方もいるかと思いますが、
ページ上のナビゲーションバーに「TAG」というのがあります。
これを開くと、ずら～～っと単語が並んで、
それぞれの文字の大きさもいろいろなものになっています。
これがいわゆる、「Tag Cloud」です。
これは何かというと、このブログでの、いわゆるキーワードを羅列してあり、
出現頻度の回数が多いほど字が大きくなります。
また、各単語をクリックすると、
そのTAGが使われているエントリーの一覧が表示されます。
↓こんな感じ
では、これの作成方法をば。。。
まず、「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";
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');
$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$>" />
といった感じです。
みなさまの参考になれば幸いです（＾＾；）
このエントリーを書くのに、何日かかったか。。。（＾＾；）
ソーシャルブックマーク
||
|
|
|
|
|
|
|
|
|
|
|
|
このエントリーと関連性が高いと思われるエントリー
このエントリーに関連するかもしれない商品
おすすめ商品
Link Information
Link HTML:
トラックバックURL:
Trackbacks
» タグづけ from
Imaginary Affair
TagwireとMT-XSearchによる動的タグアーカイブ - Ogawa::... [Read More]
» MT 3.3x Tag Cloudを試してみる from
A T M O S P H E R E
見た目がかっこ良かったので、あんまり意味ないのに（このサイトには）試してみた。 ... [Read More]
