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

Data API とflexibleSearch、MTAppjQuery

で広がるMT6の使い方

柳谷真志（@mersy）奥脇知宏（@tinybeans）

Monday, August 5, 13

アジェンダ

•Data API の基本

•flexibleSearch（ jQuery プラグイン）

•flexibleSearch + 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

•flexibleSearch •MTAppjQuery

•MTML Completions

• compress modifieretc...


bit part 紹介 / plugins

•flexibleSearch •MTAppjQuery

•MTML Completions

• compress modifieretc...

ドキュメント販売中！！http://bitpart.thebase.in/


http://bitpart.thebase.in

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

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


https://github.com/movabletype/Documentation/wiki/data-api-entries-list

https://github.com/movabletype/Documentation/wiki/data-api-entries-list

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


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



https://your-host/mt-data-api.cgi/v1/sites/%7B




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

•your-host、{blog_id}部分をセット







Data API で記事一覧を取得してみる< パラメータ1 >


•search：検索ワード

•searchFields：searchパラメータのワードをどのフィールドから検索するか（デフォルト：title,body,more,keywords,excerpt,basename）

•status：記事のステータス（Draft=1、Publish=2、Review=3、Future=4、Spam=5）

• limit：表示件数

•offset：最初のいくつを除くか





• includeIds：含める記事のID

•excludeIds：除く記事のID

•sortBy：何でソートするか（authored_on、title、created_on、modified_on）

•sortOrder：ソート順（descend、ascend）

•maxComments、maxTrackbacks

•fields：どのフィールドの値を返してもらうか





•この中で意外と大切なのが「fields」

•fields を指定しないと記事全ての情報を含んだJSONが返ってくるので、場合によっては数MBになることもある



Data API で記事一覧を取得してみる< やってみよう！ >


•「mtappjquery」を含む記事のタイトルとパーマリンクを取得

•http://your-host/mt/mt-data-api.cgi/v1/sites/2/entries?search=mtappjquery&fields=title,permalink

•デモ

Data API で記事一覧を取得してみる< やってみよう！ >


Data API で記事一覧を取得してみる< あなたに託された JSON >


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

Data API で記事一覧を取得してみる< あなたに託された JSON >


Data API で記事一覧を取得してみる< JavaScript ライブラリを使う >


•Movable Type Data API SDK libraryhttps://github.com/movabletype/Documentation/wiki/Javascript-library

•Data APIを使ってみる（その1） - The blog of H.Fujimotohttp://www.h-fj.com/blog/archives/2013/07/12-091725.php

Data API で記事一覧を取得してみる< JavaScript ライブラリを使う >


https://github.com/movabletype/Documentation/wiki/Javascript-library

https://github.com/movabletype/Documentation/wiki/Javascript-library

http://www.h-fj.com/blog/archives/2013/07/12-091725.php

http://www.h-fj.com/blog/archives/2013/07/12-091725.php

Data API で記事一覧を取得してみる< jQuery.ajax() で扱ってみる >


•デモ

•https://gist.github.com/tinybeans/6138355

Data API で記事一覧を取得してみる< jQuery.ajax() で扱ってみる >


https://gist.github.com/tinybeans/6138355

https://gist.github.com/tinybeans/6138355

Data API で記事一覧を取得してみる< プラグインで拡張する >


•デフォルトのままだとカテゴリやタグは検索できない。

•簡単なプラグインで拡張できる。

Data API で記事一覧を取得してみる< プラグインで拡張する >


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


name: MoreSearchversion: 1.00callbacks: 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 との棲み分け





•mt-search.cgi に変わる検索？





•mt-search.cgi に変わる検索？



JSON、検索とくれば…


flexibleSearch.js


flexibleSearch.js


•あらかじめ作成しておいた JSON ファイルを検索することにより、柔軟で高速な Ajax 検索を実現する jQuery プラグイン

•ページ送りや検索項目の絞り込みなどにも対応

flexibleSearch.js


flexibleSearch.js


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

flexibleSearch.js


http://www.pakutaso.com

http://www.pakutaso.com

flexibleSearch.js< 新しくなります >


flexibleSearch.js< 新しくなります >

•レンダリングエンジンに mustache.js を使用

•設定が楽になりました

•コード量が半分になりました

•URLにパラメータを渡す普通の検索っぽくなりました

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


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


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

• jquery.js•mustache.js

•flexibleSearch.js


flexibleSearch.js< 検索用 JSON を作る >


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



http://www.tinybeans.net/blog/2010/12/22-230131.html

http://www.tinybeans.net/blog/2010/12/22-230131.html

{"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>]}



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


•検索フォームを入れる div#fs-search

•検索結果を入れる div#fs-result

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


<div id="fs-search"></div><div id="fs-result"></div>

<script type="text/javascript">(function($){ $("#fs-search").flexibleSearch(options);})(jQuery);</script>

flexibleSearch.js< 実行する >


flexibleSearch.js< ドキュメント >


flexibleSearch.js< ドキュメント >

•詳細は後日公開するドキュメント参照


flexibleSearch.js< 使ってみる >


flexibleSearch.js< 使ってみる >

•デモ


flexibleSearch.js+

Data API


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


flexibleSearch.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::bitpartMonday, August 5, 13

Documents

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