flexibleSearch新バージョンのご紹介

お知らせ

DATE 2013.12.20

flexibleSearch新バージョンのご紹介

CATEGORY: 製品

TAG: 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 さんが担当です。

This is a 20th article of Movable Type Advent Calendar 2013.

FlexibleSearch is a jQuery plugin which searching JSON file very quickly.
On PAKUTASO they use this plugin.
I think when creating a website by Movable Type you usually use search.cgi. If you search JSON, you don't need server side script.
You can create a website only like static files.

We sometimes asked whether some functions add to flexibleSearh, so today we released new version which fix new features.

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

There are new fixes on this new version below.

mustache.js is used for rendering
looking like ordinary search by post parameter to URL
changing dynamically JSON files for search
easy for setting up
making program code shorter

rendering by mustache.js

It was a little hard to customize view of search and result before version.
In this version, we selected mustache.js so you can write code for search result like below sample code.

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

A below code is a features of mustache.js.

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

You can write code for loop like above code.
It's easy to show values from JSON by like below code.

{{&title}}

looking like ordinary search by post parameter to URL

You can search by posting search words to search paramater on search page.

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

In previous version it was a specific way for search for example saving search words on cookies and adding hash to URL. In this version how to search is a way to add paramater to URL and by GET request it's like a ordinary seach system.

So you can prepare a search result page.

changing dynamically JSON files for search

In previous version there was a one way for searching specific JSON file, in this version you can select search files dynamically.

So you can search static JSON file or JSON data by Data API.

easy for setting up

In previous version you need to customize javascript files of plugin for change view of search and result. We create some options for customize.

making program code shorter

new version file size : 683 lines (626 sloc) 26.977 kb
previous version file size : 748 lines (659 sloc) 35.122 kb

A new plugin become smaller than previous version.

document for ready

We rewrite a document for this new version.
Please check how to set options, how to use etc on Github.

For example you write below code on index template for creating JSON file by Movable Type.

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

This was a 20th article of Movable Type Advent Calendar 2013.
Yesterday's article was about SQL created by MT written by @okayama.
Tomorrow @yujiro will write an article for the Advent Calendar.

年別アーカイブ

その他の記事

${ formatDate(entry.date) }

${ entry.title }

お知らせ