Data API 2.0

Yuji Takayama
Yuji TakayamaMovable Type Senior Product Manager / Movable Type Lead Engineer at Six Apart
Data API 2.0 
MTDDC Meetup Tokyo 2014 
2014.11.29 (Sat) 
Yuji Takayama@Six Apart
My Social 
icon 
YUJI TAKAYAMA 
Six Apart, Ltd. 
Senior Product Manager 
Movable Type Lead Engineer 
Twitter: @yuji 
Facebook: Yuji Takayama 
Github: yuji 
Mail: ytakayama@sixapart.com
Today’s Agenda 
Movable Type Data API Overview 
Movable Type Data API とはなにか? 
Why Movable Type offers API? 
なぜ、Movable Type は API を提供しているのか? 
Introduce Data API v2.0 
Movable Type Data API v2.0 のご紹介。v1.0 との違いについても
Data API Overview
Movable Type 
Data API 
REST/JSON API for every websites and applications 
Released with Movable Type 6.0 on Oct 17, 2013
Data API Features 
REST / JSON API 
特殊な処理を必要としない URL ベースの呼び出しと、結果は扱いやすい JSON 形式をサポート 
MT Authentication and Role based permission 
Movable Type が提供するロールベースのユーザー管理機能を利用した認証機能を提供 
Pluggable / Extensible 
Movable Type らしく拡張性も重視。プラグイン (Perl) によるエンドポイントの拡張、 
コールバックを利用したフィルター処理、JSON 以外の出力形式を追加することも 
JavaScript library available 
JavaScript 用の開発ライブラリを標準提供。ブラウザの差異も吸収
Data API Show Case 1 
Six Apart のごはんレシピ 
• 新着一覧に表示するレシピを Data API で無限スクロール 
• ページ遷移が必要ない 
• 【利用者目線】気になるレシピを探しやすく 
• 【制作者目線】ページ分割のための再構築が不要 = 負荷が低減 
http://makanai.sixapart.jp/
Data API Show Case 2 
ワンダードライビング 
• Google Analytics と連携し、アクセス数の多い記事をランキング表示 
• ほぼリアルタイムにページを更新 
• 独自開発したサムネイル作成用エンドポイント 
http://wonderdriving.com/
Data API Show Case 3 
Loupe 
• サイトのアクセス数を取得してグラフ表示 
• 撮影した写真をすばやくアップロード 
• 記事へのコメントにすばやく返信 
• デバイスに最適化されたページ 
• 必要なデータだけを送受信することで通信コストの低減
Data API Show Case 4 
Movable Type Writer (仮) 
• Movable Type の管理画面を使わずに記事を投稿 
• Movable Type の管理画面を改造せずに、ニーズに併せる 
• Google Chrome App 
• おもいついた時にパッと書ける 
• コンテンツに合わせた、適切なラベルと適切な配置で独自アプリに
Why Movable Type offers API?
Build web pages 
Responsive Web Design 
Templates 
<html> 
Content
The web of Things 
“The Web of Things (WoT) is a set of software architectural styles and programming patterns that 
allow real-world objects to be part of the World Wide Web. Similarly to what the Web 
(Application Layer) is to the Internet (Network Layer), the Web of Things provides an Application 
Layer that simplifies the creation of Internet of Things applications. 
Rather than re-inventing completely new standards, the Web of Things reuses existing and well-known 
Web standards used in the programmable Web (e.g, REST, HTTP, JSON), semantic Web 
(e.g., JSON-LD, Microdata, etc.), the real-time Web (e.g, Websockets) and the social Web (e.g., 
oauth or social networks).” 
— Wikipedia http://en.wikipedia.org/wiki/Web_of_Things —
Build web pages 
Web Browser 
Digital Car fridge 
Signage 
Mobile Applications 
Templates 
TV Watch 
Data API 
<html> 
Content 
Data API 
Any Devices
Why Movable Type offers API? Because… 
The Web of Things 
PCやスマホだけにとどまらず、広がっていくウェブの世界 
Mobile First, Content First 
モバイル端末での閲覧に最適化。コンテンツを配信することで通信を最適化 
Dynamic Site 
リッチな表現は必要に応じてフロント側で実現
Introduce Data API 2.0
Data API Endpoints for v1 
CREATE READ UPDATE DELETE LIST 
Entries ◯ ◯ ◯ ◯ ◯ 
Comments ◯ ◯ ◯ ◯ ◯ 
Categories ◯ △ 
Blog/Websites ◯ ◯ 
Trackbacks ◯ ◯ ◯ ◯ 
Users ◯ ◯ 
Site Statistics ◯ 
Assets ◯ (Upload)
Data API Endpoints for v2 
CREATE READ UPDATE DELETE LIST 
Entries ◯ ◯ ◯ ◯ ◯ 
Comments ◯ ◯ ◯ ◯ ◯ 
Categories  ◯    
Blog/Websites  ◯   ◯ 
Trackbacks ◯ ◯ ◯ ◯ 
Users  ◯ ◯   
Available Endpoints are 
Site Statistics ◯ 
Assets ◯ (Upload)     
350% up from v1! 
Custom Fields      
Logs      
Groups / Group Members      
Pages      
Roles      
Folders      
Templates / Widgets      
Tags      
Themes  
Permissions  
Search 
Data API v2.0 Features 
Create/read/update/delete every objects 
ほぼすべてのオブジェクトについて、CRUDのエンドポイントをサポート 
Assign categories to an entry, save categories order 
記事へのカテゴリの割り当てはもとより、カテゴリの順序を保存することも 
Restrict Data API access for each site 
各サイト単位で Data API のアクセスを禁止することが可能に 
Search entries across the each site 
サイトを横断して記事の検索が可能に
Data API v2.0 Features 
Make a thumbnail for an asset 
任意のサイズのサムネイル画像を作成可能に 
Make a log from a front side 
フロントエンドで発生したイベントもログに書き込み可能に 
Build index/archive template 
インデックス・テンプレート、アーカイブテンプレートの再構築を実行可能に 
Run backup/restore 
バックアップの生成はもとより、バックアップファイルを指定した復元も
Data API v2.0 Features 
and more……
Online document available (now writing…) 
http://docs.movabletypedataapi.apiary.io/
Data API 2.0 - Demo
Mobile Application x Data API x Website 
Mobile Applications 
Available at Data API v1.0 Available at Data API v2.0 
Web Browser 
Upload via Data API 
Make thumbnail via 
Rebuild main index via Data API 
Data API
<body> 
<div> 
<h1>Login</h1> 
<button id="login" name="login" value="login">Login</button> 
</div> 
<div> 
<h1>Upload</h1> 
<form id="form"> 
<input type="hidden" name="site_id" value="1"> 
<input type="hidden" name="autoRenameIfExists" value="1"> 
<div>Path: <input type="text" name="path" id="path" value="/"></div> 
<div>File: <input type="file" name="file" id="upload_file"></div> 
<input type="submit"> 
</form> 
<div id="result"></div> 
</div> 
<script> 
…. 
</script> 
</body>
Show Login Form 
$('#login').click( function() { 
location.href = 
“http://path/to/mt-data-api.cgi/v2/authorization?redirectUrl=“ + 
encodeURIComponent( window.location ) + "&clientId=TestApp"; 
});
Upload File 
var fd = new FormData($('#form').get(0)); 
$.ajax({ 
url: “http://path/to/mt-data-api.cgi/v2/assets/upload", 
type: "POST", 
data: fd, 
processData: false, 
contentType: false, 
dataType: 'json', 
headers: { 
'X-MT-Authorization': token 
} 
})
Get thumbnail 
.done(function( data ) { 
var url = “http://path/to/mt-data-api.cgi/v2/sites/1/assets/" + 
data.id + "/thumbnail?width=200&square=1" 
$.ajax({ 
url: url, 
type: "GET", 
dataType: 'json' 
}) 
.done(function( data ) { 
$('#result').append('<img src="' + data.url + '" width="200">'); 
}); 
});
Rebuild main index file 
var url = “http://path/to/mt-data-api.cgi/v2/sites/1/templates/35/publish”; 
$.ajax({ 
url: url, 
type: "POST", 
headers: { 
'X-MT-Authorization': t 
} 
}) 
.done(function( data ) { 
alert('Done!'); 
}); 
Template ID of 
Main Index 
Authentication 
required
Data API 2.0 will be available in 
Movable Type 6.1 (early 2015)
One more thing…
告知
CMS として長い歴史を持つ Movable Type と WordPress について、 
今どきの開発トレンドと運用についてのイベントを札幌で開催します! 
※真面目な IT 勉強会です。 
※沖縄で遺恨は何一つありませんw
Movable Type を CMS として使用してウェブサイトを構築するときに、 
「コレは入れるよね!」というお気に入りのプラグインを投票していただき、 
2014年の「Movable Type プラデミー賞」を決定します。
Thank you for listening 
Have fun with Movable Type and Data API !!!
1 of 35

More Related Content

Similar to Data API 2.0(20)

20170902 kixs azure&azure stack20170902 kixs azure&azure stack
20170902 kixs azure&azure stack
Osamu Takazoe428 views
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi1.1K views
ADO.NETでつながるクラウドデータ連携ADO.NETでつながるクラウドデータ連携
ADO.NETでつながるクラウドデータ連携
CData Software Japan3.4K views
Vsug20100522Vsug20100522
Vsug20100522
hr_sao349 views
APIMeetup 20170329_ichimuraAPIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Tomohiro Ichimura848 views
Yahoo pipesYahoo pipes
Yahoo pipes
Alfian Busyro528 views
Web Intents入門Web Intents入門
Web Intents入門
Shumpei Shiraishi9.9K views
Webに今求められているレベル: HTML5 コントロールを利用した開発Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社2.3K views
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
dynamis 1.2K views
MetaTweetの現状と展望 v0MetaTweetの現状と展望 v0
MetaTweetの現状と展望 v0
Takeshi Kiriya770 views

More from Yuji Takayama(13)

Movable Type for AWS Hands-onMovable Type for AWS Hands-on
Movable Type for AWS Hands-on
Yuji Takayama3.9K views
MT東京03 - Movable Type for AWSMT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWS
Yuji Takayama2.6K views
Mtとクラウドと私Mtとクラウドと私
Mtとクラウドと私
Yuji Takayama2.4K views
Movable Type 6 overview spec3Movable Type 6 overview spec3
Movable Type 6 overview spec3
Yuji Takayama4.1K views
Movable Type 6 Overview SPEC2Movable Type 6 Overview SPEC2
Movable Type 6 Overview SPEC2
Yuji Takayama4.5K views
Mtddc2013: Movable Type 6 OverviewMtddc2013: Movable Type 6 Overview
Mtddc2013: Movable Type 6 Overview
Yuji Takayama6.4K views
Mtddc kyusyu-lightningtalksMtddc kyusyu-lightningtalks
Mtddc kyusyu-lightningtalks
Yuji Takayama1.3K views
Movable Type 5.2 Overview at MTDDC 2012Movable Type 5.2 Overview at MTDDC 2012
Movable Type 5.2 Overview at MTDDC 2012
Yuji Takayama5.1K views
Phpで作るmovable typeプラグインPhpで作るmovable typeプラグイン
Phpで作るmovable typeプラグイン
Yuji Takayama3.8K views
ダイナミック:Pluginダイナミック:Plugin
ダイナミック:Plugin
Yuji Takayama1K views
20070824 MT-DEVCON20070824 MT-DEVCON
20070824 MT-DEVCON
Yuji Takayama666 views

Data API 2.0

  • 1. Data API 2.0 MTDDC Meetup Tokyo 2014 2014.11.29 (Sat) Yuji Takayama@Six Apart
  • 2. My Social icon YUJI TAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer Twitter: @yuji Facebook: Yuji Takayama Github: yuji Mail: ytakayama@sixapart.com
  • 3. Today’s Agenda Movable Type Data API Overview Movable Type Data API とはなにか? Why Movable Type offers API? なぜ、Movable Type は API を提供しているのか? Introduce Data API v2.0 Movable Type Data API v2.0 のご紹介。v1.0 との違いについても
  • 5. Movable Type Data API REST/JSON API for every websites and applications Released with Movable Type 6.0 on Oct 17, 2013
  • 6. Data API Features REST / JSON API 特殊な処理を必要としない URL ベースの呼び出しと、結果は扱いやすい JSON 形式をサポート MT Authentication and Role based permission Movable Type が提供するロールベースのユーザー管理機能を利用した認証機能を提供 Pluggable / Extensible Movable Type らしく拡張性も重視。プラグイン (Perl) によるエンドポイントの拡張、 コールバックを利用したフィルター処理、JSON 以外の出力形式を追加することも JavaScript library available JavaScript 用の開発ライブラリを標準提供。ブラウザの差異も吸収
  • 7. Data API Show Case 1 Six Apart のごはんレシピ • 新着一覧に表示するレシピを Data API で無限スクロール • ページ遷移が必要ない • 【利用者目線】気になるレシピを探しやすく • 【制作者目線】ページ分割のための再構築が不要 = 負荷が低減 http://makanai.sixapart.jp/
  • 8. Data API Show Case 2 ワンダードライビング • Google Analytics と連携し、アクセス数の多い記事をランキング表示 • ほぼリアルタイムにページを更新 • 独自開発したサムネイル作成用エンドポイント http://wonderdriving.com/
  • 9. Data API Show Case 3 Loupe • サイトのアクセス数を取得してグラフ表示 • 撮影した写真をすばやくアップロード • 記事へのコメントにすばやく返信 • デバイスに最適化されたページ • 必要なデータだけを送受信することで通信コストの低減
  • 10. Data API Show Case 4 Movable Type Writer (仮) • Movable Type の管理画面を使わずに記事を投稿 • Movable Type の管理画面を改造せずに、ニーズに併せる • Google Chrome App • おもいついた時にパッと書ける • コンテンツに合わせた、適切なラベルと適切な配置で独自アプリに
  • 11. Why Movable Type offers API?
  • 12. Build web pages Responsive Web Design Templates <html> Content
  • 13. The web of Things “The Web of Things (WoT) is a set of software architectural styles and programming patterns that allow real-world objects to be part of the World Wide Web. Similarly to what the Web (Application Layer) is to the Internet (Network Layer), the Web of Things provides an Application Layer that simplifies the creation of Internet of Things applications. Rather than re-inventing completely new standards, the Web of Things reuses existing and well-known Web standards used in the programmable Web (e.g, REST, HTTP, JSON), semantic Web (e.g., JSON-LD, Microdata, etc.), the real-time Web (e.g, Websockets) and the social Web (e.g., oauth or social networks).” — Wikipedia http://en.wikipedia.org/wiki/Web_of_Things —
  • 14. Build web pages Web Browser Digital Car fridge Signage Mobile Applications Templates TV Watch Data API <html> Content Data API Any Devices
  • 15. Why Movable Type offers API? Because… The Web of Things PCやスマホだけにとどまらず、広がっていくウェブの世界 Mobile First, Content First モバイル端末での閲覧に最適化。コンテンツを配信することで通信を最適化 Dynamic Site リッチな表現は必要に応じてフロント側で実現
  • 17. Data API Endpoints for v1 CREATE READ UPDATE DELETE LIST Entries ◯ ◯ ◯ ◯ ◯ Comments ◯ ◯ ◯ ◯ ◯ Categories ◯ △ Blog/Websites ◯ ◯ Trackbacks ◯ ◯ ◯ ◯ Users ◯ ◯ Site Statistics ◯ Assets ◯ (Upload)
  • 18. Data API Endpoints for v2 CREATE READ UPDATE DELETE LIST Entries ◯ ◯ ◯ ◯ ◯ Comments ◯ ◯ ◯ ◯ ◯ Categories  ◯    Blog/Websites  ◯   ◯ Trackbacks ◯ ◯ ◯ ◯ Users  ◯ ◯   Available Endpoints are Site Statistics ◯ Assets ◯ (Upload)     350% up from v1! Custom Fields      Logs      Groups / Group Members      Pages      Roles      Folders      Templates / Widgets      Tags      Themes  Permissions  Search 
  • 19. Data API v2.0 Features Create/read/update/delete every objects ほぼすべてのオブジェクトについて、CRUDのエンドポイントをサポート Assign categories to an entry, save categories order 記事へのカテゴリの割り当てはもとより、カテゴリの順序を保存することも Restrict Data API access for each site 各サイト単位で Data API のアクセスを禁止することが可能に Search entries across the each site サイトを横断して記事の検索が可能に
  • 20. Data API v2.0 Features Make a thumbnail for an asset 任意のサイズのサムネイル画像を作成可能に Make a log from a front side フロントエンドで発生したイベントもログに書き込み可能に Build index/archive template インデックス・テンプレート、アーカイブテンプレートの再構築を実行可能に Run backup/restore バックアップの生成はもとより、バックアップファイルを指定した復元も
  • 21. Data API v2.0 Features and more……
  • 22. Online document available (now writing…) http://docs.movabletypedataapi.apiary.io/
  • 23. Data API 2.0 - Demo
  • 24. Mobile Application x Data API x Website Mobile Applications Available at Data API v1.0 Available at Data API v2.0 Web Browser Upload via Data API Make thumbnail via Rebuild main index via Data API Data API
  • 25. <body> <div> <h1>Login</h1> <button id="login" name="login" value="login">Login</button> </div> <div> <h1>Upload</h1> <form id="form"> <input type="hidden" name="site_id" value="1"> <input type="hidden" name="autoRenameIfExists" value="1"> <div>Path: <input type="text" name="path" id="path" value="/"></div> <div>File: <input type="file" name="file" id="upload_file"></div> <input type="submit"> </form> <div id="result"></div> </div> <script> …. </script> </body>
  • 26. Show Login Form $('#login').click( function() { location.href = “http://path/to/mt-data-api.cgi/v2/authorization?redirectUrl=“ + encodeURIComponent( window.location ) + "&clientId=TestApp"; });
  • 27. Upload File var fd = new FormData($('#form').get(0)); $.ajax({ url: “http://path/to/mt-data-api.cgi/v2/assets/upload", type: "POST", data: fd, processData: false, contentType: false, dataType: 'json', headers: { 'X-MT-Authorization': token } })
  • 28. Get thumbnail .done(function( data ) { var url = “http://path/to/mt-data-api.cgi/v2/sites/1/assets/" + data.id + "/thumbnail?width=200&square=1" $.ajax({ url: url, type: "GET", dataType: 'json' }) .done(function( data ) { $('#result').append('<img src="' + data.url + '" width="200">'); }); });
  • 29. Rebuild main index file var url = “http://path/to/mt-data-api.cgi/v2/sites/1/templates/35/publish”; $.ajax({ url: url, type: "POST", headers: { 'X-MT-Authorization': t } }) .done(function( data ) { alert('Done!'); }); Template ID of Main Index Authentication required
  • 30. Data API 2.0 will be available in Movable Type 6.1 (early 2015)
  • 33. CMS として長い歴史を持つ Movable Type と WordPress について、 今どきの開発トレンドと運用についてのイベントを札幌で開催します! ※真面目な IT 勉強会です。 ※沖縄で遺恨は何一つありませんw
  • 34. Movable Type を CMS として使用してウェブサイトを構築するときに、 「コレは入れるよね!」というお気に入りのプラグインを投票していただき、 2014年の「Movable Type プラデミー賞」を決定します。
  • 35. Thank you for listening Have fun with Movable Type and Data API !!!