1. Movable Type Meetup JSON
JSONを活用したデータ管理の効率化とパフォーマンスアップ
2014-11-29
MTDDC Meetup TOKYO 2014
奥脇知宏（@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プラグイン

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

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

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

10. Movable Type meets JSON

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

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

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

16. Data API on Movable Type 6

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

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

20. MTAppJSONTable
since MTAppjQuery v1.6.0

21. Movable Type Dashboard
meets JSON

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

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

26. 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

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

28. Serializer
• MTAppjQueryがない場合を想定して、先程のMTAppJSONTable
のデモと同じJSON文字列を「続き」欄で持っているとする
• demo

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

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

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

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

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

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

36. MTAppListing
• demo

37. MTAppListing
• 関連記事を選択
• 記事を選択してグルーピング
• 外部のAPIから情報を取得して関連付け

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

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

41. Post to Slack

44. Post to Slack
• Slackを使った公開承認フローを実装
• demo

45. すべての要は JSON

46. Enjoy Movable Type and JSON !

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