Movable Type 備忘録

 ブログ内検索を高速化

  • Sep192006
  • Vote:
    http://bizcaz.com/archives/2006/09/19-231447.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

ブログ内検索に、GoogleやYahooなどの検索フォームを設置している人が多いと思います。
最近ではAjax化により見ため的にもいいかんじですよね。

でも、これら検索エンジンなどを利用したブログ内検索だと、少なくとも各検索サイトなどにキャッシュされないとヒットしない…というデメリットがあります。

今回すっごいブログ内検索を見つけてしまいました。
ご存知の人は多いと思いますが、こちらの暴想さんで配布されてるAjaxを利用したブログ内検索です。
ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

- 2006.11.24 追記 -

オリジナルのblog_ajax_json_search.jsをカスタマイズして、検索結果をクリアできるようにしました。
よろしければ、こちら(blog_ajax_json_search.js)から右クリックでダウンロードして、各自のサーバにアップロードしてお使いください。


- 2006.09.20 追記 -

ちょっとこれマジやばいかも Σ(￣Д￣；) めちゃ使いやすいです。
コメントも検索対象だし、検索結果の件数が多くても、検索エンジンと同様にキーワードをどんどん絞込んでいけば、目的のエントリ探しやすくてとっても便利です。

多少気になるところはありますが、絶対オススメです♪

使ってみればわかると思いますが、ありえないくらい速いです!!

今回はこの超高速なブログ内検索の設置について紹介しますが、ムズかしいことは何にもないので、注意点などカンタン説明します。

カスタマイズ

  1. まず、検索用のテンプレートを作成します。
    以下のコードをインデックス・テンプレートで新規作成してください。
    その際、出力ファイル名には「search_data.txt」として、index.htmlと同じ場所に作ることをオススメします。

    インデックス・テンプレートは、MovableType(ムーバブルタイプ)管理画面からブログを選択して、左サイドバーから「テンプレート」をクリックします。
    そして、右上にある「テンプレートを新規作成」から作れます。

    search_data.txt

    1. <?xml version="1.0" encoding="utf8"?>
    2. {
    3. data:[
    4. <MTEntries all="1">{
    5. title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
    6. ,link:"<$MTEntryLink$>"
    7. ,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>"
    8. },</MTEntries>
    9. {title:"",link:"",body:""}
    10. ]
    11. }

    上記コードは風柳亭 - 別館：書庫のある庵 -さんが、コメントも含めて検索するよう改造したものみたいです。
    blog_ajax_json_search.jsにパッチ：コメントも含めて検索

    保存して再構築したら、index.htmlと同じ場所にsearch_data.txtが作られたことを確認してください。

  2. 次に各検索フォームを設置しているテンプレートを修正します。
    既存の検索フォームを以下のコードと差し替えます。

    検索フォーム

    1. <script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/prototype.js"></script>
    2. <script type="text/javascript" src="http://furyu.tea-nifty.com/script/blog_ajax_json_search.js"></script>
    3. <form action="javascript:blogAjaxJsonSearch( '/search_data.txt', document.getElementById('search_box').value );">
    4. <input type="search" id="search_box" value="" size="30" />
    5. <input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch(
    6. '/search_data.txt', document.getElementById('search_box').value );" value="サイト内検索"
    7. />
    8. </form>
    9. <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の機能のひとつに「検索機能」があります。使われた方、お世話...

Tracked on May 10, 2007
from K's Labo Rebooted

実は・・・、現在、筋肉痛でございます。 というのも、この3/2の日曜日に、ウチの田んぼで野良仕事をしました。畑をトラクターで耕したのです...

Tracked on March 4, 2008
from K's Labo 3G

今日は昨日と違い朝から快調。と言うのも、新型「iPod」シリーズの発表に関わるお...

Tracked on September 11, 2008

 Comments(15)

#1: Posted by oscar @ September 22, 2006 [REPLY]
user-pic

こんにちは、bzbellさん。
とりあえずですけど、EUCのサイトでも動くように（化けないように）してみました。たぶんShiftJISでも同様に解決できると思います。

 
#2: Posted by bzbell @ September 22, 2006 [REPLY]
user-pic

>>1 oscar さん

こんにちわ^^

oscarさんと話してると割りと文字コードがらみでNGってのを聞きますけど、たとえば、わたしのブログでもEUCにすると同じようなトラブルに見舞われるものなんですか（；￣－￣）

ぶっちゃけ、文字コードなんてMTやるまで存在すら知りませんでしたよ。

つか、oscarさん!! EUC対応した割には自分のサイトに設置してないじゃないですかΣ(￣Д￣；)ガーン
使ってみてください♪ メチャ検索早いですよ（*´∇｀*）♪

多少気になるところあるので、わたしも自分のところにコピペしてカスタマイズしてみようと思います。

 
#3: Posted by oscar @ September 23, 2006 [REPLY]
user-pic

私みたいに、MTのインストール時にEUCにしてたりすると、MySQLの中身が全部EUCだから、後で苦労するんですよ。
最近（MT3.3）はデフォでUTF-8になるんで、そんな悲劇もなくなるでしょう。

ちゃんと設置してますから。
見た目が変わらないように、設置しただけです。
後、全部の再構築はやってないので、まだ一部だけしか反映されてないかも。

 
#4: Posted by aj_sg @ November 10, 2006 [REPLY]
user-pic

こんにちわ。
参考にさせていただいています。

このブログなの高速検索なのですが、
実装してみて、検索結果は無事に出せたのですが、
検索を行うときに日本語入力できなくなり、
英数のみでしか検索できません。

これは、どういった不具合がおきているのでしょうか？

 
#5: Posted by bzbell @ November 11, 2006 [REPLY]
user-pic

>>4 aj_sg さん

こんにちわ^^

> 検索を行うときに日本語入力できなくなり、英数のみでしか検索できません。

えっΣ(￣Д￣；)!!
初めて聞く現象ですね。

  1. 最初は日本語入力して検索できるけど、以降で日本語入力できなくなる…ということでしょうか。
  2. それとも、最初っからフォーム内にカーソルを入れた時点で既に日本語入力できないのでしょうか。

どちらにしても、フォームに入力する時点ではAjaxは実行されていないので他の要因では…と思われます。

ちなみに、日本語入力できないというのは、検索フォーム( <input>タグ )に限ったことなのでしょうか。
他のフォームではちゃんと日本語入力できますか（;￣∇￣A

 
#6: Posted by かわぐち @ May 9, 2007 [REPLY]
user-pic

お久しぶりのかわぐちです。

これ、いいですね。
設置してみよ～。

 
#7: Posted by bzbell @ May 9, 2007 [REPLY]
user-pic

>>6 かわぐち さん

ご無沙汰してまぁ～す(●＞∀＜●)／

はい。是非っ!!

デフォの検索はドンくさくてやってられませんよね。
かといって、Googleなどは新規エントリはすぐにはキャッシュされないし。

それに、Ajax仕様だからページ移動もないし、高速だし♪

 
#8: Posted by かわぐち @ May 10, 2007 [REPLY]
user-pic

ども、かわぐちです。

私のブログに設置してみました。
毎度の事ながら、お世話になりました。
ありがとうございます。

ところで、これ、めっちゃいいですね～。
凄く早いし。
この検索から考えると、
今までの検索は、いったい何だったんだろうか？

 
#9: Posted by bzbell @ May 10, 2007 [REPLY]
user-pic

>>8 かわぐち さん

こんにちわ^^

> ところで、これ、めっちゃいいですね～。

ですよねぇ(＞∀＜　)
わたしもコレ見つける前まで、デフォの検索は遅すぎて不満タラタラでしたよ。
YahooやGoogleの検索を使ったこともあったけど･･･キャッシュされないとHITされないというデメリットありますしね。

 
#10: Posted by 初心者A @ March 19, 2008 [REPLY]
user-pic

またまた初歩的な質問ですいません。
検索結果から記事をなくすにはどうしたらいいんでしょうか？

 
#11: Posted by Author Profile Page bzbell @ March 19, 2008 [REPLY]
user-pic

>>10 初心者A さん

こんばんわ^^

> 検索結果から記事をなくすにはどうしたらいいんでしょうか？

記事内容を表示したくない･･･ということですねうぅ～ん
blog_ajax_json_search.js 内の 142 行目を以下のように変更します。 

html += '<li><a href="' + result_data[i].link + '#search_word=' + search_keyword + '" target="_blank">' + highlight( result_data[i].title, keywords ) + '</a></li>';

そうすれば記事一覧として表示されるようになりますワクワク
ご確認くださいもじもじ

 
#12: Posted by 初心者A @ March 20, 2008 [REPLY]
user-pic

こんばんわ。
グーグル検索しても全然出てこないので
困ったときのbzbellさん頼みでカキコんでしまいました。
でも実はAjax loading を使いたくてjQuery 版でやりたかったのですが
prototype.jsが一緒だとエラーになってしまってダメでした。
ありがとうございましたあせあせ

 
#13: Posted by kuku @ July 16, 2009 [REPLY]
user-pic

検索システムを使わせていただいたおります。

ホントに高速ですごく役立っております。

ひとつご要望があるのですが、
検索結果にカテゴリー名を表示することは可能でしょうか？

blog_ajax_json_search.jsをいろいろ触ったのですが
うまく表示できませんでした。

ご教授いただければ幸いです。

よろしくお願い致します！

 
#14: Posted by Author Profile Page bzbellからkukuへの返信 @ July 16, 2009 [REPLY]
user-pic

>>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 ですキャハハ
 
#15: Posted by kuku @ November 17, 2009 [REPLY]
user-pic

MTの作業からしばらく手が離れしまい、
ご確認が遅くなり申し訳ありませんでした。

コードまでご記入いただき、
教えていただいたとおりでうまく表示ができました。

ただ、カテゴリにリンクをはると
ループするようでリンクははずして、
カテゴリー名の表示のみにいたしました。

思っていたとおりに表示ができ
感謝をしております。

本当にありがとうございました。

実は本当に申し訳ないのですが、
また新たに質問ができてしまいました。

それは、
特定のカテゴリーを検索から除外することというのは可能なのでしょうか？

何度もご質問をさせていただき、
申し訳ありませんが、
教えていただけると幸いです

 

 Post a Comment

 

コメント用フィード