flexibleSearch新バージョンのご紹介

この記事は Movable Type Advent Calendar 2013 の20日目の記事です。

flexibleSearch は JSON ファイルを用意しておき、超高速 Ajax 検索を実現する jQuery プラグインです。
PAKUTASO などでもつかってもらっており、ありがたい限りです。
Movable Type をつかったサイトの場合、 MT の search.cgi で動的に検索する方法がデフォルトだとはおもいますが、 JSON を検索することで、フロントだけで処理することも可能です。
スタティックな HTML ファイルだけのサイトのように構築することが出来るかと思います。

flexibleSearch にはこれまでも機能追加の要望なども頂くことがありましたので、いくつか機能追加/改善しまして、新バージョンを公開しました。

tinybeans/jq-plugin-flexibleSearch
https://github.com/tinybeans/jq-plugin-flexibleSearch

今回の新バージョンでの変更は以下の通りになります。

  • レンダリングエンジンに mustache.js を使用しました
  • URLにパラメータを渡す普通の検索っぽくなりました
  • 検索する JSON をダイナミックに変更可能になりました
  • 設定が楽になりました
  • コードをスッキリさせました

レンダリングエンジンに mustache.js

これまでは検索結果部分の表示をカスタマイズするのが若干大変ではありました。
今回のバージョンでは mustache.js を利用することで、例えば検索結果部分の表示については以下の様な形で書くことが出来ます。

    var resultItemHTML = [
        '<div id="' + op.resultBlock.blockId + '-items">',
            '<ul>',
            '{{#items}}',
                '<li>{{&title}}</li>',
            '{{/items}}',
            '</ul>',
        '</div>'
    ];

以下の

{{#items}}〜〜{{/items}}

の部分が mustache の特徴ですが、これでループを回す感じで書けますし、JSON から取り出す際も

{{&title}}

のように簡単に取り出す事が出来るようになりました。

URLにパラメータを渡す検索

検索用のページを用意して、 search パラメータに検索キーワードを渡すことで、検索が出来るようになりました。

URL 例:http://example.com/search.html?offset=0&limit=10&search=flexiblesearch

前バージョンはURLにハッシュを付け、その検索条件をcookieに保存するなど少し特殊な方法でしたが、本バージョンからは通常の検索と同様にURLにパラメータを付けてGETリクエストするような方法で検索します。

したがって、前バージョンではやりにくかった検索結果表示ページを用意する通常の運用が可能です。

検索する JSON をダイナミックに変更可能

これまでは出力しておいた特定の JSON ファイルを検索するだけでしたが、検索対象の JSON ファイルをダイナミックに選択することが可能になりました。

これにより、静的に出力した JSON を検索したり、MT6 から追加された Data API が返した JSON を検索するようにしたりと、状況に応じて切り替える事が出来るようになりました。

設定が楽に

これまではカスタマイズする際に、プラグイン自体を js で書き直したりすることが必要でしたが、修正するであろう箇所をオプションとして指定出来るようにしました。

コードをスッキリさせました

新バージョン:683 lines (626 sloc) 26.977 kb
これまでのバージョン:748 lines (659 sloc) 35.122 kb

機能改善してこれまでのものよりサイズを小さくしました。

ドキュメントを整備しました

今回のリリースにあわせて、ドキュメントも整備し直しました。
Githubでオプションの指定方法や使い方など詳しい方法についてはご確認いただければと思います。

Movable Type での JSON ファイル作成については、以下の内容を index テンプレートで作成しておくかたちになります。

    <mt:Unless name="compress" regex_replace="/^\s*\n/gm","">{"items":[
    <mt:entries include_blogs="1" lastn="0">
    <mt:setvarBlock name="item{title}"><mt:entryTitle></mt:setvarBlock>
    <mt:setvarBlock name="item{url}"><mt:entryPermalink></mt:setvarBlock>
    <mt:setvarBlock name="item{body}"><mt:entryBody remove_html="1" regex_replace="/\n|\t| | /g",""></mt:setvarBlock>
    <mt:setvarBlock name="item{more}"><mt:entryMore remove_html="1" regex_replace="/\n|\t| | /g",""></mt:setvarBlock>
    <mt:setvarBlock name="item{tag}">,<mt:entryTags glue=","><mt:tagName regex_replace="/ | /g","%20"></mt:entryTags>,</mt:setvarBlock>
    <mt:setvarBlock name="item{category}"><mt:EntryCategories glue=","><mt:CategoryLabel></mt:EntryCategories></mt:setvarBlock>
    <mt:var name="item" to_json="1">,
    </mt:entries>
    <mt:pages lastn="0">
    <mt:setvarBlock name="item{title}"><mt:pageTitle></mt:setvarBlock>
    <mt:setvarBlock name="item{url}"><mt:pagePermalink></mt:setvarBlock>
    <mt:setvarBlock name="item{body}"><mt:pageBody remove_html="1" regex_replace="/\n|\t| | /g",""></mt:setvarBlock>
    <mt:setvarBlock name="item{more}"><mt:pageMore remove_html="1" regex_replace="/\n|\t| | ",""></mt:setvarBlock>
    <mt:setvarBlock name="item{tag}">,<mt:pageTags glue=","><mt:tagName regex_replace="/ | /g","%20"></mt:pageTags>,</mt:setvarBlock>
    <mt:setvarBlock name="item{more}"><mt:PageFolder><mt:FolderLabel></mt:PageFolder></mt:setvarBlock>
    <mt:var name="item" to_json="1"><mt:unless __last__>,</mt:unless __last__>
    </mt:pages>
    ]}</mt:Unless>

この記事は Movable Type Advent Calendar 2013 の20日目の記事でした。
昨日は @okayama さんによる MT が発行しているSQLの話でした
http://weeeblog.net/blog/2013/12/19_0901.php
明日は @yujiro さんが担当です。


Comments

comments powered by Disqus