HOME 　»　ajax , blog , css , html , JavaScript , MovableType , tips , tutorials 　»　超高速で超便利なAjax で全文検索するJavaScript

超高速で超便利なAjax で全文検索するJavaScript

珍しくこの手の話題が続いていて、ちょっとどうなのかなぁと思わなくもないのですが、あまりの快適さに感動したのでご紹介をば。

今朝からサイトの検索ツールを入れ替えてみました。
一番上にある検索窓がおいてあるのですが、試しに遊んでみてくださいな。
検索速度が従来のものよりも速く、精度も高く、設置も簡単。
しかもそのまま別の単語を入力して検索すると、タイムラグがほとんど0で検索できるという優れものです。

■TB to ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript by 暴想

このJava Scriptは、元々ココログユーザの管理人さんが作られたものなのですが、ココログはTypePadがベースで動いているので、Movable Typeを使っている私も恩恵に預かれるという、誠に有り難い、棚からぼた餅式になっております。

以下、Movable Type 3.2 での設置方法を、と言ってもココログとほとんど変わりませんが。

1. 「メインメニュー＞ブログ名＞テンプレート」の「テンプレートを新規作成」をクリック。
   「テンプレートを編集」の画面を出す。
2. 以下のように設定する。
   　■テンプレート名：任意(「search_data」ってな感じがわかりやすいのでしょうか)
   　■出力ファイル名：search_data.txt
   　■再構築オプション：チェックを入れておく（一応。）
   　■テンプレートの内容

   <?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": ""}
   ]
   }

   入力が終わったらこのテンプレートの保存・再構築をする。

3. 検索窓を設置したい場所に以下のHTMLを貼り付ける。
   index ファイルと同じ場所に search_data.txt がある場合は、このソースをそのまま貼り付ければ動くと思います。
   別の場所にある場合はパス(オレンジ色の部分)を適当に書き替えてください。

   <script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/prototype.js"></script>
   <script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/blog_ajax_json_search.js"></script>
   <form action="javascript:blogAjaxJsonSearch( '/search_data.txt', document.getElementById('search_box').value );"><input type="search" id="search_box" value=""><input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '/search_data.txt', document.getElementById('search_box').value );" value="検索"></form>

4. 検索データは各テンプレートの『<div class=”content”></div>』で囲まれている部分に出力されるので、検索結果を表示させたい場所の外側にdivタグを追加記入する。
   私の場合、トップページの場合はこんな感じに囲ってます。

   <div class="content">
   　<div class="○○">「エントリタイトル」</div><div class="△△">「日付」</div>
   　<div class="●●">「本文」</div>
   　<div class="▽▽">「続きを読む」など</div>
   </div>

   要は検索結果画面で消しておきたい要素をぐるっと囲んであげる、と言う事らしいです。

5. 検索窓が設置されているページに追記し終わったら（私の場合はトップ、カテゴリ、月別、個別、各種メニューページ、404エラーファイル）再構築をかける

作業はこれだけ。
新しいテンプレ作って、検索窓入れ替えて、タグをちょいと書き足してあげるだけなので、誰でも出来るのではないかと思います。

私的にすごくうれしかったのは、あのリニューアルするたびにうっかり忘れがちな、検索画面用テンプレートの書き替えが必要なくなるところです。
本体のタグやらcssの設定をいじるたびに、デザイン崩れを起こしていた事にしばらく気付かない、という事がよくあったので、私みたいなうっかりさんにはすごくすごくこの検索ツールはおすすめだと思うのです。
もっとも、素早い検索が出来るってだけでも十分魅力的なんですけど。

ちなみに私のサイトは元々 UTF-8 だったのであっさり導入出来ましたが、Shift-JIS 等のサイトだと文字化けしてしまうようです。サイトをUTF-8 に移行すれば特に問題ないのでしょうが、ちょっとめんどくさいかも・・・。
本体を新規インストールすればいいだけの話しなんですけどね。

ちなみにSBでもこのツールを導入する事は可能らしいです。
（参考：マイナーアップデート by BLOGGEST）
『サーバ側で cron と sed を使って生成処理』するといけるらしいですが・・・。
私には何の事やらさっぱりorz

最後に感想を兼ねて、作者様へずうずうしくもお願いを書き出してみます。

• 説明文に「リロードすると元の画面に戻ります。」と書いてあるとわかりやすくて、もっとユーザーさんに使いやすくなると思います。
• 検索結果は1件ごとにもう少しpaddingがある方が見やすくなると思います。
• 上の点を簡単にアレンジする方法などあれば、是非教えてください。

Related Posts

• （ようやく）エントリの前後記事を読みやすくしました
• ロリポからさくらへの移転記録
• プルダウン式メニューバーになりました
• コメント欄の幅を変える・日付表示を自由に変える
• コメントプレビュー機能とコメントスパム対策

• Tags : ajax , blog , css , html , JavaScript , MovableType , tips , tutorials　|　TrackBack URL
• Prev : Firefox初心者が入れてみた拡張機能のメモ　|　Next : ママは大変なわけだ