Movable Type 備忘録

 

 ブログ内検索を高速化

ブログ内検索に、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♪

  • Edit
  • Permalink
  • Comments(12)
  • Trackbacks(3)

 Trackback Pings(3)

from ANNEX::MovableType MEMO

ブログ内検索に、GoogleやYahooなどの検索フォームを設置している人が多い...

Tracked on February 25, 2007
from K's Labo

MovableTypeの機能のひとつに「検索機能」があります。使われた方、お世話...

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

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

Tracked on March 4, 2008

 Comments(12)

#1: Posted by oscar [RES]

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

Posted on September 22, 2006
#2: Posted by bzbell [RES]

>>1 oscar さん

こんにちわ^^

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

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

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

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

Posted on September 22, 2006
#3: Posted by oscar [RES]

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

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

Posted on September 23, 2006
#4: Posted by aj_sg [RES]

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

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

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

Posted on November 10, 2006
#5: Posted by bzbell [RES]

>>4 aj_sg さん

こんにちわ^^

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

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

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

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

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

Posted on November 11, 2006
#6: Posted by かわぐち [RES]

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

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

Posted on May 9, 2007
#7: Posted by bzbell [RES]

>>6 かわぐち さん

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

はい。是非っ!!

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

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

Posted on May 9, 2007
#8: Posted by かわぐち [RES]

ども、かわぐちです。

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

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

Posted on May 10, 2007
#9: Posted by bzbell [RES]

>>8 かわぐち さん

こんにちわ^^

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

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

Posted on May 10, 2007
#10: Posted by 初心者A [RES]

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

Posted on March 19, 2008
#11: Posted by bzbell Author Profile Page [RES]

>>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>';

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

Posted on March 19, 2008
#12: Posted by 初心者A [RES]

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

Posted on March 20, 2008

 Post a Comment

コメント用フィード