世界中の１％の人々へ

Movable Typeの可能性がAjaxによりまたひとつ、広がった

昨年4月末から悩んでいた事が、あっけなく解決した。

というのは、Movable Typeの検索機能が弱いので、XMLを利用した検索システムを考えていたのだが、2005年12月に暴想のnaoyuki氏によって、Ajaxによるスゴイ検索システムが作られていた。
＃僕はXML＋Perlで考えていたが、XML＋JavaScriptは思いつかなかった。

参考にしたサイト

暴想: ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript
http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html
風柳亭 - 別館：書庫のある庵 -: blog_ajax_json_search.jsにパッチ：コメントも含めて検索http://furyu.tea-nifty.com/annex/#ccqlink=/annex/2006/05/blog_ajax_json__94c8.html
＃naoyuki氏、風柳氏に深く感謝

このシステムは、検索用のXMLのサイトマップを独自に作り、JavaScriptで検索し結果を表示する仕組みで、最初こそ読み込みに時間がかかる(個々の環境によりかなり異なるが検索エラーで止まるよりまし)が、２度目の検索からは超高速だ。 また、コメントも検索対象に含まれる。

相方DigiCloに、これはどうよと相談して、仕様を伝えると、すぐさまソースをMovable Type3.3用に修正してくれた。僕のブログに実装してみた感想は凄すぎた！「さらば、検索エラー。さらば、mt-search.cgi。さらば、Google Search、Ajaxありがとう」という感じ。

読者の方々も、今ご覧のページの検索窓に適当に文字を入力して[検索]ボタンを押して確認してみてほしい。URLを事前、事後に確認すると、JavaScriptにより上書きされていることがわかると思う。
＃試しに「馬鹿」と入力したら、22件表示された(^^;
＃何も入力しないで検索すると40秒ほど待つことになるが、待つのが嫌でなければ試してほしい。

で、結果が出たらトップページを見ている人は一番下の[Go Back Index]を
パーマーリンクで見ている人は[Go Back Page]をそれぞれクリックして戻ってきてほしい。

パッケージを作ったから、検索エラーや検索が遅くて悩んでいる人は是非使ってみてほしい。以下、ハック方法を解説する。
※なおUTF-8環境以外で利用する以外は、個々で修正のこと。

1. ファイルのダウンロード

blog_ajax_json_search.zipをダウンロードして解凍する。中身は５つのテキストファイルが入っている。個々のファイルの内容は以下。

◆Ajax_search_form.txt
検索用フォームのソース

◆blog_ajax_json_search.txt
検索用JavaScriptである、blog_ajax_json_search.jsのソース

◆prototype.txt
オブジェクト指向JavaScriptライブラリであるprototype.jsのソース

◆search_data.txt
検索対象用のデータを作成する為のテンプレート用ソース

◆インストールマニュアル.txt
インストールの仕方を書いたマニュアル。再配布用に書いたから、このコラムを読んでいる人には必要ない

2. Movable Typeのテンプレートにタグを追記

各テンプレートの検索結果を表示したい箇所を<div class="result"></div>で囲む。
※わかる人はクラス名は任意に修正してもらってかまわない。

3. blog_ajax_json_search.txtの修正

カスタマイズ箇所はテキストの以下の箇所だ。

65行目

if ( div_tag[i].className == 'result' ) { // Pached by Dificlo

任意のクラス名を使う人はresultを結果表示用領域のクラス名に変更する。

188行目

return text.replace( new RegExp( '(' + keyword + ')', "ig"), '<span style="background-color:#FFCC33;">' + "$1" + '</span>' );

#FFCC33を任意の色に変更する。

その他、僕らは現在CSSまでは修正してないから、修正を各自の環境に合わせて行うといいだろう。
また、ある程度知識のある人なら、コメントだけでなく、その他のMTタグを検索対象にすることも可能だろう。アイデアとわずかな技術でどんどんMovable Typeの可能性が広がる。

修正したら、blog_ajax_json_search.jsとリネームしてアップロード。
※パスのよくわからない人はルートにアップロードすること。

4. prototype.ｔｘｔのアップロード

prototype.jsとリネームしてblog_ajax_json_search.jsと同じ場所にアップロードする。

5. 検索対象用のデータを作成する為のテンプレート作成

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

メイン・メニュー > 利用したいブログ > テンプレートに新規にテンプレートを作成して、search_data.txtのソースを貼る
テンプレート名：任意
出力ファイル名：search_data.txt
再構築：インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する設定にしておくと新たなサイトマップが作られる。

6. 検索用フォームのソースを差し替える

<!--blog_ajax_json_search.js start-->
<h2>Search</h2>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',
document.getElementById('search_box').value );">
<p>
<input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br />
キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br />
Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a>
</p>
</form>
<!--blog_ajax_json_search.js end-->

Ajax_search_form.txtの内容を既存の検索用フォームと差し替えて使用。そのまま差し替えてもいいが、CSSをわかる人は各自の環境に合わせて修正してほしい。

7. サイトを再構築

すべての作業を終えたら、サイトを再構築しないとこのシステムは動かない。後は超高速検索システムを楽しんでほしい。

ライセンスについて

商用で使いたい人もいると思うから、以下、著作者である、暴想のnaoyukiさんの原文を引用させていただく。

<前略>このプログラムのライセンスを明記していませんでしたので、ソースコードのヘッダーに明記いたしました。

検索結果に表示されるフッターは消してしまってかまいませんし、自由にソースコードを改変して２次配布してもかまいません、というライセンスを明記してあります。
http://creativecommons.org/licenses/by-sa/2.1/jp/deed.ja

ライセンスにもかかれていますが、出力中のコピーライトは消してもかまいませんが、ソースコード中のライセンス表記は消さないでください。

ということだ。naoyukiさんに改めて感謝したい。

強制はできないが利用した人は、マナーとして、暴想にトラックバックを送るとか、コメントを書くなりはしてあげてほしい。そして、ハック方法によって、いろんな使い方を考えてほしい。

あー、なんかMovable Typeの可能性がまた広がった:-D

投稿者: Dakiny 日時: 2007年3月 3日 04:09 |    |   |    |   |  パーマリンク | コメント(4)  | トラックバック (9)

トラックバック

このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1365
※文章内容と関係のないトラックバックは固くお断り。

この一覧は、次のエントリーを参照しています: 今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！: