MovableTypeの標準機能のmt-search.cgiによる検索がめちゃくちゃ遅いので、他の検索方法がないか探してみました。
結構、この話題は多いみたいで、すぐに見つけることができました。予め書き出された検索用のjsonのテキストファイルをAJAXで検索して表示するというもので、めちゃくちゃレスポンスがいいです。
設置方法
- 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" 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>の部分に検索結果が表示されます。
設置例
↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）
↑↑検索結果がここに表示されます。↑↑
検索がびっくりするほど速いです。これを作った暴想さんに感謝です。
参考ページ
jQueryで動くflexibleSearch.jsというものあった
prototypeを使うblog_ajax_json_search.jsよりも、jQueryで動くflexibleSearch.jsの方が使いやすそうです。また今度試してみようと思います。