mt東京-09 movable type meetup json
TRANSCRIPT
Movable Type Meetup JSONJSONを活用したデータ管理の効率化とパフォーマンスアップ
2015-01-20MT東京-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 JSONJSONを活用したデータ管理の効率化とパフォーマンスアップ
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 でいいじゃん
MTAppJSONTablesince 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!!