"Ajaxを利用したMT用超高速検索システム"をハックして、タグクラウドの結果表示に応用する

今さらながら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:"<$MTTagName encode_js="1"$>"
},</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 )+ '
【このエントリーのタグ】' + 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>

の部分。

リンク先は＃、すなわちリンクの形態を取りながらリンク動作は無効にして、かわりにここでスクリプトを実行させます。引数にタグ名を指定するように。

<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>

以上、だいたいこんな感じでAjaxによるタグ検索が行えます。
本文中のキーワードも一緒に表示されるが、それはご愛敬というか、個人的には両方出てきてくれた方がありがたいのでOKとしましょう。

それにしても、暴想さんのこのAjaxは素晴らしい。
いくらでも応用が利くし、MovableTypeがどんどん便利で楽しくなっていくのだから。

"Ajaxを利用したMT用超高速検索システム"をハックして、タグクラウドの結果表示に応用する

サイト内検索

月別アーカイブ

最近の記事