SlideShare a Scribd company logo
1 of 47
Download to read offline
Movable Type Meetup JSON 
JSONを活用したデータ管理の効率化とパフォーマンスアップ 
2014-11-29 
MTDDC Meetup TOKYO 2014 
奥脇知宏(@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", 
} 
] 
}
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
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 で 
いいじゃん
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
MTAppJSONTable 
since MTAppjQuery v1.6.0
Movable Type Dashboard 
meets JSON
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
MTAppJSONTable 
• Movable Type の管理画面と JSON の出会い 
• JSON でデータを管理 
• CSV との連携とか
MTAppJSONTable 
• MTAppJSONTableとは? 
概要欄や複数行テキストのカスタムフィールドを表形式の入 
力欄に変換して、その表に入力された値をJSON文字列にして 
元のテキストエリアに保存する 
• demo
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
JSON to JavaScript and PHP 
• もちろん静的出力だけでなく動的にも扱える 
• JavaScript => JSON.parse(str); 
• PHP => json_decode(str);
Serializer 
• MTAppjQueryがない場合を想定して、先程のMTAppJSONTable 
のデモと同じJSON文字列を「続き」欄で持っているとする 
• demo
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 Meetup JSON - MTDDC Meetup TOKYO 2014
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
MTAppListing 
• demo
MTAppListing 
• 関連記事を選択 
• 記事を選択してグルーピング 
• 外部のAPIから情報を取得して関連付け
JSONを 
POST してもいいよね?
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
POST from Movable Type 
• 取得だけじゃなくて他の API に POST 
• Slackにポスト 
• Backlogにポスト 
• Trelloにポスト
Post to Slack
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014
Post to Slack 
• Slackを使った公開承認フローを実装 
• demo
すべての要は JSON
Enjoy Movable Type and JSON !
ご静聴ありがとう 
ございました。 
Update bit part, everyday!! 
MT::Lover::bitpart

More Related Content

What's hot

20140416 Movable Type Seminar
20140416 Movable Type Seminar20140416 Movable Type Seminar
20140416 Movable Type SeminarSix Apart
 
月間 250 億 imps 配信するために fluct が考えていること!
月間 250 億 imps 配信するために fluct が考えていること!月間 250 億 imps 配信するために fluct が考えていること!
月間 250 億 imps 配信するために fluct が考えていること!MasamichiIdeue
 
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerBlog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerNobuaki Aoki
 
MT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWSMT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWSYuji Takayama
 
20140120 Movable Type Seminar
20140120 Movable Type Seminar20140120 Movable Type Seminar
20140120 Movable Type SeminarSix Apart
 
20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handsonSix Apart
 
20140908 Movable Type Seminar
20140908 Movable Type Seminar20140908 Movable Type Seminar
20140908 Movable Type SeminarSix Apart
 
20140524 hands on_upload
20140524 hands on_upload20140524 hands on_upload
20140524 hands on_uploadSix Apart
 
詳説 Data api mtddc 拡張版 v3対応
詳説 Data api mtddc 拡張版   v3対応詳説 Data api mtddc 拡張版   v3対応
詳説 Data api mtddc 拡張版 v3対応Yuji Takayama
 
MTCafe sapporo#4
MTCafe sapporo#4MTCafe sapporo#4
MTCafe sapporo#4bitpart
 
WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)Hajime Fujimoto
 
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由CMSとして選択肢のひとつ「Movable Type」をおすすめする理由
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由Masashi Hisatsugu
 
20131005 mtddc hokkaido
20131005 mtddc hokkaido20131005 mtddc hokkaido
20131005 mtddc hokkaidobitpart
 
20140903 Movable Type Seminar
20140903 Movable Type Seminar20140903 Movable Type Seminar
20140903 Movable Type SeminarSix Apart
 
モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方Yuya Matsushima
 
Movable Type+AWSでECサイトを構築してわかったこと
Movable Type+AWSでECサイトを構築してわかったことMovable Type+AWSでECサイトを構築してわかったこと
Movable Type+AWSでECサイトを構築してわかったことMakoto Tajima
 
Movable type seminar_20121204
Movable type seminar_20121204Movable type seminar_20121204
Movable type seminar_20121204Six Apart
 
Ad tech 20121030
Ad tech 20121030Ad tech 20121030
Ad tech 20121030ajiyoshi
 

What's hot (20)

20140416 Movable Type Seminar
20140416 Movable Type Seminar20140416 Movable Type Seminar
20140416 Movable Type Seminar
 
月間 250 億 imps 配信するために fluct が考えていること!
月間 250 億 imps 配信するために fluct が考えていること!月間 250 億 imps 配信するために fluct が考えていること!
月間 250 億 imps 配信するために fluct が考えていること!
 
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerBlog=pelican+bit bucket+docker
Blog=pelican+bit bucket+docker
 
MT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWSMT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWS
 
20140120 Movable Type Seminar
20140120 Movable Type Seminar20140120 Movable Type Seminar
20140120 Movable Type Seminar
 
20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson
 
20140908 Movable Type Seminar
20140908 Movable Type Seminar20140908 Movable Type Seminar
20140908 Movable Type Seminar
 
20140524 hands on_upload
20140524 hands on_upload20140524 hands on_upload
20140524 hands on_upload
 
詳説 Data api mtddc 拡張版 v3対応
詳説 Data api mtddc 拡張版   v3対応詳説 Data api mtddc 拡張版   v3対応
詳説 Data api mtddc 拡張版 v3対応
 
MTCafe sapporo#4
MTCafe sapporo#4MTCafe sapporo#4
MTCafe sapporo#4
 
WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)WordPress on movable type(WordCamp Kobe 2013)
WordPress on movable type(WordCamp Kobe 2013)
 
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由CMSとして選択肢のひとつ「Movable Type」をおすすめする理由
CMSとして選択肢のひとつ「Movable Type」をおすすめする理由
 
20131005 mtddc hokkaido
20131005 mtddc hokkaido20131005 mtddc hokkaido
20131005 mtddc hokkaido
 
20140903 Movable Type Seminar
20140903 Movable Type Seminar20140903 Movable Type Seminar
20140903 Movable Type Seminar
 
tansuの紹介
tansuの紹介tansuの紹介
tansuの紹介
 
モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方モダンすぎる静的サイトの作り方
モダンすぎる静的サイトの作り方
 
Movable Type+AWSでECサイトを構築してわかったこと
Movable Type+AWSでECサイトを構築してわかったことMovable Type+AWSでECサイトを構築してわかったこと
Movable Type+AWSでECサイトを構築してわかったこと
 
Movable type seminar_20121204
Movable type seminar_20121204Movable type seminar_20121204
Movable type seminar_20121204
 
イマドキのCMSトレンドからWeb運用を再考する
イマドキのCMSトレンドからWeb運用を再考するイマドキのCMSトレンドからWeb運用を再考する
イマドキのCMSトレンドからWeb運用を再考する
 
Ad tech 20121030
Ad tech 20121030Ad tech 20121030
Ad tech 20121030
 

Viewers also liked

MTを使った巨大トラフィックの捌き方
MTを使った巨大トラフィックの捌き方MTを使った巨大トラフィックの捌き方
MTを使った巨大トラフィックの捌き方Koji Ogata
 
Something Different for the Best Web Solution!
Something Different for the Best Web Solution!Something Different for the Best Web Solution!
Something Different for the Best Web Solution!純生 野田
 
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!純生 野田
 
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティングMTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング純生 野田
 
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!Yuji Takayama
 
Memcachedの仕組みと設定
Memcachedの仕組みと設定Memcachedの仕組みと設定
Memcachedの仕組みと設定Tatsuya Akashi
 

Viewers also liked (6)

MTを使った巨大トラフィックの捌き方
MTを使った巨大トラフィックの捌き方MTを使った巨大トラフィックの捌き方
MTを使った巨大トラフィックの捌き方
 
Something Different for the Best Web Solution!
Something Different for the Best Web Solution!Something Different for the Best Web Solution!
Something Different for the Best Web Solution!
 
やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!やはりお前らのMTMLは間違っている!
やはりお前らのMTMLは間違っている!
 
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティングMTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
MTのダイナミック処理(PHP)を高速化する@サーバーサイドスクリプティング
 
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
Movable Type for AWS - JAWS-UG 沖縄 CMS祭り!
 
Memcachedの仕組みと設定
Memcachedの仕組みと設定Memcachedの仕組みと設定
Memcachedの仕組みと設定
 

Similar to Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

MT-TOKYO11 LT
MT-TOKYO11 LTMT-TOKYO11 LT
MT-TOKYO11 LTbitpart
 
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返りSotaro Kimura
 
20160610 mtsaga handson_public
20160610 mtsaga handson_public20160610 mtsaga handson_public
20160610 mtsaga handson_publicSix Apart
 
20150124 mt nagano_publish
20150124 mt nagano_publish20150124 mt nagano_publish
20150124 mt nagano_publishSix Apart
 
20170801 monaca ug_lt_public
20170801 monaca ug_lt_public20170801 monaca ug_lt_public
20170801 monaca ug_lt_publicSix Apart
 
OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化Nobuyori Takahashi
 
20160317 ichigaya mt_cloud_handson
20160317 ichigaya mt_cloud_handson20160317 ichigaya mt_cloud_handson
20160317 ichigaya mt_cloud_handsonSix Apart
 
20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflowTomoyuki Obi
 
マイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devマイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devKazuhiro Sera
 
メタデータスキーマレジストリ MetaBridge
メタデータスキーマレジストリ MetaBridgeメタデータスキーマレジストリ MetaBridge
メタデータスキーマレジストリ MetaBridgeMitsuharu Nagamori
 
Ocs2013 tokyo spring_plone
Ocs2013 tokyo spring_ploneOcs2013 tokyo spring_plone
Ocs2013 tokyo spring_ploneManabu Terada
 
RESTful Web API Design
RESTful Web API DesignRESTful Web API Design
RESTful Web API DesignAkinari Tsugo
 
kintoneではじめるビジネスインテリジェンス
kintoneではじめるビジネスインテリジェンスkintoneではじめるビジネスインテリジェンス
kintoneではじめるビジネスインテリジェンスSakae Saito
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaTakao Tetsuro
 
Contao Open Source CMS -- CMS大阪夏祭り 2015
Contao Open Source CMS -- CMS大阪夏祭り 2015Contao Open Source CMS -- CMS大阪夏祭り 2015
Contao Open Source CMS -- CMS大阪夏祭り 2015Takahiro Kambe
 
20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handsonSix Apart
 
20130225 pronet study
20130225 pronet study20130225 pronet study
20130225 pronet studySix Apart
 
Movable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイトMovable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイトregret raym
 

Similar to Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014 (20)

MT-TOKYO11 LT
MT-TOKYO11 LTMT-TOKYO11 LT
MT-TOKYO11 LT
 
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り
 
20160610 mtsaga handson_public
20160610 mtsaga handson_public20160610 mtsaga handson_public
20160610 mtsaga handson_public
 
20150124 mt nagano_publish
20150124 mt nagano_publish20150124 mt nagano_publish
20150124 mt nagano_publish
 
20170801 monaca ug_lt_public
20170801 monaca ug_lt_public20170801 monaca ug_lt_public
20170801 monaca ug_lt_public
 
OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化OSSとクラウドによるコンピューティングモデルの変化
OSSとクラウドによるコンピューティングモデルの変化
 
20160317 ichigaya mt_cloud_handson
20160317 ichigaya mt_cloud_handson20160317 ichigaya mt_cloud_handson
20160317 ichigaya mt_cloud_handson
 
20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow
 
マイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devマイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3dev
 
概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
メタデータスキーマレジストリ MetaBridge
メタデータスキーマレジストリ MetaBridgeメタデータスキーマレジストリ MetaBridge
メタデータスキーマレジストリ MetaBridge
 
The new LINE Ads Platform
The new LINE Ads PlatformThe new LINE Ads Platform
The new LINE Ads Platform
 
Ocs2013 tokyo spring_plone
Ocs2013 tokyo spring_ploneOcs2013 tokyo spring_plone
Ocs2013 tokyo spring_plone
 
RESTful Web API Design
RESTful Web API DesignRESTful Web API Design
RESTful Web API Design
 
kintoneではじめるビジネスインテリジェンス
kintoneではじめるビジネスインテリジェンスkintoneではじめるビジネスインテリジェンス
kintoneではじめるビジネスインテリジェンス
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph Schema
 
Contao Open Source CMS -- CMS大阪夏祭り 2015
Contao Open Source CMS -- CMS大阪夏祭り 2015Contao Open Source CMS -- CMS大阪夏祭り 2015
Contao Open Source CMS -- CMS大阪夏祭り 2015
 
20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson
 
20130225 pronet study
20130225 pronet study20130225 pronet study
20130225 pronet study
 
Movable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイトMovable typeでモバイルギャラリーサイト
Movable typeでモバイルギャラリーサイト
 

More from bitpart

実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド
実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド
実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールドbitpart
 
開発者が語る
 MTAppjQuery を便利に使うコツ
開発者が語る
 MTAppjQuery を便利に使うコツ開発者が語る
 MTAppjQuery を便利に使うコツ
開発者が語る
 MTAppjQuery を便利に使うコツbitpart
 
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介bitpart
 
PWA night vol.11 20191218
PWA night vol.11 20191218PWA night vol.11 20191218
PWA night vol.11 20191218bitpart
 
MTDDC Meetup HOKKAIDO 2018
MTDDC Meetup HOKKAIDO 2018MTDDC Meetup HOKKAIDO 2018
MTDDC Meetup HOKKAIDO 2018bitpart
 
MTDDC Meetup TOKYO 2016
MTDDC Meetup TOKYO 2016MTDDC Meetup TOKYO 2016
MTDDC Meetup TOKYO 2016bitpart
 
MTTokyo23
MTTokyo23MTTokyo23
MTTokyo23bitpart
 
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-partbitpart
 
Data APIで広がるWebサイトのオモテとウラ
Data APIで広がるWebサイトのオモテとウラData APIで広がるWebサイトのオモテとウラ
Data APIで広がるWebサイトのオモテとウラbitpart
 
Data APIを活かす JavaScript検索と管理画面のカスタマイズ
Data APIを活かす JavaScript検索と管理画面のカスタマイズData APIを活かす JavaScript検索と管理画面のカスタマイズ
Data APIを活かす JavaScript検索と管理画面のカスタマイズbitpart
 
Alfasado 10th lt
Alfasado 10th ltAlfasado 10th lt
Alfasado 10th ltbitpart
 
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方bitpart
 

More from bitpart (12)

実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド
実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド
実践!MTAppjQueryで作るマニュアルいらずの管理画面とオリジナルフィールド
 
開発者が語る
 MTAppjQuery を便利に使うコツ
開発者が語る
 MTAppjQuery を便利に使うコツ開発者が語る
 MTAppjQuery を便利に使うコツ
開発者が語る
 MTAppjQuery を便利に使うコツ
 
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介
【MT東京65】Movable Type を使う際の定番プラグインMTAppjQueryの紹介
 
PWA night vol.11 20191218
PWA night vol.11 20191218PWA night vol.11 20191218
PWA night vol.11 20191218
 
MTDDC Meetup HOKKAIDO 2018
MTDDC Meetup HOKKAIDO 2018MTDDC Meetup HOKKAIDO 2018
MTDDC Meetup HOKKAIDO 2018
 
MTDDC Meetup TOKYO 2016
MTDDC Meetup TOKYO 2016MTDDC Meetup TOKYO 2016
MTDDC Meetup TOKYO 2016
 
MTTokyo23
MTTokyo23MTTokyo23
MTTokyo23
 
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
 
Data APIで広がるWebサイトのオモテとウラ
Data APIで広がるWebサイトのオモテとウラData APIで広がるWebサイトのオモテとウラ
Data APIで広がるWebサイトのオモテとウラ
 
Data APIを活かす JavaScript検索と管理画面のカスタマイズ
Data APIを活かす JavaScript検索と管理画面のカスタマイズData APIを活かす JavaScript検索と管理画面のカスタマイズ
Data APIを活かす JavaScript検索と管理画面のカスタマイズ
 
Alfasado 10th lt
Alfasado 10th ltAlfasado 10th lt
Alfasado 10th lt
 
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
Data API と flexibleSearch、MTAppjQuery で広がるMT6の使い方
 

Movable Type Meetup JSON - MTDDC Meetup TOKYO 2014

  • 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 との連携 • メッセージセンター
  • 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 に変換 • タイトル、本文、続き、概要、キーワード、タグ、そしてカ スタムフィールド・・・
  • 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
  • 37. MTAppListing • 関連記事を選択 • 記事を選択してグルーピング • 外部のAPIから情報を取得して関連付け
  • 40. POST from Movable Type • 取得だけじゃなくて他の API に POST • Slackにポスト • Backlogにポスト • Trelloにポスト
  • 44. Post to Slack • Slackを使った公開承認フローを実装 • demo
  • 46. Enjoy Movable Type and JSON !
  • 47. ご静聴ありがとう ございました。 Update bit part, everyday!! MT::Lover::bitpart