mt東京-09 movable type meetup json

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!!