data api 2.0

Data API 2.0

MTDDC Meetup Tokyo 2014 2014.11.29 (Sat)

Yuji Takayama@Six Apart

YUJI TAKAYAMA

Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer

Twitter: @yuji Facebook: Yuji Takayama Github: yuji Mail: [email protected]

My Social

icon

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

• 新着一覧に表示するレシピを Data API で無限スクロール

• ページ遷移が必要ない

• 【利用者目線】気になるレシピを探しやすく

• 【制作者目線】ページ分割のための再構築が不要 = 負荷が低減

Six Apart のごはんレシピ

http://makanai.sixapart.jp/


• Google Analytics と連携し、アクセス数の多い記事をランキング表示

• ほぼリアルタイムにページを更新

• 独自開発したサムネイル作成用エンドポイント

ワンダードライビング

http://wonderdriving.com/


• サイトのアクセス数を取得してグラフ表示

• 撮影した写真をすばやくアップロード

• 記事へのコメントにすばやく返信

• デバイスに最適化されたページ

• 必要なデータだけを送受信することで通信コストの低減

Loupe


• Movable Type の管理画面を使わずに記事を投稿

• Movable Type の管理画面を改造せずに、ニーズに併せる

• Google Chrome App

• おもいついた時にパッと書ける

• コンテンツに合わせた、適切なラベルと適切な配置で独自アプリに

Movable Type Writer (仮)

Why Movable Type offers API?

Build web pages

Responsive Web Design

<html>

Content

Templates

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

Mobile Applications

Templates

TV Watch

fridgeCarDigital Signage

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 🔵 ◯ ◯ 🔵 🔵

Site Statistics ◯

Assets ◯ (Upload) 🔵 🔵 🔵 🔵

Custom Fields 🔵 🔵 🔵 🔵 🔵

Logs 🔵 🔵 🔵 🔵 🔵

Groups / Group Members 🔵 🔵 🔵 🔵 🔵

Pages 🔵 🔵 🔵 🔵 🔵

Roles 🔵 🔵 🔵 🔵 🔵

Folders 🔵 🔵 🔵 🔵 🔵

Templates / Widgets 🔵 🔵 🔵 🔵 🔵

Tags 🔵 🔵 🔵 🔵 🔵

Themes 🔵

Permissions 🔵

Search 🔵

Available Endpoints are 350% up from v1!

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 サイトを横断して記事の検索が可能に


Make a thumbnail for an asset 任意のサイズのサムネイル画像を作成可能に

Make a log from a front side フロントエンドで発生したイベントもログに書き込み可能に

Build index/archive template インデックス・テンプレート、アーカイブテンプレートの再構築を実行可能に

Run backup/restore バックアップの生成はもとより、バックアップファイルを指定した復元も


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

Web Browser

Upload via Data API

Rebuild main index via Data API

Available at Data API v1.0 Available at Data API v2.0

Make thumbnail via 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 勉強会です。

※沖縄で遺恨は何一つありませんｗ

Movable Type を CMS として使用してウェブサイトを構築するときに、

「コレは入れるよね！」というお気に入りのプラグインを投票していただき、

2014年の「Movable Type プラデミー賞」を決定します。

Thank you for listening

Have fun with Movable Type and Data API !!!

data api 2.0

Technology