View
3.281
Download
3
Category
Preview:
DESCRIPTION
MTDDC 2013 Tokyo
Citation preview
アジェンダ
•Data API の基本
•flexibleSearch( jQuery プラグイン)
•flexibleSearch + Data API•MTAppjQuery( Movable Type プラグイン)
•MTAppjQuery + Data API
Monday, August 5, 13
bit part 紹介
•柳谷真志(@mersy)、奥脇知宏(@tinybeans)
•2013年1月結成のユニット
•8月中「bit part 合同会社」設立予定
Monday, August 5, 13
bit part 紹介 / tinybeans
•奥脇知宏おくわきともひろ
•かたつむりくんのWWW
•Movable Type 5.1 プロの現場の仕事術(毎日コミュニケーションズ)
Monday, August 5, 13
bit part 紹介 / plugins
•flexibleSearch •MTAppjQuery
•MTML Completions
• compress modifieretc...
Monday, August 5, 13
bit part 紹介 / plugins
•flexibleSearch •MTAppjQuery
•MTML Completions
• compress modifieretc...
ドキュメント販売中!!http://bitpart.thebase.in/
Monday, August 5, 13
•ブログや記事などのデータの読み出しや更新などをREST/JSON方式のAPIで利用できます。
•API用のJavaScriptのライブラリーも提供されるので、ダイナミックなコンテンツの組み込みも容易になり、独自の管理アプリケーションの開発が可能となります。
Data API とは?
Monday, August 5, 13
•REST/JSON形式でMT内のデータを取得したり、操作したりできる
•Movable Typeの認証を利用して、公開されているデータ以外のデータも取得したり操作したりできる
•Movable Typeの画面をカスタマイズすることなく、独自のアプリケーションを開発することができる
Data API の特長
Monday, August 5, 13
•Data api entries list を使うhttps://github.com/movabletype/Documentation/wiki/data-api-entries-list
Data API で記事一覧を取得してみる
Monday, August 5, 13
•https://your-host/mt-data-api.cgi/v1/sites/{blog_id}/entries
Data API で記事一覧を取得してみる< URL >
Monday, August 5, 13
•https://your-host/mt-data-api.cgi/v1/sites/{blog_id}/entries
•your-host、{blog_id}部分をセット
Data API で記事一覧を取得してみる< URL >
Monday, August 5, 13
•search:検索ワード
•searchFields:searchパラメータのワードをどのフィールドから検索するか(デフォルト:title,body,more,keywords,excerpt,basename)
•status:記事のステータス(Draft=1、Publish=2、Review=3、Future=4、Spam=5)
• limit:表示件数
•offset:最初のいくつを除くか
Data API で記事一覧を取得してみる< パラメータ1 >
Monday, August 5, 13
• includeIds:含める記事のID
•excludeIds:除く記事のID
•sortBy:何でソートするか(authored_on、title、created_on、modified_on)
•sortOrder:ソート順(descend、ascend)
•maxComments、maxTrackbacks
•fields:どのフィールドの値を返してもらうか
Data API で記事一覧を取得してみる< パラメータ2 >
Monday, August 5, 13
•この中で意外と大切なのが「fields」
•fields を指定しないと記事全ての情報を含んだJSONが返ってくるので、場合によっては数MBになることもある
Data API で記事一覧を取得してみる< パラメータ3 >
Monday, August 5, 13
•「mtappjquery」を含む記事のタイトルとパーマリンクを取得
•http://your-host/mt/mt-data-api.cgi/v1/sites/2/entries?search=mtappjquery&fields=title,permalink
•デモ
Data API で記事一覧を取得してみる< やってみよう! >
Monday, August 5, 13
•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 ライブラリを使う >
Monday, August 5, 13
•デモ
•https://gist.github.com/tinybeans/6138355
Data API で記事一覧を取得してみる< jQuery.ajax() で扱ってみる >
Monday, August 5, 13
•デフォルトのままだとカテゴリやタグは検索できない。
•簡単なプラグインで拡張できる。
Data API で記事一覧を取得してみる< プラグインで拡張する >
Monday, August 5, 13
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 パラメータを追加 >
Monday, August 5, 13
•スマホアプリ?
•Webサイトでダイナミックに表示させる部分?→DynamicMTML との棲み分け
•mt-search.cgi に変わる検索?
Data API の使いどころ
Monday, August 5, 13
•スマホアプリ?
•Webサイトでダイナミックに表示させる部分?→DynamicMTML との棲み分け
•mt-search.cgi に変わる検索?
Data API の使いどころ
Monday, August 5, 13
•あらかじめ作成しておいた JSON ファイルを検索することにより、柔軟で高速な Ajax 検索を実現する jQuery プラグイン
•ページ送りや検索項目の絞り込みなどにも対応
flexibleSearch.js
Monday, August 5, 13
•PAKUTASO/ぱくたそ-WEB制作向けの無料写真素材/商用可 http://www.pakutaso.com/
flexibleSearch.js
Monday, August 5, 13
flexibleSearch.js< 新しくなります >
•レンダリングエンジンに mustache.js を使用
•設定が楽になりました
•コード量が半分になりました
•URLにパラメータを渡す普通の検索っぽくなりました
•検索する JSON をダイナミックに変更可能
Monday, August 5, 13
•flexibleSearch.js で読み込む JSON を Movable Type で出力するhttp://www.tinybeans.net/blog/2010/12/22-230131.html
flexibleSearch.js< 検索用 JSON を作る >
Monday, August 5, 13
{"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< 検索用 JSON を作る >
Monday, August 5, 13
•検索フォームを入れる div#fs-search
•検索結果を入れる div#fs-result
flexibleSearch.js< divを2つ用意する >
Monday, August 5, 13
<div id="fs-search"></div><div id="fs-result"></div>
<script type="text/javascript">(function($){ $("#fs-search").flexibleSearch(options);})(jQuery);</script>
flexibleSearch.js< 実行する >
Monday, August 5, 13
MTAppjQueryとは
•読み方(えむてぃーあっぷじぇぃくえりー)
•Movable Type 5 の管理画面を jQuery でカスタマイズするためのプラグイン
•Perl、YAML が不要、alt-tmpl より手軽
•日頃 MT のテンプレートやフロントエンドをやっているWebデザイナー・コーダーのためのプラグイン
Monday, August 5, 13
MTAppjQuery + Data API< クイック編集機能を追加してみる >
•MTAppjQuery でダッシュボードウィジェットを追加
•Data API で記事をインクリメントサーチで取得
Monday, August 5, 13
MTAppjQuery + Data API< クイック編集機能を追加してみる >
•MTAppjQuery でダッシュボードウィジェットを追加
•Data API で記事をインクリメントサーチで取得
•Data API で記事の情報を表示
Monday, August 5, 13
MTAppjQuery + Data API< クイック編集機能を追加してみる >
•MTAppjQuery でダッシュボードウィジェットを追加
•Data API で記事をインクリメントサーチで取得
•Data API で記事の情報を表示
•Data API で記事を更新
Monday, August 5, 13
Recommended