MT 向け Ajax サイト内検索

Entry Information

yoshi
October 19, 2007 - 01:10.
blog

以前から暴想さんで公開されている Ajax を使用した Blog 向けサイト内検索を社内的なサイトで使わせて頂いたのでお礼を兼ねて紹介。実際にベースにしたのは暴想さんのスクリプトを元に Movable Type 向けにカスタマイズされた Dakiny さんバージョン。

そいつをさらにカスタマイズさせてもらって使用しましたが、そのバージョンを折角ですので公開してみようと思います。

今回使わせていただいた blog_ajax_json_search.js は、エントリーのタイトルや本文、コメント（コメントも検索対象にしたは風柳亭さんによるカスタマイズ）を全部 JSON で書き出しておいて、そいつを JavaScript で検索する仕組みなので、とにかく検索が早い。かなり便利なスクリプトです。もちろんそのままでも十分使えるのですが、個人的に気になった点とかをカスタマイズしています。

とりあえず、必要なファイル一式は下記においてあります。

blog_ajax_json_search.zip

当サイトのエントリーデータを使用したサンプルが下記で試せます。

Ajax サイト内検索サンプル

それでは解説を。

ダウンロードしたファイルを解凍すると、下記のようなファイルが含まれています。

Ajax_search_form.txt
head_js.txt
search_data.txt
index.html
js/
- blog_ajax_json_search.js
- prototype.js
css/
- sample.css
img/
- icon_arrow.gif
- loader.gif

まずはフォルダからですが、js、img の両フォルダは、そのままアップロードしてください。ドメイン直下に置かれることを想定していますので、パスが変わる場合は、何ヶ所か変更しなければならない場所が出てきますのでご注意を。

ちなみに、blog_ajax_json_search.js の文字コードが「utf-8」なので、Blog の文字コードがそれ以外の場合は、一度文字コードを変更して保存しなおしてください。

それから、css フォルダ内のスタイルシートは、今回のサンプルで使用しているスタイルなので、参考までに。動作に関係はありません。

次にファイルです。index.html はサンプルの XHTML ソースなので、これも参考まで。重要なのは下記です。

Ajax_search_form.txt
head_js.txt
search_data.txt

Ajax_search_form.txt は検索フォーム周りのソース。MT テンプレートタグが仕込んでありますので、そのままお使いのテンプレートに入れ込んで再構築してもらえれば大丈夫かと。

head_js.txt は JavaScript ファイルをヘッダで読み込むための記述。これも MT エントリータグが入っていますので、お使いのテンプレートの <head> ～ </head> 内にコピペしてもらえれば OK。

search_data.txt は検索用のデータを書き出すテンプレートのソースです。これで書き出されたデータが検索の具ってことになります。

MT 上で新規インデックステンプレートの作成に進み、このソースをコピペ。出力ファイル名に「search_data.txt」を指定して保存、再構築してください。それから再構築の設定は、インデックス・テンプレートの再構築時に、このテンプレートも自動的に再構築されるようにしておいてください。

今回は Blog の URI 直下にこのファイルが書き出されていることを想定しています。ちなみにテンプレート内の <MTEntries lastn="0"> って記述は間違いじゃなく、lastn="0" にしておくと全エントリーが書き出されるからです。

最後に、お使いのテンプレート内で、検索結果を表示したい部分に

<div class="result"></div>

という記述を追加してください。div 要素内は空でも、既存のソースを囲む形でも大丈夫。検索結果表示の際にはこれで囲まれた部分が結果表示と置き換わります。

これで、動作すると思います。うまく動かない場合はファイルのパスとか調べてみてください。

最後に私が変更した点を下記にまとめておきます。

blog_ajax_json_search.js 内の変更点

検索中の表示をちょこっと改良して、ロード中画像が出るようにした。
検索キーワードが未入力の場合はエラーを返すように変更。（オリジナルは全エントリーを返しますが、エントリー数が多い場合にかなり重たいので）
検索キーワード、ハイライト部分のマークアップを <span class="keywords"> ～ </span> に変更。（オリジナルはstyle 属性による直指定）
検索結果の出力ソースをごっそり変更。（出力されるソースは後述）
検索フォームの小細工（初期テキストがフォーカスで消えるやつ）用のソースをお尻に追加。

合わせてフォーム部分のソースもかなりいじってますので、ベースにさせていただいたソースとは違っています。

で、検索結果で出力されているソースが下記。スタイル当てる際の参考にどうぞ。

<div class="section">
 <h2>「検索キーワード」の検索結果（○ 件）</h2>
 <dl>
  <dt>
   <a href="エントリーURI" title="エントリータイトル">エントリータイトル</a>
  </dt>
  <dd>本文、追記、コメントから検索キーワードに該当した部分</dd>
 </dl>
</div>
<p class="search_back">
 <a href="javascript:void(0);" title="元のページに戻る" onclick="location.reload(true); return false;" onkeypress="location.reload(true); return false;">元のページに戻る</a>
</p>

検索結果が 0件だったときは下記のソース。

<div class="section">
 <h2>「検索キーワード」の検索結果（0 件）</h2>
 <p>該当するエントリーはありませんでした。</p>
</div>
<p class="search_back">
 <a href="javascript:void(0);" title="元のページに戻る" onclick="location.reload(true); return false;" onkeypress="location.reload(true); return false;">元のページに戻る</a>
</p>

キーワードが入力されていない場合は下記。

<div class="section">
 <h2>検索キーワード未入力</h2>
 <p>検索キーワードが入力されていません。キーワードを指定してください。</p>
</div>
<p class="search_back">
 <a href="javascript:void(0);" title="元のページに戻る" onclick="location.reload(true); return false;" onkeypress="location.reload(true); return false;">元のページに戻る</a>
</p>

ちなみに、スクリプトのライセンスがスクリプトファイル内の頭に記述されていますので、再配布やらする方は必ず確認してください。

Add to Bookmarks