今さらながらMT3.3のタグクラウド機能を導入してみた。
というのも、はてなブックマークを始めてみて、あらためてタグの便利さに気がついたから。
って、我ながら遅いよなあ、反応が。
とゆーわけで、さっそく導入してみた。
タグクラウドの導入自体は難しいことなどない。
ただね、困ったのは結果表示。
通常のタグクラウドでは、mt-search.cgiを使用してタグをクリックした結果を返す。
でまあ、コイツが重たいわけですよ、周知の通り。
せっかくサイト内 検索にAjaxを使った超高速検索システムを導入したのに、タグクラウドでまたもやmt-search.cgiのお世話になってしまうとは。ク リックの度に画面遷移が発生するし、これはかなりのストレスになる。
そこで、何とかしてAjaxでタグクラウドの結果表示ができないかと頑張ってみた。
いやまあ、実のところ頑張ったというほど難しくもなかったんですがね。
参考までに、そのハック方法を記載しておきます。
なお、AjaxによるMT用超高速検索システムそのものの導入については
今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！
を参照されたい。
1．検索対象用 データ作成のためのテンプレートを修正
各エントリーごとに設定されたタグの名前を取得して、カンマ区切りで並べたテキストとして取り込む。
<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"
,tag:"<MTEntryTags glue=", "><$MTTagName encode_js="1"$></MTEntryTags>"
},</MTEntries>
{title:"",link:"",body:"",tag:""}
]
}
2．blog_ajax_json_search.jsの修正 まずは113行目あたり。
タグ情報に関する要素を追加する。
var is_match = true;
for ( var j= 0; j<key.length; j++ ) {
var res_body = key[j].exec( entries[i].body );
var res_title = key[j].exec( entries[i].title );
var res_tag = key[j].exec( entries[i].tag );
if ( !res_body && !res_title&&!res_tag) {
is_match = false;
}
次は148行目あたり。
検索結果の表示をカスタマイズ。
ハイライトの色を本文中のキーワードと変えるため、highlighttag関数を使う。
for ( var i= 0; i<result_data.length; i++ ) {
html += '<li><a href="' + result_data[i].link + '#search_word=' + search_keyword + '" style="font-size:normal">' + highlight( result_data[i].title, keywords ) + '</a><br />' + highlight( trunc( result_data[i].body, keywords[0] ), keywords )+ '<br />【このエントリーのタグ】' + highlighttag( trunc( result_data[i].tag, keywords[0] ), keywords )+ '</li><br />';
}
でもって、最後。
highlighttag関数を作成。中身はhighlight関数と一緒で、色指定を変えるだけ。
functionhighlighttag( text, keywords ) {
var keyword = '';
for ( var i= 0; i<keywords.length; i++ ) {
if ( i == keywords.length - 1 ) {
keyword += keywords[i];
} else {
keyword += keywords[i] + '|';
}
}
return text.replace( new RegExp( '(' + keyword + ')', "ig"), '<span style="background-color: plum;">' + "$1" + '</span>' );
}
3．タグクラウド に検索用のスクリプトを埋め込む スクリプトの埋め込み自体は、標準的な設定方法と変わらない。
ポイントは
<a href="#" onclick="javascript:blogAjaxJsonSearch( 'http://www.hogehoge/search_data.txt', '<$MTTagName$>' );"><$MTTagName$></a>の部分。
リンク先は＃、すなわちリンクの形態を取りながらリンク動作は無効にして、かわりにここでスクリプトを実行させる。引数にタグ名を指定するように。
<!--タグクラウド：ここから-->
<!--blog_ajax_json_search.js start-->
<script type="text/javascript" src="http://www.hogehoge/prototype.js"></script>
<script type="text/javascript" src="http://www.hogehoge/blog_ajax_json_search.js"></script>
<div class="tag-header">
タグ
</div>
<div class="module-tagcloud module">
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>">
<a href="#" onclick="javascript:blogAjaxJsonSearch( 'http://www.hogehoge/search_data.txt', '<$MTTagName$>' );"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
</div>
<!--blog_ajax_json_search.js end-->
<!--タグクラウド：ここまで-->
以上、だいたいこんな感じでAjaxによるタグ検索が行える。
本文中のキーワードも一緒に表示されるが、それはご愛敬というか、個人的には両方出てきてくれた方がありがたいのでOKとする。
それにしても、
暴想さんのこのAjaxは素晴らしい。
いくらでも応用が利くし、MovableTypeがどんどん便利で楽しくなっていくのだから。
