【MT東京-09】MTDDC Meetup TOKYO 2014 again vol.1のスライドです

1. Movable Type Meetup JSON
JSONを活用したデータ管理の効率化とパフォーマンスアップ
2015-01-20
MT東京-09
奥脇知宏（@tinybeans） 柳谷真志（@mersy）

2. bit part 紹介
• 奥脇知宏（@tinybeans）、柳谷真志（@mersy）
• Movable Type、Movable Type Cloud、PowerCMS
を利用した構築がメイン業務
• Six Apart の ProNet、Alfasado の PowerCMS Partner
Pro

3. bit part 紹介 / mersy
• 柳谷真志（やなぎやまさし）
• ディレクション、進行管理、MTML
テンプレート作成
• アイ・ペアーズ株式会社

4. bit part 紹介 / tinybeans
• 奥脇知宏（おくわきともひろ）
• MTAppjQuery等のプラグイン
開発、MTML、その他フロント
エンドやバックエンド少々
• かたつむりくんのWWW
• Movable Type 5.1 プロの現場の仕事術

5. bit part 紹介
• http://bit-part.net
• Movable Type 6
本格活用ガイドブック
2013年11月30日発売

6. bit part 紹介
• MTAppjQuery
• flexibleSearch
• MTML Completions
• Data API Extend Search
• その他のMTプラグイン

9. Movable Type Meetup JSON
JSONを活用したデータ管理の効率化とパフォーマンスアップ

10. Movable Type 6
• Data API
• Chart API
• 非公開日指定
• Google Analytics との連携
• メッセージセンター

11. Movable Type 6
• Data API
• Chart API
• 非公開日指定
• Google Analytics との連携
• メッセージセンター

12. Movable Type meets JSON

13. What’s JSON?
• JSON 【 JavaScript Object Notation 】
• JSON（ジェイソン、JavaScript Object Notation）は軽量なデータ記述言語
の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースと
しているが、JSONはJavaScript専用のデータ形式では決してなく、様々な
ソフトウェアやプログラミング言語間におけるデータの受け渡しに使え
るよう設計されている。
http://ja.wikipedia.org/wiki/JavaScript_Object_Notation

14. What’s JSON?
• JavaScriptにおけるオブジェクトの表記法を応用したデータ形式。JSONで
表記されたデータは、JavaScript上ではコードとして実行するだけで読み
込みが完了する。
JSONでは、データ全体を配列またはJavaScriptにおけるオブジェクト
(キーと値のペアを列挙した構造体)として記述する。値として利用でき
るデータ型は整数型、浮動小数点数型、文字列型、ブール型(真偽値)、
null(値無し)、配列、オブジェクトである。
http://e-words.jp/w/JSON.html

15. What’s JSON?
{
"items": [
{
"nickname": "tinybeans",
"firstname": "Tomohiro",
"lastname": "Okuwaki"
},
{
"nickname": "mersy",
"firstname": "Masashi",
"lastname": "Yanagiya"
}
]
}

17. Data API on Movable Type 6
• Movable Type meets JSON
• Movable Type に格納されたデータを JSON で受け渡し
• マルチデバイスのバックエンド
• JavaScript メインのアプリケーション
（Angular などのフレームワーク、 mastache などのテンプレー
トエンジン）

18. Data API on Movable Type 6

19. Data API on Movable Type 6
• Data API は記事単位の塊のデータからデータを取得して JSON
に変換
• タイトル、本文、続き、概要、キーワード、タグ、そしてカ
スタムフィールド・・・

20. だったらデータも JSON で
いいじゃん

22. MTAppJSONTable
since MTAppjQuery v1.6.0

23. Movable Type Dashboard
meets JSON

26. MTAppJSONTable
• Movable Type の管理画面と JSON の出会い
• JSON でデータを管理
• CSV との連携とか

27. MTAppJSONTable
• MTAppJSONTableとは？
概要欄や複数行テキスト（つまり <textarea>）のカスタム
フィールドを表形式の入力欄に変換して、その表に入力され
た値をJSON文字列にして元のテキストエリアに保存する

28. MTAppJSONTable
• ヘッダーが上または左にあるパターンの表に対応
• 列または行の追加が可能
• 行のドラッグアンドドロップによる並べ替えが可能（v1.7.0）
• セルの結合が可能（v1.7.0）
• demo 1

29. 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
• demo 2（json_decode と Serializer の比較）

30. JSON to JavaScript and PHP
• もちろん静的出力だけでなく JavaScript や PHP で手軽に動的
にも扱える
• JavaScript => JSON.parse(str);
• PHP => json_decode(str);
• demo 3

31. Movable Type Dashboard
meets JSON
• 管理画面で JSON

32. Movable Type Dashboard
meets JSON
• 他のウェブサービスのAPIから JSON を取得して連携
=> Google Map API etc.
• でもやっぱりData APIとの連携
=> Movable Type Data API

34. Movable Type Dashboard
meets JSON
• 管理画面とData APIの連携
=> 例えば関連記事を結びつけたい

35. Movable Type Dashboard
meets JSON
• 今までは、
=> 手動で関連付けたい記事のIDをカスタムフィールドに保存
or
=> プラグインを開発して実装

36. Movable Type Dashboard
meets JSON
• Data API を使えばフロントエンドの知識だけで実装可能に
• jQuery.ajax, listEntries
• MTAppListing（ v1.7.0 ）

37. jQuery.ajax or listEntries
• Ajaxで記事一覧を取得 → 選択 → IDをセット
• demo 4

38. MTAppListing
• JSON を読み込んでリストアップし、その一覧から選択する事
ができます。
• Data API や外部の API から取得した JSON の情報を記事に関連
付けたりすることができます。

39. MTAppListing
• 関連記事を選択したり、記事などを複数選択して記事セット
などを作る
• 外部のAPIから情報を取得して関連付け
• demo（動画）

40. JSONを
POST してもいいよね？

42. POST from Movable Type
• 取得だけじゃなくて他の API に POST
• Slackにポスト
• Backlogにポスト
• Trelloにポスト

43. Post to Slack

46. Post to Slack
• Slackを使った公開承認フローを実装
• demo（動画）

47. すべての要は JSON

48. Enjoy Movable Type and JSON !

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