Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方

Data API と
ﬂexibleSearch、MTAppjQuery
で広がるMT6の使い方
柳谷真志（@mersy）奥脇知宏（@tinybeans）
Monday, August 5, 13

アジェンダ
•Data API の基本
•ﬂexibleSearch（ jQuery プラグイン）
•ﬂexibleSearch + Data API
•MTAppjQuery（ Movable Type プラグイン）
•MTAppjQuery + Data API

bit part 紹介

bit part 紹介
•柳谷真志（@mersy）、奥脇知宏（@tinybeans）

bit part 紹介
•2013年1月結成のユニット

bit part 紹介
•2013年1月結成のユニット
•8月中「bit part 合同会社」設立予定

bit part 紹介 / mersy
•柳谷真志
やなぎやまさし
•linker、アイペアーズ（株）

bit part 紹介 / tinybeans
•奥脇知宏
おくわきともひろ
•かたつむりくんのWWW
•Movable Type 5.1
プロの現場の仕事術
（毎日コミュニケーションズ）

bit part 紹介 / plugins
•ﬂexibleSearch
•MTAppjQuery
•MTML Completions
•compress modiﬁer
etc...

bit part 紹介 / plugins
•ﬂexibleSearch
•MTAppjQuery
•MTML Completions
•compress modiﬁer
etc...
ドキュメント販売中！！
http://bitpart.thebase.in/

Data API の基本

Data API の基本
MT6 はまだベータ版です。
あくまで現時点でのお話です。

Data API とは？

•ブログや記事などのデータの読み出しや更新などを
REST/JSON方式のAPIで利用できます。
•API用のJavaScriptのライブラリーも提供されるの
で、ダイナミックなコンテンツの組み込みも容易に
なり、独自の管理アプリケーションの開発が可能と
なります。
Data API とは？

Data API の特長

•REST/JSON形式でMT内のデータを取得したり、
操作したりできる
•Movable Typeの認証を利用して、公開されている
データ以外のデータも取得したり操作したりできる
•Movable Typeの画面をカスタマイズすることな
く、独自のアプリケーションを開発することができ
る
Data API の特長

Data API で記事一覧を取得してみる

•Data api entries list を使う
https://github.com/movabletype/Documentation/wiki/data-api-entries-list

< URL >

•https://your-host/mt-data-api.cgi/v1/sites/
{blog_id}/entries
< URL >

•https://your-host/mt-data-api.cgi/v1/sites/
{blog_id}/entries
•your-host、{blog_id}部分をセット
< URL >

< パラメータ1 >

•search：検索ワード
•searchFields：searchパラメータのワードをどの
フィールドから検索するか（デフォルト：
title,body,more,keywords,excerpt,basename）
•status：記事のステータス（Draft=1、
Publish=2、Review=3、Future=4、Spam=5）
•limit：表示件数
•oﬀset：最初のいくつを除くか

•includeIds：含める記事のID
•excludeIds：除く記事のID
•sortBy：何でソートするか（authored_on、title、
created_on、modiﬁed_on）
•sortOrder：ソート順（descend、ascend）
•maxComments、maxTrackbacks
•ﬁelds：どのフィールドの値を返してもらうか

•この中で意外と大切なのが「ﬁelds」
•ﬁelds を指定しないと記事全ての情報を含んだ
JSONが返ってくるので、場合によっては数MBにな
ることもある

< やってみよう！ >

•「mtappjquery」を含む記事のタイトルとパーマリ
ンクを取得
•http://your-host/mt/mt-data-api.cgi/v1/sites/
2/entries?
search=mtappjquery&ﬁelds=title,permalink
•デモ
< やってみよう！ >

< あなたに託された JSON >

•あとは返ってきた JSON を好きなように料理してく
ださい。
< あなたに託された JSON >

< JavaScript ライブラリを使う >

•Movable Type Data API SDK library
https://github.com/movabletype/Documentation/wiki/Javascript-library
•Data APIを使ってみる（その1） - The blog of
H.Fujimoto
http://www.h-fj.com/blog/archives/2013/07/12-091725.php
< JavaScript ライブラリを使う >

< jQuery.ajax() で扱ってみる >

•デモ
•https://gist.github.com/tinybeans/6138355
< jQuery.ajax() で扱ってみる >

< プラグインで拡張する >

•デフォルトのままだとカテゴリやタグは検索できな
い。
•簡単なプラグインで拡張できる。
< プラグインで拡張する >

< category, tag パラメータを追加 >

name: MoreSearch
version: 1.00
callbacks:
data_api_pre_load_filtered_list.entry: |
sub {
my ($cb, $app, $filter, $options) = @_;
return 1 if exists $options->{total};
for my $key (qw(tag category)) {
if (my $value = $app->param($key)) {
$filter->append_item({
'type' => $key,
'args' => {
'string' => $value,
'option' => 'contains',
}
});
}
}
}
< category, tag パラメータを追加 >

Data API の使いどころ

•スマホアプリ？

•Webサイトでダイナミックに表示させる部分？
→DynamicMTML との棲み分け

•Webサイトでダイナミックに表示させる部分？
→DynamicMTML との棲み分け
•mt-search.cgi に変わる検索？

JSON、検索とくれば…

ﬂexibleSearch.js

•あらかじめ作成しておいた JSON ファイルを
検索することにより、柔軟で高速な Ajax 検索
を実現する jQuery プラグイン
•ページ送りや検索項目の絞り込みなどにも対応
ﬂexibleSearch.js

•PAKUTASO/ぱくたそ-WEB制作向けの無料写
真素材/商用可 http://www.pakutaso.com/
ﬂexibleSearch.js

ﬂexibleSearch.js
< 新しくなります >

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

ﬂexibleSearch.js
< ファイルを読み込む >

ﬂexibleSearch.js
< ファイルを読み込む >
•jquery.js
•mustache.js
•ﬂexibleSearch.js

ﬂexibleSearch.js
< 検索用 JSON を作る >

•ﬂexibleSearch.js で読み込む JSON を
Movable Type で出力する
http://www.tinybeans.net/blog/2010/12/22-230131.html
ﬂexibleSearch.js

{"items":[
<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{keyword}">,<mt:entryKeywords>,</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>
]}
ﬂexibleSearch.js

ﬂexibleSearch.js
< divを2つ用意する >

•検索フォームを入れる div#fs-search
•検索結果を入れる div#fs-result
ﬂexibleSearch.js
< divを2つ用意する >

<div id="fs-search"></div>
<div id="fs-result"></div>
<script type="text/javascript">
(function($){
$("#fs-search").flexibleSearch(options);
})(jQuery);
</script>
ﬂexibleSearch.js
< 実行する >

ﬂexibleSearch.js
< ドキュメント >

ﬂexibleSearch.js
< ドキュメント >
•詳細は後日公開するドキュメント参照

ﬂexibleSearch.js
< 使ってみる >

ﬂexibleSearch.js
< 使ってみる >
•デモ

ﬂexibleSearch.js
+
Data API

ﬂexibleSearch.js + Data API
< Data API に切り替える >

ﬂexibleSearch.js + Data API
< Data API に切り替える >
デモ

MTAppjQuery

MTAppjQueryとは

MTAppjQueryとは
•読み方（えむてぃーあっぷじぇぃくえりー）
•Movable Type 5 の管理画面を jQuery でカスタマ
イズするためのプラグイン
•Perl、YAML が不要、alt-tmpl より手軽
•日頃 MT のテンプレートやフロントエンドをやって
いるWebデザイナー・コーダーのためのプラグイン

MTAppjQuery
+
Data API

MTAppjQuery + Data API
< クイック編集機能を追加してみる >

•MTAppjQuery でダッシュボードウィジェット
を追加

を追加
•Data API で記事をインクリメントサーチで取得

を追加
•Data API で記事の情報を表示

を追加
•Data API で記事の情報を表示
•Data API で記事を更新

デモ

ご静聴ありがとう
ございました。
Update bit part, everyday!!
MT::Lover::bitpart

Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方

Recomendados

Recomendados

Más contenido relacionado

Similar a Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方

Similar a Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方 (10)

Más de bitpart

Más de bitpart (15)

Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方