MT-TOKYO11 LT
25
MovableType.net に サイト内検索を追加しよう！ 2015-03-19 MT東京-11 LT
Transcript of MT-TOKYO11 LT
MovableType.net にサイト内検索を追加しよう！
2015-03-19MT東京-11 LT
• 今日の LT の内容は先日ブログに書いた内容です。MovableType.net で flexibleSearch を使ってみる | bit
part bloghttp://bit-part.net/blog/2015/02/movabletypenet-flexiblesearch.html
• 既にブログ記事読んだ人はビールでも飲んでノンビリしててください。
bit part 紹介
•奥脇知宏（@tinybeans）、柳谷真志（@mersy）•Movable Type、Movable Type Cloud、PowerCMSを利用した構築がメイン業務
• Six Apart の ProNet、Alfasado の PowerCMS Partner Pro
bit part 紹介 / mersy
•柳谷真志（やなぎやまさし）•ディレクション、進行管理、MTMLテンプレート作成
•アイ・ペアーズ株式会社
bit part 紹介 / tinybeans•奥脇知宏（おくわきともひろ）•MTAppjQuery等のプラグイン開発、MTML、その他フロントエンドやバックエンド少々
•かたつむりくんのWWW•Movable Type 5.1 プロの現場の仕事術
bit part 紹介
• http://bit-part.net•Movable Type 6 本格活用ガイドブック2013年11月30日発売
bit part 紹介
•MTAppjQuery• flexibleSearch •MTML Completions• Data API Extend Search•その他のMTプラグイン
検索を付けよう！
flexibleSearch
• https://github.com/tinybeans/jq-plugin-flexibleSearch
• JSON を JavaScript で検索するjQuery プラグイン
• Movable Type 6 だと Data API との組み合わせでも利用可能
• S3 など配信するサイトで使う検索としても利用可能
MovableType.net meets flexibleSearch
• 検索機能、無いなら付けてしまおう
• MovableType.net meets flexibleSearch
• と思ったら、Mediaのテーマには Google Custom
Search が付いてますね、、、、
• demo
MovableType.net meets flexibleSearch
MovableType.net meets flexibleSearch
• プラグインをダウンロード• 必要なファイルを丸っとアップロード• 検索対象にしたいデータを含めたJSONを用意する
• 検索フォームの実装• 検索結果を表示するテンプレートの調整
https://gist.github.com/mersy/b199135d73ae6fc8f481
MovableType.net meets flexibleSearch
• 必要なファイルをアップロード
• インデックステンプレートでJSON を用意する
MovableType.net meets flexibleSearch
{"items":[<mt:entries lastn="0">{"title":"<mt:entryTitle>","datetime":"<$mt:EntryDate format="%Y-%m-%d"$>","dateyear":"<$mt:EntryDate format="%Y"$>","date":"<$mt:EntryDate format="%b月%e日"$>",
<mt:EntryCategories type="primary">"category":"<$mt:CategoryLabel$>","categoryarchivelink":"<$mt:CategoryArchiveLink$>",</mt:EntryCategories>"url":"<mt:entryPermalink>","excerpt":"<mt:EntryExcerpt remove_html="1" strip_linefeeds="1">","body":"<mt:entryBody remove_html="1" strip_linefeeds="1">"}<mt:unless name="__last__">,</mt:unless></mt:entries>]}
MovableType.net meets flexibleSearch
• 検索フォームの用意テンプレートモジュール「header」に追加
MovableType.net meets flexibleSearch
<mt:If name="google"><li class="googleplus"><a href="<$mt:GetVar name="google"$>"><i class="fa fa-google"></i></a></li></mt:If></ul><div style="float: right; padding: 5px 0px;"><form style="padding: 5px 0px;" action="/search.html" method="GET" class="form-inline"><input type="hidden" name="offset" value="0"><input type="hidden" name="limit" value="5"><input name="search" class="form-control" type="text" placeholder="キーワード検索"
style="width:12em"><input type="submit" class="btn btn-primary" value="検索"></
form></div><ul class="nav navbar-nav"><li><a href="<$mt:BlogRelativeURL$>">TOP</a></li>
• 検索結果を表示するテンプレートを追加インデックステンプレート「ニュース TOP」の内容をコピペjsを読み込ませる
MovableType.net meets flexibleSearch
<$mt:Include module="common_bottom_js"$><script src="/flexiblesearch/mustache.js"></script><script src="/flexiblesearch/flexibleSearch.js"></script><script src="/flexiblesearch/flexibleSearch-config.js"></script></body></html>
• 結果表示部分の修正MovableType.net meets flexibleSearch
<div class="col-sm-9" id="blog-primary-content"><div id="entry-list"><$mt:Include module="entry-list"$></div><div class="holder"></div>
↓↓ ↓↓ ↓↓
<div class="col-sm-9" id="blog-primary-content"><div id="entry-list"><div id="fs-result"></div></div><div class="holder"></div>
• 設定ファイルの追加インデックステンプレート「flexibleSearch-config.js」
MovableType.net meets flexibleSearch
(function ($) { $("#search").flexibleSearch({ searchDataPath: "/search.json", searchDataPathPreload: "/search.json", searchFormCreation: false, loadingImgPath: "/flexiblesearch/loading.gif", resultItemTmpl: [ '{{#items}}', '<article class="entry clearfix">', '<div class="entry-meta"><time datetime="{{&datetime}}"><span class="year">{{&dateyear}}年</span><span
class="monthday">{{&date}}</span></time><a href="{{&categoryarchivelink}}" class="category">{{&category}}</a></div>', '<h1 class="entrytitle"><a href="{{&url}}">{{&title}}</a></h1>', '<div class="entry-excerpt">{{&excerpt}}</div>', '<div class="pagemore"><a href="{{&url}}" class="btn btn-primary">この記事の詳細を見る</a></div>',
'</article>', '{{/items}}' ].join(""), paginateTmpl: [ '<div id="fs-paginate">', '<ul class="pagination">', '{{#page}}', '<li{{#current}} class="active"{{/current}}><a href="#" title="{{pageNumber}}">{{pageNumber}}</a></li>', '{{/page}}', '</ul>', '</div>' ].join(""), dummy: false });})(jQuery);
• demo
MovableType.net meets flexibleSearch
ご静聴ありがとうございました。
MT::Lover::bitpart
Update bit part,
