Data apiで実現進化するwebの世界

Data APIで実現
進化するWebの世界
MTDDC Meetup TOHOKU 2015
Jun 6, 2015
YUJI Takayama@Six Apart

My Social
icon
yuji
yuji
swordbreaker
YUJI TAKAYAMA
Six Apart, Ltd.
Senior Product Manager
Movable Type Lead Engineer
シックス・アパートで、働き始めて9年目
Movable Type 一筋
好きなタグは <MTAssetProperty>
山形県生まれ（2歳まで）
仙台は親戚がいるので実はよく来てます

Six Apart とは
シックス・アパート株式会社 
CMS（コンテンツ・マネジメント・システム）や、ブログサービス、
ソーシャルメディア連携サービスなど、企業のWEBマーケティングを
支援する製品・サービスを提供しています。
BLOG CMS
BLOG Service BLOG Service

Movable Type とは
Movable Type 1.0 Movable Type 6.1
2001年 2015年
サンフランシスコ生まれの
世界標準 CMS パブリッシングプラットフォーム。
世界中のユーザーに使われ続けて 13年。

全国に広がる Movable Type Users Group
日本全国に 10 のユーザーグループ
北海道
東北
東京
新潟
長野
名古屋
関西
広島
愛媛
福岡
MTDDC Meetup
MT 勉強会
MT Cafe
MT Live

• Movable Type Overview
• Data API Overview
• Data API Showcase
• Introduce Data API 2.0
• Data API 2.0 Demo
• Infrastructure for Data API
Today’s Agenda

Movable Type
Data API 2.0
REST/JSON API for every websites and applications
Released with Movable Type 6.1 on Feb 22, 2015

• REST / JSON
• 使いやすい URI ベースの呼び出し、処理結果はプログラムから扱い
やすい JSON 形式
• MT Authentication / Role based permission mechanism
• Movable Type と同様のユーザー認証
• Pluggable / Extensible
• API のエンドポイントをプラグイン (Perl) で拡張可能
• JavaScript Library
• API の呼び出しをラップした JavaScript 用のライブラリを提供
Movable Type Data API Overview

Build web
pages
Responsive Web Design
<html>
Content
Templates
Before Data API

Build web pages
Web pages
Mobile Applications
Templates
TV Watch
fridgeCar
Digital
Signage
Data API
<html>
Content
Data API
Any Devices
Other Services
After Data API

• The Web of Things
• PC やスマホだけにとどまらず、広がっていくウェブの世界
• Mobile First, Content First
• モバイル端末での閲覧に最適化。コンテンツを配信することで通信
を最適化
• Dynamic Site
• リッチな表現は必要に応じてフロント側で実現
• Not Perl
• Perl 以外の言語でも Movable Type を使える
Why Movable Type oﬀers Data API?

Data API Case 1 - COACH UNITED
• トップページの記事一覧を
Data API で無限スクロール
• ページ遷移が必要ない
• 【利用者目線】気になる記
事を探しやすく
• 【制作者目線】ページ分割
のための再構築が不要 = 負
荷が低減
http://coachunited.jp/

Data API Case 2 - ワンダードライビング
• エンドポイントを独自拡張
• Google Analytics と連携し、
アクセス数の多い記事をラ
ンキング表示
• 記事のサムネイルを生成
• 静的生成 + ダイナミックコ
ンテンツ
http://wonderdriving.com/

Data API Case 3 - 関連記事の表示
• 記事のタグを元に関連する
記事を動的に表示する
• 古い記事でも再構築なしで
情報がリアルタイムに表示
できる
• MTML + Data API
http://movabletype.jp/

Data API Case 4 - Movable Type Writer
• Google Chrome App
• HTML + JavaScript + CSS
• AngularJS + Bootstrap
• Movable Type の管理画面
を使わずにユーザーニーズ
に応える
• コンテンツに合わせて画面
をカスタマイズする

Data API Case 5 - Kintone plugin
• サイボウズ kintone から
Movable Typeへ Data API
で投稿HTML + JavaScript
+ CSS
• ワークフローに強い
kintone と MTML で自由な
デザインができる Movable
Type のコラボ
• それぞれの強みを活かせる
http://radical-bridge.com/product/kintone-mt-plugin.html

Data API Case 6 - Nintendo 3DS
• Nintendo 3DS でとった写
真を、Data API を利用して
Movable Type にアップロー
ドすることで、自前のフォ
トギャラリーを運営
• 写真を取り出してアップロー
ドするという手間がいらな
い
http://www.slideshare.net/kaorislideshare/six-apart

Data API Case 7 - オレグラム
• Data API で作成したウェブサ
イト & サービスのデモ
• バックエンドのプログラミン
グは一切なし。プラグインも
なし
• ファイルのアップロード、サ
ムネイル作成、バックグラウ
ンド再構築
• Data API を使えば、サービス
のバックエンドとして
Movable Type を利用可能

Data API Case 8 - ProNet 検索
http://www.sixapart.jp/pronet/
• カテゴリ、カスタムフィー
ルドによる絞り込み検索
• Data API で検索を実施
• Data API の実行は、AWS
上に構築した Movable
Type for AWS
• ウェブサイト用のデータベー
ス (RDS) を共有

Data API Case 9 - アクセスランキング
• Google Analytics と連携
• Data API で Google Analytics
のアクセス数を取得し、ア
クセスランキングを生成
http://www.movabletype.jp/blog/data-api-v2-06.html

Data API v1 Endpoint
Create UPDATE DELETE Read
Entries ⃝ ⃝ ⃝ ⃝
Comments ⃝ ⃝ ⃝ ⃝
Categories ⃝ △
Blog/Websites ⃝ ⃝
Trackbacks ⃝ ⃝ ⃝ ⃝
Users ⃝ ⃝
Site Statistics ⃝
Assets ⃝ (Upload)

Data API v2 Endpoint
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 Endpoint are
350% up from v1!

• Can create, read, update and delete almost all objects
• ほぼすべてのオブジェクトで CRUDのエンドポイントをサポート
• Restrict Data API access for each site
• 各サイト単位で Data API のアクセスを禁止することが可能に
• Search entries across the site
• サイトを横断して記事の検索が可能に
• Build index/archive template
• インデックス・テンプレート、アーカイブテンプレートを再構築

Basic usage
http://path/to/mt/mt-data-api.cgi/v2/sites/1
エンドポイントにパラメータを付けて呼び出す
Data API のスクリプトへのパス
Data API のバージョン
呼び出すメソッドとパラメータ

User authentication (Raw API call)
<script>

var
accessToken;

$.ajax({

url:
'http://path/to/mt/mt-‐data-‐api.cgi/v2/authentication',

type:
'POST',

data:
{

username:
'takayama',

password:
'password',

clientId:
'test'

},

success:
function(data)
{

accessToken
=
data['accessToken'];

},

error:
function()
{

//
do
something

}

}

</script>

User authentication (JavaScript Library)
<script
src="//path/to/mt-‐static/data-‐api/v2/js/mt-‐data-‐
api.min.js">

<script>

var
api
=
new
MT.DataAPI({

baseUrl:

'http://path/to/mt/mt-‐data-‐api.cgi/',

clientId:
'test'

});

api.authenticate({
username:
'takayama',
password:
'password'
},

function(response)
{

if
(response.error)
{

//
do
something

}
else
{

api.storeTokenData(response);

}

});

</script>

Retrieve list of entries (JavaScript Library)
var
params
=
{

search:
"search
terms",

searchFields:
"title,body",

fields:
"title,permalink,date"

};

api.listEntries(siteId,
params,
function(response)
{

if
(response.error)
{

//
Handle
error

return;

}

for
(var
i
=
0;
i
<
response.items.length;
i++)
{

var
entry
=
response.items[i];

//
Render
an
entry

}

});

Post a new entry (JavaScript Library)
var
siteId
=
1;

var
entry
=
{};

entry['title']
=
$('#entry-‐title').val();

entry['body']
=
$('#entry-‐body').val();

entry['status']
=
'Publish';

api.getToken(function(response)
{

if
(response.error)
{
}

api.createEntry(siteId,
entry,
function(response)
{

if
(response.error)
{

var
code
=
response.error.code;

var
msg;

if
(code
===
404
)
{

}else
if
(code
===
401
)
{

}
else
if
(code
===
403
)
{

}
else
{

}

}

});

Demo: オレグラム
http://54.65.19.34/
User: melody
Pass: mel0dynels0n

Demo:Redirect to authentication screen
$('#login').click(
function()
{

var
currentURL
=
encodeURIComponent(
window.location
);

var
baseURL

=
"http://54.65.19.34/mt/mt-‐data-‐api.cgi";

var
endpoint

=
"/v2/authorization";

var
params

=
"?redirectUrl="
+
currentURL
+
"&clientId=oregram"

location.href
=
baseURL
+
endpoint
+
params;

});

Demo: Fetch user information after sign in
$(document).ready(function()
{

if
(
$.cookie("mt_data_api_access_token")
)
{

tokenObj
=
$.parseJSON($.cookie("mt_data_api_access_token"));

}

if
(!tokenObj)
{

return;

}

var
token
=
'MTAuth
accessToken='
+
tokenObj.accessToken;

$.ajax({

url:
"http://54.65.19.34/mt/mt-‐data-‐api.cgi/v2/users/me",

type:
"GET",

dataType:
'json',

headers:
{

'X-‐MT-‐Authorization':
token

}

})

.done(function(
data
)
{

$('#login-‐block').hide();

$('#username').text('Hi,
'
+
data.displayName);

$('#user-‐block').show();

});

});

Demo: File uplod
$('#upload').on('click',
function()
{

var
tokenObj;

if
(
$.cookie("mt_data_api_access_token")
)
{

tokenObj
=
$.parseJSON($.cookie("mt_data_api_access_token"));

}

if
(!tokenObj)
{

return;

}

var
token
=
'MTAuth
accessToken='
+
tokenObj.accessToken;

var
fd
=
new
FormData($('#upload-‐form').get(0));

$.ajax({

url:
"http://54.65.19.34/mt/mt-‐data-‐api.cgi/v2/assets/upload",

type:
"POST",

data:
fd,

processData:
false,

contentType:
false,

dataType:
'json',

headers:
{

token

}

})

Demo: Make a thumbnail

.done(function(
data
)
{

var
url
=
"http://54.65.19.34/mt/mt-‐data-‐api.cgi/v2/sites/1/
assets/"
+
data.id
+
"/thumbnail?width=600";

$.ajax({

url:
url,

type:
"GET",

dataType:
'json'

})

Demo: Rebuild main index

.done(function(
data
)
{

var
fileObj
=
$("#file").prop('files')[0];

$('#item-‐list').prepend(

'<div
class="col-‐lg-‐3
col-‐sm-‐4
col-‐xs-‐6"><a
title="'
+
fileObj.name
+
'"

href="#"><img
class="thumbnail
img-‐responsive"
src="'
+
data.url
+
'"></
a></div>');

var
url
=
"http://54.65.19.34/mt/mt-‐data-‐api.cgi/v2/sites/1/
templates/35/publish";

$.ajax({

url:
url,

type:
"POST",

headers:
{

token

}

})

.done(function(
data
)
{

$("#file").replaceWith($("#file").clone());

});

});

});

});

• Online API Documentation
• Data API 2.0 用のドキュメントを順次公開
• http://www.movabletype.jp/developers/data-api/v2-reference.html
• Data API Recipes
• コピペしてすぐ使える Data API のレシピサイトを近日公開予定
• Developer Resources Center
• 開発者（フロントエンド、バックエンド、インフラ）向け情報サイ
トを公開。情報は逐次更新
• http://www.movabletype.jp/developers/

• Data API is fast, but it is CGI
• Data API は、普通のCGIよりは高速に動作します。しかし、PSGIなど
の永続化環境で動作させると、より高速に動作
• Data API is scalable
• CMS 側と同じDatabaseを参照させる事によって、スケールアウトさ
せることも容易
• Cloud infrastructure is best for Data API
• クラウドインフラを使えば、簡単により最適化された環境が手に入
る

Hourly: $0.07 / h
Annual: $499 / y

Movable Type for AWS
(HVM, Apache)
t2.small and over

Movable Type for AWS - System component diagram
Movable Type 6.1.1
Amazon Linux 2015.03
starman
0.4009
MySQL 5.5
nginx 1.6.2
or
Apache HTTP Server 2.4
php-fpm
5.3.29
Perl 5.16.3

• All-in-one パッケージ
• Movable Type の起動に必要な環境をすべて用意済み
• Free Tier Eligible / 7day Free Trial
• Micro インスタンスは無料。7日分のフリートライアル可能
• 全リージョン対応
• Asia, US, Euro
• yum コマンドでアップデート
• Movable Type のアップデートは yum update movabletype
Movable Type for AWS Features

RDS
MT
(API)
EC2
MT
(API)
EC2
MT
(API)
EC2
ELBELB
MT
(CMS)
EC2
MT
(CMS)
EC2
Visitors Visitors Visitors VisitorsAdmin
S3
Static
Contents
auto scaling
PC / Mobile Device / Machine etc….

仙台市内のコワーキングスペース・ソシラボさんで開催
Movable Type に関するよろず相談受け付けます。Six Apart のエンジニアや、MT東北の
メンバーが集まりますので、MTについてちょっと質問したい、MT仲間を見つけたい、
交流したい、という方はぜひお立ち寄りください
15時から1時間程度、新サービス MovableType.net のハンズオン勉強会も同時開催予定

Thank you for listening
See you in tomorrow's MT Live!

Data apiで実現進化するwebの世界

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Data apiで実現進化するwebの世界

Similar a Data apiで実現進化するwebの世界 (20)

Más de Yuji Takayama

Más de Yuji Takayama (13)