47
Movable Type Meetup JSON JSONを活用したデータ管理の効率化とパフォーマンスアップ 2014-11-29 MTDDC Meetup TOKYO 2014 奥脇知宏(@tinybeans柳谷真志(@mersy

Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

  • Upload
    bitpart

  • View
    1.497

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

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

2014-11-29MTDDC Meetup TOKYO 2014

奥脇知宏(@tinybeans) 柳谷真志(@mersy)

Page 2: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

bit part 紹介

•奥脇知宏(@tinybeans)、柳谷真志(@mersy)•Movable Type、Movable Type Cloud、PowerCMSを利用した構築がメイン業務

• Six Apart の ProNet、Alfasado の PowerCMS Partner Pro

Page 3: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

bit part 紹介 / mersy

•柳谷真志(やなぎやまさし)•ディレクション、進行管理、MTMLテンプレート作成

•アイ・ペアーズ株式会社

Page 4: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

bit part 紹介 / tinybeans•奥脇知宏(おくわきともひろ)•MTAppjQuery等のプラグイン開発、MTML、その他フロントエンドやバックエンド少々

•かたつむりくんのWWW•Movable Type 5.1 プロの現場の仕事術

Page 5: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

bit part 紹介

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

Page 6: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

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

Page 7: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

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

Page 8: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type 6

• Data API

• Chart API

• 非公開日指定

• Google Analytics との連携

• メッセージセンター

Page 9: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type 6

• Data API

• Chart API

• 非公開日指定

• Google Analytics との連携

• メッセージセンター

Page 10: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type meets JSON

Page 11: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

What’s JSON?

• JSON 【 JavaScript Object Notation 】

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

Page 12: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

What’s JSON?

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

Page 13: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

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

Page 14: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 15: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Data API on Movable Type 6

• Movable Type meets JSON

• Movable Type に格納されたデータを JSON で受け渡し

• マルチデバイスのバックエンド

• JavaScript メインのアプリケーション(Angular などのフレームワーク、 mastache などのテンプレートエンジン)

Page 16: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Data API on Movable Type 6

Page 17: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Data API on Movable Type 6

• Data API は記事単位の塊のデータからデータを取得して JSON

に変換

• タイトル、本文、続き、概要、キーワード、タグ、そしてカスタムフィールド・・・

Page 18: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

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

Page 19: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 20: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MTAppJSONTablesince MTAppjQuery v1.6.0

Page 21: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

Page 22: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 23: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 24: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MTAppJSONTable

• Movable Type の管理画面と JSON の出会い

• JSON でデータを管理

• CSV との連携とか

Page 25: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MTAppJSONTable

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

• demo

Page 26: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

JSON to MTML

• JSON文字列をMTのテンプレートで扱うには?=> MTタグで扱えるMTの変数に変換する必要がある

• json_decode モディファイア(MTAppjQuery)

• Serializerプラグインhttp://www.h-fj.com/blog/archives/2014/07/29-092632.php

• JSON2MTMLhttps://github.com/alfasado/mt-plugin-json2mtml

Page 27: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

JSON to JavaScript and PHP

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

• PHP => json_decode(str);

Page 28: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Serializer

• MTAppjQueryがない場合を想定して、先程のMTAppJSONTable

のデモと同じJSON文字列を「続き」欄で持っているとする

• demo

Page 29: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

• 管理画面で JSON

Page 30: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

• 他のウェブサービスのAPIから JSON を取得して連携=> Google Map API etc.

• でもやっぱりData APIとの連携=> Movable Type Data API

Page 31: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 32: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

• 管理画面とData APIの連携=> 例えば関連記事を結びつけたい

Page 33: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

• 今までは、=> 手動で関連付けたい記事のIDをカスタムフィールドに保存 or

=> プラグインを開発して実装

Page 34: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Movable Type Dashboard meets JSON

• Data API を使えばフロントエンドの知識だけで実装可能に

• jQuery.ajax, listEntries

• MTAppListing(v1.7.0追加予定)

Page 35: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

jQuery.ajax or listEntries

• Ajaxで記事一覧を取得 → 選択 → IDをセット

• demo

Page 36: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MTAppListing

• demo

Page 37: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MTAppListing

• 関連記事を選択

• 記事を選択してグルーピング

• 外部のAPIから情報を取得して関連付け

Page 38: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

JSONをPOST してもいいよね?

Page 39: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 40: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

POST from Movable Type

• 取得だけじゃなくて他の API に POST

• Slackにポスト

• Backlogにポスト

• Trelloにポスト

Page 41: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Post to Slack

Page 42: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 43: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Page 44: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Post to Slack

• Slackを使った公開承認フローを実装

• demo

Page 45: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

すべての要は JSON

Page 46: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

Enjoy Movable Type and JSON !

Page 47: Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

ご静聴ありがとうございました。

MT::Lover::bitpart

Update bit part, everyday!!