MovableTypeの検索システムを見直す

1．ダウンロード

Dakiny氏のサイトから（参照先のページ）からblog_ajax_json_search.zipをダウンロードして解凍。 MT3.3用に修正してあるようなので、元記事よりもこちらからダウンロードすることを推奨します。

2．MovableTypeのテンプレート変更

各テンプレートの検索結果を表示したい箇所を<div class="result"></div>で囲みます。 メインページのみ検索フォームを設置する場合はメインページのみに、複数のテンプレートに検索フォームを設置する場合は設置するテンプレートごとに変更が必要です。

メインコンテンツエリアを囲んでいるclassがあればそれを使っても結構です。
その場合は、3工程でスクリプトの修正が必要。

私の場合<div class="main"></div>なんですが、それを使うと角丸画像を使っている関係で表示が崩れるので、<div class="main">と角丸画像のすぐ内側に<div class="result">を追加。

当然、class="mainの閉じタグのすぐ内側に</div>を追加。

3．blog_ajax_json_search.txtの修正

65行目

if ( div_tag[i].className == 'result' ) { // Pached by Dificlo

先程の工程で任意のクラス名を使う人はresultを結果表示用領域のクラス名に変更する。

188行目

return text.replace( new RegExp( '(' + keyword + ')', "ig"), '<span style="background-color:#FFCC33;">' + "$1" + '</span>' );

#FFCC33を任意の色に変更する。 これは検索結果を表示するときに検索ワードの背景色として使う色です。特に変えなくてもオッケー。

修正を保存して、blog_ajax_json_search.jsとリネームしてアップロードします。
アップロード先はルートが推奨されていますが、私はテンプレートに関るファイルはできるだけstyleというディレクトリにまとめて置いておくようにしているので、styleディレクトリにアップロードして6工程で修正を行ないます。

4．prototype.txtのアップロード

prototype.jsとリネームしてblog_ajax_json_search.jsと同じ場所にアップロードします。

5．検索対象用のデータを作成する為のテンプレート作成

インデックス･テンプレートを新規作成して、解凍したファイルのsearch_data.txtの内容を「テンプレートの内容」に貼り付けます。

出力ファイル名はsearch_data.txtにして、テンプレート名は任意です。
私は検索用データとしてあります。

再構築オプションのチェックは入れたままにしておいてください。

6．検索用フォームを作成する

解凍したファイルにあるAjax_search_form.txtのソースを既存の検索フォームと差し替えます。 検索フォームをモジュール（部品）化していない人は、各テンプレートの検索フォーム部分を設置するテンプレートの数だけ直接書き換えることになります。

私の場合は検索フォームをモジュール（部品）化してPHPで読み込むようにしてありますので、1箇所変更すればオッケーです。

ここで、3工程と4工程でスクリプトのアップロード先を変更したので、修正を行ないます。（ルートにアップロードした人は修正は不要です）

<!--blog_ajax_json_search.js start--> <h2>Search</h2> <script type="text/javascript" src="<$MTBlogURL$>style/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>style/blog_ajax_json_search.js"></script> <form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',  document.getElementById('search_box').value );"> <p> <input type="text" id="search_box" value="" /> <input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br /> キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br /> Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a> </p> </form> <!--blog_ajax_json_search.js end-->

ここまで完了したら、サイト全体を再構築して完了。

7．スタイルシート

検索結果の冒頭に表示される「※スペースでAND検索が出来ます。※この状態からの２度目の検索は非常に高速です。」はid="search_notice"、検索結果はclass="entry"、ページ下部の戻るリンクはclass="posted"です。

適宜、スタイルシートを追加・修正してください。

8．氣づいた点

表示された検索結果の一番下に[Go Back Page]と[Go Back Index]と表示されて、それぞれもとのページに戻るリンクとトップページに戻るリンクが張られます。

私はこの部分を日本語に変更しました。
変更する部分はblog_ajax_json_search.jsの149行目と155行目。

html += '</ol></div></div><div class="entry-body-bottom"></div><p class="posted" style="text-align:right; font-size: smaller;"><span class="post-footers"></span><span class="separator"></span><span class="bo_so_copyright"><a href="#" title="Go Back Page" onclick="location.reload(true); return false;" onkeypress="location.reload(true); return false;">[Go Back Page]</a><a href="/" title="Go Back Index" >[Go Back Index]</a></span></p></div><div class="entry-bottom"></div><div class="date-footer"></div>';

それぞれ[元のページに戻る][トップページに戻る]に変更しました。
また、ページのトップにも同じリンクがあった方がいいと考えて、149行目の下記の部分を145行目に挿入

<p class="s-posted" style="text-align:right; font-size: smaller;"><span class="post-footers"></span><span class="separator"></span><span class="bo_so_copyright"><a href="#" title="Go Back page" onclick="location.reload(true); return false;" onkeypress="location.reload(true); return false;">[元のページに戻る]</a><a href="/" title="Go Back Index" >[トップページに戻る]</a></span></p>

挿入する場所は145行目の<div class="entry">と<h3>検索結果の間です。

また、[Go Back Index]のリンクですが、ブログのURLが例えばhttp://hoge.com/blog/だったりすると、http://hoge.com/にリンクされてしまうようです。
サイトのURLによってはきちんとトップページにリンクされないかもしれませんので確認が必要です。