Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

タグ検索をAjaxで表示する

Dec012006
Vote:
http://bizcaz.com/archives/2006/12/01-104554.php
Categories: Customize
Tags: Ajax
Social Bookmark

Prev Page: MovableTypeのコメント、トラックバック一覧をAjax化
Next Page: ブログを上手に運用する４

前々から各エントリに表示しているタグやタグクラウドからタグ検索したとき、ページ移動するのがすっごく嫌で気になってました。
そんな理由から、以前にTagCloud(タグクラウド)をもっと便利に…というカスタマイズもやりました。

でも、今回はAjaxを利用してもっとカッコよくタグ検索結果を表示させてみたので、そのカスタマイズをご紹介します。

ここで紹介するカスタマイズは、MovableType(ムーバブルタイプ)の標準タグ機能ではなく、こちらのTag Cloudのページを作ってみるで紹介している、tagwireプラグインによるタグ機能を前提としたカスタマイズです。

とりあえずサンプルでどんなかんじなのか見てみてください。
わたしのサイトのタグクラウドのページなどに対応させています。

各タグをクリックしてみてください。
ページ移動なく検索結果が表示されます。

ajaxcontents.jsのカンタンな説明

先日、こちらのMovableTypeのコメント、トラックバック一覧をAjax化を紹介しましたが、使い方はいっしょです。
AjaxでIFRAME的な表示をやってみるで紹介したajaxcontents.jsというスクリプトを利用します。

ただし、タグ検索にはパラメータが伴うので、今回はパラメータが伴う方法になります。

以下にajaxcontents.jsの内容を記します。

ajaxcontents.js

var outputDivId = 'content_posted';
var outputProgress = 'progress';
function ajax_content_onload_get(url, pars, divId, divProgress)
{
outputDivId = divId;
outputProgress = divProgress;
document.getElementById(outputDivId).innerHTML = '';
document.getElementById(outputProgress).style.display = '';
var myAjax = new Ajax.Request(url, {
method: 'get',
parameters: pars,
onComplete: ajax_content_complete
});
return false;
}
function ajax_content_complete(RequestText)
{
document.getElementById(outputProgress).style.display = 'none';
document.getElementById(outputDivId).innerHTML = RequestText.responseText;
}
function ajax_content_clear()
{
// 表示してるデータをクリア
document.getElementById(outputDivId).innerHTML = '';
}

青い字の部分には、Ajaxで実行したいスクリプトのURLになります。
そして、赤い字の部分が今回使用する、mt-xsearch.cgiへのパラメータを指定してあげています。

緑の字の部分では、検索結果をクリアするための関数になります。

タグクラウドのページ<head>～</head>の間にprototype.jsとのペアで追加することで使用可能です。

ajaxcontents.jsの読み込み

<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/ajaxcontents.js"></script>

青い字の部分を各自の環境に合わせて変更します。

カスタマイズ

まず、ajaxcontents.jsをアップロードします。
こちらのAjaxでIFRAME的な表示をやってみるからajaxcontents.jsを入手して、各自の環境に合わせてアップロードしてください。
次に、タグクラウドの表示する箇所を変更します。
以下はAjax化前のタグクラウドの表示部です。
変更前のタグクラウド
1. <ul id="tags">
2. <MTTags>
3. <li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>">
4. <a href="<$MTCGIPath$>mt-xsearch.cgi?blog_id=<$MTBlogID$>&delimiter=,&search_key=Tagwire&search=<$MTTag encode_url="1"$>"><$MTTag$></a></li>
5. </MTTags>
6. </ul>
そして、以下がAjax化したタグクラウドの表示部になります。
変更後のタグクラウド
1. <ul id="tags">
2. <MTTags>
3. <li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>">
4. <a href="javascript:void(0)" onclick="ajax_content_onload_get('<$MTCGIPath$>mt-xsearch.cgi',
5. 'blog_id=<$MTBlogID$>&delimiter=,&search_key=Tagwire&search=<$MTTag encode_url="1"$>',
6. 'ajax_tagsearch','tagsearch_progress')"><$MTTag$></a></li>
7. </MTTags>
8. </ul>
青い字の部分をAjax化しました。
緑の字の部分では、実行するスクリプト(mt-xsearch.cgiへのパス)と、そのパラメータを指定しています。

赤い字の部分でタグ検索の結果表示するタグIDと、Ajax LoaderイメージのタグIDを指定しています。
最後に、タグ検索結果を表示したい場所に以下を追加します。
タグ検索結果
1. <img id="tagsearch_progress" style="margin:1em auto;display:none;" src="<$MTBlogURL$>ajax-loader.gif" alt="Loading..." />
2. <div id="ajax_tagsearch"></div>
青い字の部分を各自の環境に合わせて変更します。
また、Ajax Loaderイメージの作成はこちらのAjaxload - Ajax loading gif generatorから作成できます。

一通り変更したら保存して再構築します。

XSearch Tagwireテンプレート・モジュールの変更

tagwireプラグインを使ってる人は、同時にmt-xsearchプラグインも使用されていると思います。
そのときに作成したXSearch Tagwireテンプレート・モジュールを変更します。

以下にわたしが使っているXSearch Tagwireテンプレート・モジュールを記します。

XSearch Tagwireテンプレート・モジュール

<MTSearchResults>
<MTSearchHeader>
<div class="module-tagsearch module">
<$MTSetVar name="tag-search" value="Tag Search Result"$>
<div class="module-header"><a href="javascript:void(0);"><$MTGetVar name="tag-search"$></a></div>
<ul>
</MTSearchHeader>
<li><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></li>
<MTSearchFooter></ul></div></MTSearchFooter>
</MTSearchResults>
<MTNoSearch><p>No search performed.</p></MTNoSearch>
<MTNoSearchResults><p>Nothing found.</p></MTNoSearchResults>
<p><a style="font-weight:bold;" href="javascript:void(0)" onclick="ajax_content_clear()" rel="nofollow">CLOSE</a></p>

青い字の部分で、タグ検索結果のクリアを追加しています。
変更したら、保存して再構築して表示確認してみてください。

わたしはタグ検索としてMovableType(ムーバブルタイプ)の標準タグ機能を使っていないので、TagwireプラグインによるタグクラウドをAjax化してみましたが、MovableType(ムーバブルタイプ)標準のタグ機能を使用したタグクラウドでも同じ要領で同様のことができると思います (￣∇￣)b

では、SEE YOU♪

Edit
Permalink
6 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(6)

#1: Posted by panser @ December 2, 2006 [REPLY]: いつもお世話になっています。この記事で少しわからない箇所とカスタマイズしていく中で不具合があります。
まず、不具合はタグが表示しません。記事頭にあるコードをスクリプト「ajaxcontent.js」の末尾に追加しました。tagcloud.html及びXSearch Tagwireを記事内容通り修正しました。
また、検索結果のコードは新しいモジュールで内容をコピー＆ペーストしました。（Widgetの管理を利用している為）
また、少しわからない点はAjaxload - Ajax loading gif generatorの指定の画像を表示させれるには具体的にどのようにコードを修正すればいいのでしょうか？　お手数ですがサポート宜しくお願いします。

#2: Posted by bzbell @ December 3, 2006 [REPLY]

>>1 panser さん

こんにちわ^^

> 記事頭にあるコードをスクリプト「ajaxcontent.js」の末尾に追加しました。

それは丸ごとコピったということでしょうか。
onloadedという関数は元々ありますので、赤い部分だけを追加します。
また、ajaxcontent.jsのパスはあってますでしょうか。
上記例だと、メイン・インデックスと同じ場所にあることが前提となっています。
記事にもあるように、そこら辺は各自の環境に合わせる必要があります。

> 少しわからない点はAjaxload - Ajax loading gif generatorの指定の画像を表示させれるには具体的にどのようにコードを修正すればいいのでしょうか？

はは（;￣∇￣A
記事にもあるように、赤い字の部分にローダー表示するよう変更しています。また、テンプレート中に追加したタグに、imageローダー表示用のタグも埋め込んでいます。
そのままコピペしたのであれば、ローダーのイメージのパスを各自の環境に合わせて変更してください。

では。

#3: Posted by panser @ December 4, 2006 [REPLY]: ありがとうございます！
記事内の<MTTagwireTags>は、元々配布されている変更前のコードにもありませんけど・・・・
まず、tagcloud.html部分の修正箇所で、<MTTagwireTags>についてわかりません。
このタグを追加すると、タグクラウドが表示されません。
ajaxcontent.jsに関しては、元のコードにfunction setdata2を丸々追加して後は、変更部分だけを追加しました。　それと、修正箇所の赤字の表示がされてないようなのですが・・・
お手数ですがアドバイス宜しくお願いします。

#4: Posted by bzbell @ December 4, 2006 [REPLY]