MovableType用Ajax検索 その1

Category

MovableType

投稿日

2008/07/20 - 02:13

ブックマーク

タグ検索と、全文検索をAjax対応にしました。すごく大変でした。。。
とはいってもゼロから作ったわけではなく、すばらしい元ネタがあったため、それを利用して作成しました。

元ネタの作品

大元は暴想さんのblog_ajax_json_search.jsというもの。で、それをDakinyさんがカスタマイズして、そいつをさらにWWW Watchさんがカスタマイズしたものを使用しています。

すごく分かりづらいですね。はい。

というわけで、変更したところとか、使い方を書いておく。使い方はあんまり変わりませんが。長いので2部構成。

使い方(通常検索版)

  1. ajax_search.jsをヘッダー内(別にヘッダーじゃなくても良いですけど)に読み込む
    <script type="text/javascript" src="/js/ajax_search.js"></script>
  2. 新規インデックステンプレートを作成して、下記ソースを貼り付ける。ファイル名はsearch_data.jsonでドメイン直下に作成してください。変える場合はJSの46行目のパスを変更してください。
    {
    	data:[
    		<MTEntries lastn="0">{
    			title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
    			,link:"<$MTEntryLink$>"
    			,date:"<$MTEntryDate format="%Y/%m/%d-%X"$>"
    			,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>"
    			,tag:"<MTEntryTags glue=","><$MTTagName$></MTEntryTags>"
    		},</MTEntries>
    		{title:"",link:"",date:"",body:"",tag:""}
    	]
    }
    んで、再構築。それから再構築の設定は、インデックス・テンプレートの再構築時に、このテンプレートも自動的に再構築されるようにしておく。(私はダイナミックパブリッシングなんで関係ありませんが。)こいつが検索する中身になるというわけです。
  3. 検索フォーム部分に下記のソースを上書きする。といってもデフォルトだとこんな感じになってるはず。
    <form id="site_search" method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
    <fieldset>
    <legend accesskey="s">site serch</legend>
    <input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" />
    <input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
    <input type="image" src="/imgs/nav_btn.gif" alt="site search" id="searchBtn" />
    </fieldset>
    </form>
  4. 検索内容が表示される箇所はデフォルトでは<div id="main"></div>の中身を書き換えるようになっています。「idじゃヤダ!クラスで指定したい!」とかいう人はJSファイルの78行目を以下のように変更してください。
    var area = $("main");
    ↓
    var area = getElementsByClassName("好きなクラス名")[0];
    多分いわなくても分かると思いますが、クラス名が2つ以上あっても一番最初に記述されている要素にしか入りません。

これで検索フォームがAjax化されますた!オメデトウ!
JavaScriptが無効な環境では、デフォルトのMTの検索機能が働くようになります。 ちなみに、検索結果のコードは以下のような感じになります。

<div class="archives">
<h2 class="searchResult">SearchResult</h2>
<p class="data">「検索ワード」の検索結果(X件)</p>
<div class="entryList even">
<h3><a href="エントリーの詳細ページ" title="エントリータイトルの詳細へ">エントリータイトル - 投稿日時</a></h3>
<p>エントリー内容エントリー内容エントリー内容エントリー内容></p>
</div>
<div class="entryList odd">
<h3><a href="エントリーの詳細ページ" title="エントリータイトルの詳細へ">エントリータイトル - 投稿日時</a></h3>
<p>エントリー内容エントリー内容エントリー内容エントリー内容></p>
</div>
<p class="search_back"><a href="#" title="元のページに戻る">元のページに戻る</a></p>
</div>

Hタグ使いたくない人はがんばってJS変更してください。JSファイルの131行目~187行目あたりを変えればよいと思います。
キーワードが入ってない場合とかは...あんまり変わらないのでパス...。
それからソースを見れば分かるとおり、エントリーリストには偶数番目にはクラス「even」、奇数版目には「odd」が付与されていますので、シマシマとかやりたい人はCSSでどぞー。
また、キーワード部分には<span class="keywords">でマークアップされます。

あ、ちなみにロード時に表示される画像はこのへんとかで作ると良いのではないでしょうか。

長いんでいったん切り!次回はタグの検索の使い方ということで。

This Entry's Tag
Ajax,JavaScript,MovableType,sample,search

Trackback URI

http://mk-t-lab.com/mt/mt-tb.cgi/12

Trackback to This Entry

MovableType用Ajax検索(タグ検索) その2

前回に引き続きMovableType用のAjax検索の使い方を掲載。 今回はタグの検索機能の使い方です。こっちの方が使い方は多分簡単? あ、...

from GaS:Grumbling about Something ,2008/07/20-13:50

コメントまわりをAjax化しました。(for MovableType)

来週の木曜日まで夏休みです。ひゃっほう。 ってなわけでAjaxの勉強を兼ねて、前々からやりたかったコメントプレビューとコメント投稿をAjax...

from GaS:Grumbling about Something ,2008/08/14-05:45

Post Your Comment

コメント投稿フォーム