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

MT東京-09 Movable Type Meetup JSON