Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

2,793 views

Published on

MTDDC Meetup TOKYO 2014 でのプレゼン資料です。

Published in: Internet

Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

  1. 1. Movable Type Meetup JSON JSONを活用したデータ管理の効率化とパフォーマンスアップ 2014-11-29 MTDDC Meetup TOKYO 2014 奥脇知宏(@tinybeans) 柳谷真志(@mersy)
  2. 2. bit part 紹介 • 奥脇知宏(@tinybeans)、柳谷真志(@mersy) • Movable Type、Movable Type Cloud、PowerCMS を利用した構築がメイン業務 • Six Apart の ProNet、Alfasado の PowerCMS Partner Pro
  3. 3. bit part 紹介 / mersy • 柳谷真志(やなぎやまさし) • ディレクション、進行管理、MTML テンプレート作成 • アイ・ペアーズ株式会社
  4. 4. bit part 紹介 / tinybeans • 奥脇知宏(おくわきともひろ) • MTAppjQuery等のプラグイン 開発、MTML、その他フロント エンドやバックエンド少々 • かたつむりくんのWWW • Movable Type 5.1 プロの現場の仕事術
  5. 5. bit part 紹介 • http://bit-part.net • Movable Type 6 本格活用ガイドブック 2013年11月30日発売
  6. 6. bit part 紹介 • MTAppjQuery • flexibleSearch • MTML Completions • Data API Extend Search • その他のMTプラグイン
  7. 7. Movable Type Meetup JSON JSONを活用したデータ管理の効率化とパフォーマンスアップ
  8. 8. Movable Type 6 • Data API • Chart API • 非公開日指定 • Google Analytics との連携 • メッセージセンター
  9. 9. Movable Type 6 • Data API • Chart API • 非公開日指定 • Google Analytics との連携 • メッセージセンター
  10. 10. Movable Type meets JSON
  11. 11. What’s JSON? • JSON 【 JavaScript Object Notation 】 • JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語 の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースと しているが、JSONはJavaScript専用のデータ形式では決してなく、様々な ソフトウェアやプログラミング言語間におけるデータの受け渡しに使え るよう設計されている。 http://ja.wikipedia.org/wiki/JavaScript_Object_Notation
  12. 12. What’s JSON? • JavaScriptにおけるオブジェクトの表記法を応用したデータ形式。JSONで 表記されたデータは、JavaScript上ではコードとして実行するだけで読み 込みが完了する。 JSONでは、データ全体を配列またはJavaScriptにおけるオブジェクト (キーと値のペアを列挙した構造体)として記述する。値として利用でき るデータ型は整数型、浮動小数点数型、文字列型、ブール型(真偽値)、 null(値無し)、配列、オブジェクトである。 http://e-words.jp/w/JSON.html
  13. 13. What’s JSON? { "items": [ { "nickname": "tinybeans", "firstname": "Tomohiro", "lastname": "Okuwaki" }, { "nickname": "mersy", "firstname": "Masashi", "lastname": "Yanagiya", } ] }
  14. 14. Data API on Movable Type 6 • Movable Type meets JSON • Movable Type に格納されたデータを JSON で受け渡し • マルチデバイスのバックエンド • JavaScript メインのアプリケーション (Angular などのフレームワーク、 mastache などのテンプレー トエンジン)
  15. 15. Data API on Movable Type 6
  16. 16. Data API on Movable Type 6 • Data API は記事単位の塊のデータからデータを取得して JSON に変換 • タイトル、本文、続き、概要、キーワード、タグ、そしてカ スタムフィールド・・・
  17. 17. だったらデータも JSON で いいじゃん
  18. 18. MTAppJSONTable since MTAppjQuery v1.6.0
  19. 19. Movable Type Dashboard meets JSON
  20. 20. MTAppJSONTable • Movable Type の管理画面と JSON の出会い • JSON でデータを管理 • CSV との連携とか
  21. 21. MTAppJSONTable • MTAppJSONTableとは? 概要欄や複数行テキストのカスタムフィールドを表形式の入 力欄に変換して、その表に入力された値をJSON文字列にして 元のテキストエリアに保存する • demo
  22. 22. JSON to MTML • JSON文字列をMTのテンプレートで扱うには? => MTタグで扱えるMTの変数に変換する必要がある • json_decode モディファイア(MTAppjQuery) • Serializerプラグイン http://www.h-fj.com/blog/archives/2014/07/29-092632.php • JSON2MTML https://github.com/alfasado/mt-plugin-json2mtml
  23. 23. JSON to JavaScript and PHP • もちろん静的出力だけでなく動的にも扱える • JavaScript => JSON.parse(str); • PHP => json_decode(str);
  24. 24. Serializer • MTAppjQueryがない場合を想定して、先程のMTAppJSONTable のデモと同じJSON文字列を「続き」欄で持っているとする • demo
  25. 25. Movable Type Dashboard meets JSON • 管理画面で JSON
  26. 26. Movable Type Dashboard meets JSON • 他のウェブサービスのAPIから JSON を取得して連携 => Google Map API etc. • でもやっぱりData APIとの連携 => Movable Type Data API
  27. 27. Movable Type Dashboard meets JSON • 管理画面とData APIの連携 => 例えば関連記事を結びつけたい
  28. 28. Movable Type Dashboard meets JSON • 今までは、 => 手動で関連付けたい記事のIDをカスタムフィールドに保存 or => プラグインを開発して実装
  29. 29. Movable Type Dashboard meets JSON • Data API を使えばフロントエンドの知識だけで実装可能に • jQuery.ajax, listEntries • MTAppListing(v1.7.0追加予定)
  30. 30. jQuery.ajax or listEntries • Ajaxで記事一覧を取得 → 選択 → IDをセット • demo
  31. 31. MTAppListing • demo
  32. 32. MTAppListing • 関連記事を選択 • 記事を選択してグルーピング • 外部のAPIから情報を取得して関連付け
  33. 33. JSONを POST してもいいよね?
  34. 34. POST from Movable Type • 取得だけじゃなくて他の API に POST • Slackにポスト • Backlogにポスト • Trelloにポスト
  35. 35. Post to Slack
  36. 36. Post to Slack • Slackを使った公開承認フローを実装 • demo
  37. 37. すべての要は JSON
  38. 38. Enjoy Movable Type and JSON !
  39. 39. ご静聴ありがとう ございました。 Update bit part, everyday!! MT::Lover::bitpart

×