この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
INDEX
1. 検証バージョン
- Movable Type Pro version 6.0
- flexibleSearch.js ver 1.0.0
2. flexibleSearch.jsのダウンロードと配置
GitHubからflexibleSearch.jsのZIPファイルをダウンロードします。
ダウンロードしたファイルを解凍して、フォルダ名を flexibleSearch に変更しました。
サーバルートの js ディレクトリに flexibleSearch をアップロードしました。
3. 検索用JSONファイルの作成
検索用のデータのJSONファイルを作成して再構築します。
search_data.js
{"item":[
<mt:entries lastn="0">
<mt:setvarBlock name="item{title}"><mt:entryTitle></mt:setvarBlock>
<mt:setvarBlock name="item{url}"><mt:entryPermalink></mt:setvarBlock>
<mt:setvarBlock name="item{tag}">,<mt:entryTags glue=","><mt:tagName></mt:entryTags>,</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:var name="item" to_json="1"><mt:unless __last__>,</mt:unless __last__>
</mt:entries>
]}
上記はブログの記事の一覧のJSONファイルを作成する為のMovable Typeの記述になりますが、ウェブページも含める場合は以下の記事を参考にしてください。
インデックステンプレートの作成
インデックステンプレートの作成で上記のソースコードを入力し search_data.js という名前でサーバのルートに再構築しました。
search_data.jsにブラウザからアクセス
{"item":[
{"body":"かたつむりくんのWWWの奥脇さんが作られた、ページネーション対応の高速Ajax検索のjQueryプラグインflexibleSearchを試してみました！\n今回、Movable Type 6と組み合わせて使ってみました。","url":"http://example.com/2013/10/flexible-search-wordpress.html","title":"高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ～WordPress編～","tag":",,","more":"この投稿はテスト投稿です。"},
{"body":"かたつむりくんのWWWの奥脇さんが作られた、ページネーション対応の高速Ajax検索のjQueryプラグインflexibleSearchを試してみました！\n今回、Movable Type 6と組み合わせて使ってみました。","url":"http://example.com/2013/10/flexible-search-mt.html","title":"高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ～Movable Type編～","tag":",,","more":"この投稿はテスト投稿です。"}
]}
search_data.js にブラウザからアクセスするとこのようなデータが返ってきます。
4. 検索用ページの作成
検索用のページを作成して再構築します。
search.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/js/flexibleSearch/flexibleSearch.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/flexibleSearch/hashchange.js"></script>
<script type="text/javascript" src="/js/flexibleSearch/flexibleSearch.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#search_content').flexibleSearch({
resultTargetId : "fs-result-target",
loadingImgPath : "/js/flexibleSearch/loading.gif",
searchDataPath : "/search_data.js"
});
});
</script>
</head>
<body>
<div id="search_content"></div>
<div id="fs-result-target"></div>
</body>
</html>
インデックステンプレートの作成
インデックステンプレートの作成で上記のソースコードを入力し search.html という名前でサーバのルートに再構築しました。
今回作成したファイルはこんな感じ。
search.htmlにブラウザからアクセス
search.html にブラウザからアクセスして検索した状態です。
検索用のフォームは配置しなくてもflexibleSearch.jsが生成してくれる仕組みになっています。
細かくカスタマイズしたい場合は以下の記事も参考にしてみてください:)
