Movable Type 備忘録
ブログ内検索を高速化
- Prev Page: カレンダーの日付のリンク先を日別アーカイブにする
- Next Page: ベーシック・テンプレート
ブログ内検索に、GoogleやYahooなどの検索フォームを設置している人が多いと思います。
最近ではAjax化により見ため的にもいいかんじですよね。
でも、これら検索エンジンなどを利用したブログ内検索だと、少なくとも各検索サイトなどにキャッシュされないとヒットしない…というデメリットがあります。
今回すっごいブログ内検索を見つけてしまいました。
ご存知の人は多いと思いますが、こちらの暴想さんで配布されてるAjaxを利用したブログ内検索です。
ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript
- 2006.11.24 追記 -
オリジナルのblog_ajax_json_search.jsをカスタマイズして、検索結果をクリアできるようにしました。
よろしければ、こちら(blog_ajax_json_search.js)から右クリックでダウンロードして、各自のサーバにアップロードしてお使いください。
- 2006.09.20 追記 -ちょっとこれマジやばいかも Σ( ̄Д ̄;) めちゃ使いやすいです。
コメントも検索対象だし、検索結果の件数が多くても、検索エンジンと同様にキーワードをどんどん絞込んでいけば、目的のエントリ探しやすくてとっても便利です。多少気になるところはありますが、絶対オススメです♪
使ってみればわかると思いますが、ありえないくらい速いです!!
今回はこの超高速なブログ内検索の設置について紹介しますが、ムズかしいことは何にもないので、注意点などカンタン説明します。
カスタマイズ
まず、検索用のテンプレートを作成します。
以下のコードをインデックス・テンプレートで新規作成してください。
その際、出力ファイル名には「search_data.txt」として、index.htmlと同じ場所に作ることをオススメします。インデックス・テンプレートは、MovableType(ムーバブルタイプ)管理画面からブログを選択して、左サイドバーから「テンプレート」をクリックします。
そして、右上にある「テンプレートを新規作成」から作れます。search_data.txt
<?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:""}]}
上記コードは風柳亭 - 別館:書庫のある庵 -さんが、コメントも含めて検索するよう改造したものみたいです。
blog_ajax_json_search.jsにパッチ:コメントも含めて検索保存して再構築したら、index.htmlと同じ場所に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://furyu.tea-nifty.com/script/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="" size="30" /><input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch('/search_data.txt', document.getElementById('search_box').value );" value="サイト内検索"/></form><div class="content"></div>
ポイントは、青い字と赤い字の部分です。
まず、青い字には先ほど作ったsearch_data.txtのパスを指定します。
相対パスでも問題なさそうですが、トップページやアーカイブページなどで、同じパス指定をするなら絶対パスにした方が無難です。赤い字の部分には検索結果が表示されます。
テンプレート内のどこに追加しても構いません。最初に見つかったclass="content"の場所に検索結果が表示されるようです。
この記述がないと検索結果は表示されません。
以上で設置は完了です。
検索してみてください。
検索結果が表示されない人は以下のことをもう一度確認してください。
- search_data.txtは作られていますか。
- search_data.txtが作られた場所と、パス指定した場所はあってますか。
- 相対パス指定した場合、そのパスにsearch_data.txtが置かれてますか。
と、こんなかんじでしょうか。
では、SEE YOU♪
Trackback Pings(3)
- from
K's Labo
MovableTypeの機能のひとつに「検索機能」があります。使われた方、お世話...
- from
K's Labo Rebooted
実は・・・、現在、筋肉痛でございます。 というのも、この3/2の日曜日に、ウチの田んぼで野良仕事をしました。畑をトラクターで耕したのです...
- from
K's Labo 3G
今日は昨日と違い朝から快調。と言うのも、新型「iPod」シリーズの発表に関わるお...




こんにちは、bzbellさん。
とりあえずですけど、EUCのサイトでも動くように(化けないように)してみました。たぶんShiftJISでも同様に解決できると思います。
>>1 oscar さん
こんにちわ^^
oscarさんと話してると割りと文字コードがらみでNGってのを聞きますけど、たとえば、わたしのブログでもEUCにすると同じようなトラブルに見舞われるものなんですか(; ̄- ̄)
ぶっちゃけ、文字コードなんてMTやるまで存在すら知りませんでしたよ。
つか、oscarさん!! EUC対応した割には自分のサイトに設置してないじゃないですかΣ( ̄Д ̄;)ガーン
使ってみてください♪ メチャ検索早いですよ(*´∇`*)♪
多少気になるところあるので、わたしも自分のところにコピペしてカスタマイズしてみようと思います。
私みたいに、MTのインストール時にEUCにしてたりすると、MySQLの中身が全部EUCだから、後で苦労するんですよ。
最近(MT3.3)はデフォでUTF-8になるんで、そんな悲劇もなくなるでしょう。
ちゃんと設置してますから。
見た目が変わらないように、設置しただけです。
後、全部の再構築はやってないので、まだ一部だけしか反映されてないかも。
こんにちわ。
参考にさせていただいています。
このブログなの高速検索なのですが、
実装してみて、検索結果は無事に出せたのですが、
検索を行うときに日本語入力できなくなり、
英数のみでしか検索できません。
これは、どういった不具合がおきているのでしょうか?
>>4 aj_sg さん
こんにちわ^^
> 検索を行うときに日本語入力できなくなり、英数のみでしか検索できません。
えっΣ( ̄Д ̄;)!!
初めて聞く現象ですね。
どちらにしても、フォームに入力する時点ではAjaxは実行されていないので他の要因では…と思われます。
ちなみに、日本語入力できないというのは、検索フォーム( <input>タグ )に限ったことなのでしょうか。
他のフォームではちゃんと日本語入力できますか(; ̄∇ ̄A
お久しぶりのかわぐちです。
これ、いいですね。
設置してみよ~。
>>6 かわぐち さん
ご無沙汰してまぁ~す(●>∀<●)/
はい。是非っ!!
デフォの検索はドンくさくてやってられませんよね。
かといって、Googleなどは新規エントリはすぐにはキャッシュされないし。
それに、Ajax仕様だからページ移動もないし、高速だし♪
ども、かわぐちです。
私のブログに設置してみました。
毎度の事ながら、お世話になりました。
ありがとうございます。
ところで、これ、めっちゃいいですね~。
凄く早いし。
この検索から考えると、
今までの検索は、いったい何だったんだろうか?
>>8 かわぐち さん
こんにちわ^^
> ところで、これ、めっちゃいいですね~。
ですよねぇ(>∀< )
わたしもコレ見つける前まで、デフォの検索は遅すぎて不満タラタラでしたよ。
YahooやGoogleの検索を使ったこともあったけど・・・キャッシュされないとHITされないというデメリットありますしね。
またまた初歩的な質問ですいません。
検索結果から記事をなくすにはどうしたらいいんでしょうか?
>>10 初心者A さん
こんばんわ^^
> 検索結果から記事をなくすにはどうしたらいいんでしょうか?
記事内容を表示したくない・・・ということですね
blog_ajax_json_search.js 内の 142 行目を以下のように変更します。
そうすれば記事一覧として表示されるようになります
ご確認ください
こんばんわ。
グーグル検索しても全然出てこないので
困ったときのbzbellさん頼みでカキコんでしまいました。
でも実はAjax loading を使いたくてjQuery 版でやりたかったのですが
prototype.jsが一緒だとエラーになってしまってダメでした。
ありがとうございました
検索システムを使わせていただいたおります。
ホントに高速ですごく役立っております。
ひとつご要望があるのですが、
検索結果にカテゴリー名を表示することは可能でしょうか?
blog_ajax_json_search.jsをいろいろ触ったのですが
うまく表示できませんでした。
ご教授いただければ幸いです。
よろしくお願い致します!
>>13 kuku さん
こんばんわ^^
具体的には以下をお使いください。search_data.txt のテンプレートにカテゴリ名を追加することで、カテゴリ名を表示することができるようになります。
<?xml version="1.0" encoding="utf8"?> { data:[<MTEntries all="1">{category:"<MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$></a></MTEntryCategories>",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> {category:"",title:"",link:"",body:""}] }あとは、blog_ajax_json_search.js をカスタマイズしてあげれば OK ですMTの作業からしばらく手が離れしまい、
ご確認が遅くなり申し訳ありませんでした。
コードまでご記入いただき、
教えていただいたとおりでうまく表示ができました。
ただ、カテゴリにリンクをはると
ループするようでリンクははずして、
カテゴリー名の表示のみにいたしました。
思っていたとおりに表示ができ
感謝をしております。
本当にありがとうございました。
実は本当に申し訳ないのですが、
また新たに質問ができてしまいました。
それは、
特定のカテゴリーを検索から除外することというのは可能なのでしょうか?
何度もご質問をさせていただき、
申し訳ありませんが、
教えていただけると幸いです