mt-search.cgiの検索が遅いのでblog_ajax_json_search.jsに乗り換えた。

MovableTypeの標準機能のmt-search.cgiによる検索がめちゃくちゃ遅いので、他の検索方法がないか探してみました。

結構、この話題は多いみたいで、すぐに見つけることができました。予め書き出された検索用のjsonのテキストファイルをAJAXで検索して表示するというもので、めちゃくちゃレスポンスがいいです。

Link

301 Moved Permanently

http://blog.kumacchi.com/2008/07/mtsearchcgi.html

設置方法

prototype.jsを読み込む
blog_ajax_json_search.jsを読み込む
search_data.txtを書き出すインデックステンプレートをMovabletypeに作成
検索窓を設置

1.prototype.jsを読み込む

方法は省きますが、jQuery.jsがあるとコンフリクト（衝突）して動かないので対策が必要です。

私の場合、prototype.jsはCloudFlareのCDNから読み込んでいます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>

Googleがよければこちら。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

2.blog_ajax_json_search.jsを読む

私の場合、ローカルに保存した物を使用せず、外部から読み込んでいます。

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/blog_ajax_json_search.js"></script>

3.search_data.txtを書き出すインデックステンプレートをMovabletypeに作成

<?xml version="1.0" encoding="utf8"?>
{data: [
<MTEntries lastn="3000">
{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"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}

<MTEntries lastn="3000">の部分は対象の投稿の上限を指定しています。全投稿を対象にする場合、<MTEntries all="1">でもOKです。

コメントも検索対象に含めたい場合は以下となります。

<?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"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

4.検索窓を設置

/blog/search_data.txtの部分は環境によって階層が違うので、ご自分の環境に合わせてインデックステンプレートから書き出されたsearch_data.txtがある場所のパスに書き換えてください。

<form action="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );">
<input id="search_box" size="30" type="search" />
<input id="search_button" onclick="javascript:blogAjaxJsonSearch( 
'/blog/search_data.txt', document.getElementById('search_box').value );" value="サイト内検索" type="button" />
</form>
<div class="content"></div>

<div class="content"></div>の部分に検索結果が表示されます。