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

4,070 views

Published on

MTDDC 2013 Tokyo

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,070
On SlideShare
0
From Embeds
0
Number of Embeds
1,247
Actions
Shares
0
Downloads
10
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方 柳谷真志(@mersy)奥脇知宏(@tinybeans) Monday, August 5, 13
  2. 2. アジェンダ •Data API の基本 •flexibleSearch( jQuery プラグイン) •flexibleSearch + Data API •MTAppjQuery( Movable Type プラグイン) •MTAppjQuery + Data API Monday, August 5, 13
  3. 3. bit part 紹介 Monday, August 5, 13
  4. 4. bit part 紹介 •柳谷真志(@mersy)、奥脇知宏(@tinybeans) Monday, August 5, 13
  5. 5. bit part 紹介 •柳谷真志(@mersy)、奥脇知宏(@tinybeans) •2013年1月結成のユニット Monday, August 5, 13
  6. 6. bit part 紹介 •柳谷真志(@mersy)、奥脇知宏(@tinybeans) •2013年1月結成のユニット •8月中「bit part 合同会社」設立予定 Monday, August 5, 13
  7. 7. bit part 紹介 / mersy •柳谷真志 やなぎやまさし •linker、アイペアーズ(株) Monday, August 5, 13
  8. 8. bit part 紹介 / tinybeans •奥脇知宏 おくわきともひろ •かたつむりくんのWWW •Movable Type 5.1 プロの現場の仕事術 (毎日コミュニケーションズ) Monday, August 5, 13
  9. 9. bit part 紹介 / plugins •flexibleSearch •MTAppjQuery •MTML Completions •compress modifier etc... Monday, August 5, 13
  10. 10. bit part 紹介 / plugins •flexibleSearch •MTAppjQuery •MTML Completions •compress modifier etc... ドキュメント販売中!! http://bitpart.thebase.in/ Monday, August 5, 13
  11. 11. Data API の基本 Monday, August 5, 13
  12. 12. Data API の基本 MT6 はまだベータ版です。 あくまで現時点でのお話です。 Monday, August 5, 13
  13. 13. Data API とは? Monday, August 5, 13
  14. 14. •ブログや記事などのデータの読み出しや更新などを REST/JSON方式のAPIで利用できます。 •API用のJavaScriptのライブラリーも提供されるの で、ダイナミックなコンテンツの組み込みも容易に なり、独自の管理アプリケーションの開発が可能と なります。 Data API とは? Monday, August 5, 13
  15. 15. Data API の特長 Monday, August 5, 13
  16. 16. •REST/JSON形式でMT内のデータを取得したり、 操作したりできる •Movable Typeの認証を利用して、公開されている データ以外のデータも取得したり操作したりできる •Movable Typeの画面をカスタマイズすることな く、独自のアプリケーションを開発することができ る Data API の特長 Monday, August 5, 13
  17. 17. Data API で記事一覧を取得してみる Monday, August 5, 13
  18. 18. •Data api entries list を使う https://github.com/movabletype/Documentation/wiki/data-api-entries-list Data API で記事一覧を取得してみる Monday, August 5, 13
  19. 19. Data API で記事一覧を取得してみる < URL > Monday, August 5, 13
  20. 20. •https://your-host/mt-data-api.cgi/v1/sites/ {blog_id}/entries Data API で記事一覧を取得してみる < URL > Monday, August 5, 13
  21. 21. •https://your-host/mt-data-api.cgi/v1/sites/ {blog_id}/entries •your-host、{blog_id}部分をセット Data API で記事一覧を取得してみる < URL > Monday, August 5, 13
  22. 22. Data API で記事一覧を取得してみる < パラメータ1 > Monday, August 5, 13
  23. 23. •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
  24. 24. Data API で記事一覧を取得してみる < パラメータ2 > Monday, August 5, 13
  25. 25. •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
  26. 26. Data API で記事一覧を取得してみる < パラメータ3 > Monday, August 5, 13
  27. 27. •この中で意外と大切なのが「fields」 •fields を指定しないと記事全ての情報を含んだ JSONが返ってくるので、場合によっては数MBにな ることもある Data API で記事一覧を取得してみる < パラメータ3 > Monday, August 5, 13
  28. 28. Data API で記事一覧を取得してみる < やってみよう! > Monday, August 5, 13
  29. 29. •「mtappjquery」を含む記事のタイトルとパーマリ ンクを取得 •http://your-host/mt/mt-data-api.cgi/v1/sites/ 2/entries? search=mtappjquery&fields=title,permalink •デモ Data API で記事一覧を取得してみる < やってみよう! > Monday, August 5, 13
  30. 30. Data API で記事一覧を取得してみる < あなたに託された JSON > Monday, August 5, 13
  31. 31. •あとは返ってきた JSON を好きなように料理してく ださい。 Data API で記事一覧を取得してみる < あなたに託された JSON > Monday, August 5, 13
  32. 32. Data API で記事一覧を取得してみる < JavaScript ライブラリを使う > Monday, August 5, 13
  33. 33. •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 Data API で記事一覧を取得してみる < JavaScript ライブラリを使う > Monday, August 5, 13
  34. 34. Data API で記事一覧を取得してみる < jQuery.ajax() で扱ってみる > Monday, August 5, 13
  35. 35. •デモ •https://gist.github.com/tinybeans/6138355 Data API で記事一覧を取得してみる < jQuery.ajax() で扱ってみる > Monday, August 5, 13
  36. 36. Data API で記事一覧を取得してみる < プラグインで拡張する > Monday, August 5, 13
  37. 37. •デフォルトのままだとカテゴリやタグは検索できな い。 •簡単なプラグインで拡張できる。 Data API で記事一覧を取得してみる < プラグインで拡張する > Monday, August 5, 13
  38. 38. < category, tag パラメータを追加 > Monday, August 5, 13
  39. 39. 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 パラメータを追加 > Monday, August 5, 13
  40. 40. Data API の使いどころ Monday, August 5, 13
  41. 41. •スマホアプリ? Data API の使いどころ Monday, August 5, 13
  42. 42. •スマホアプリ? •Webサイトでダイナミックに表示させる部分? →DynamicMTML との棲み分け Data API の使いどころ Monday, August 5, 13
  43. 43. •スマホアプリ? •Webサイトでダイナミックに表示させる部分? →DynamicMTML との棲み分け •mt-search.cgi に変わる検索? Data API の使いどころ Monday, August 5, 13
  44. 44. •スマホアプリ? •Webサイトでダイナミックに表示させる部分? →DynamicMTML との棲み分け •mt-search.cgi に変わる検索? Data API の使いどころ Monday, August 5, 13
  45. 45. JSON、検索とくれば… Monday, August 5, 13
  46. 46. flexibleSearch.js Monday, August 5, 13
  47. 47. flexibleSearch.js Monday, August 5, 13
  48. 48. •あらかじめ作成しておいた JSON ファイルを 検索することにより、柔軟で高速な Ajax 検索 を実現する jQuery プラグイン •ページ送りや検索項目の絞り込みなどにも対応 flexibleSearch.js Monday, August 5, 13
  49. 49. flexibleSearch.js Monday, August 5, 13
  50. 50. •PAKUTASO/ぱくたそ-WEB制作向けの無料写 真素材/商用可 http://www.pakutaso.com/ flexibleSearch.js Monday, August 5, 13
  51. 51. flexibleSearch.js < 新しくなります > Monday, August 5, 13
  52. 52. flexibleSearch.js < 新しくなります > •レンダリングエンジンに mustache.js を使用 •設定が楽になりました •コード量が半分になりました •URLにパラメータを渡す普通の検索っぽくな りました •検索する JSON をダイナミックに変更可能 Monday, August 5, 13
  53. 53. flexibleSearch.js < ファイルを読み込む > Monday, August 5, 13
  54. 54. flexibleSearch.js < ファイルを読み込む > •jquery.js •mustache.js •flexibleSearch.js Monday, August 5, 13
  55. 55. flexibleSearch.js < 検索用 JSON を作る > Monday, August 5, 13
  56. 56. •flexibleSearch.js で読み込む JSON を Movable Type で出力する http://www.tinybeans.net/blog/2010/12/22-230131.html flexibleSearch.js < 検索用 JSON を作る > Monday, August 5, 13
  57. 57. {"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
  58. 58. flexibleSearch.js < divを2つ用意する > Monday, August 5, 13
  59. 59. •検索フォームを入れる div#fs-search •検索結果を入れる div#fs-result flexibleSearch.js < divを2つ用意する > Monday, August 5, 13
  60. 60. <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
  61. 61. flexibleSearch.js < ドキュメント > Monday, August 5, 13
  62. 62. flexibleSearch.js < ドキュメント > •詳細は後日公開するドキュメント参照 Monday, August 5, 13
  63. 63. flexibleSearch.js < 使ってみる > Monday, August 5, 13
  64. 64. flexibleSearch.js < 使ってみる > •デモ Monday, August 5, 13
  65. 65. flexibleSearch.js + Data API Monday, August 5, 13
  66. 66. flexibleSearch.js + Data API < Data API に切り替える > Monday, August 5, 13
  67. 67. flexibleSearch.js + Data API < Data API に切り替える > デモ Monday, August 5, 13
  68. 68. MTAppjQuery Monday, August 5, 13
  69. 69. MTAppjQueryとは Monday, August 5, 13
  70. 70. MTAppjQueryとは •読み方(えむてぃーあっぷじぇぃくえりー) •Movable Type 5 の管理画面を jQuery でカスタマ イズするためのプラグイン •Perl、YAML が不要、alt-tmpl より手軽 •日頃 MT のテンプレートやフロントエンドをやって いるWebデザイナー・コーダーのためのプラグイン Monday, August 5, 13
  71. 71. MTAppjQuery + Data API Monday, August 5, 13
  72. 72. MTAppjQuery + Data API < クイック編集機能を追加してみる > Monday, August 5, 13
  73. 73. MTAppjQuery + Data API < クイック編集機能を追加してみる > •MTAppjQuery でダッシュボードウィジェット を追加 Monday, August 5, 13
  74. 74. MTAppjQuery + Data API < クイック編集機能を追加してみる > •MTAppjQuery でダッシュボードウィジェット を追加 •Data API で記事をインクリメントサーチで取得 Monday, August 5, 13
  75. 75. MTAppjQuery + Data API < クイック編集機能を追加してみる > •MTAppjQuery でダッシュボードウィジェット を追加 •Data API で記事をインクリメントサーチで取得 •Data API で記事の情報を表示 Monday, August 5, 13
  76. 76. MTAppjQuery + Data API < クイック編集機能を追加してみる > •MTAppjQuery でダッシュボードウィジェット を追加 •Data API で記事をインクリメントサーチで取得 •Data API で記事の情報を表示 •Data API で記事を更新 Monday, August 5, 13
  77. 77. MTAppjQuery + Data API < クイック編集機能を追加してみる > Monday, August 5, 13
  78. 78. MTAppjQuery + Data API < クイック編集機能を追加してみる > デモ Monday, August 5, 13
  79. 79. ご静聴ありがとう ございました。 Update bit part, everyday!! MT::Lover::bitpart Monday, August 5, 13

×