SlideShare une entreprise Scribd logo
1  sur  40
Télécharger pour lire hors ligne
Data API 2.0 + AWS =
Jan 17, 2015
CMS どうでしょう - MT/WP 対決列島 札幌編 -
たかやま@Six Apart
YUJI TAKAYAMA
Six Apart, Ltd.
Senior Product Manager
Movable Type Lead Engineer
Twitter: @yuji
Facebook: Yuji Takayama
Github: yuji
Mail: ytakayama@sixapart.com
My Social
icon
Today’s Agenda
Movable Type Overview
Movable Type 知ってますか?
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 を紹介
Movable Type for AWS + Data API
Data API を Movable Type for AWS で使う
What is Movable Type?
2001年 Ver.1.0
2013年 Ver.6.0
Current Ver. 6.0.6
JSON REST API
サーバーインストール型クラウド型
2015年 サービスイン予定
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 Case 1 - COACH UNITED
• トップページの記事一覧を Data API で
無限スクロール
• ページ遷移が必要ない
• 【利用者目線】気になる記事を探し
やすく
• 【制作者目線】ページ分割のための
再構築が不要 = 負荷が低減
http://coachunited.jp/
Data API Case 2 - ワンダードライビング
• エンドポイントを独自拡張
• Google Analytics と連携し、アクセス
数の多い記事をランキング表示
• 記事のサムネイルを生成
http://wonderdriving.com/
Data API Case 3 - Movable Type Writer
• 記事投稿ツール
• 生きているサンプル
• MovableType の管理画面を改造せずに、
ユーザーのニーズに併せる
• コンテンツに合わせて投稿画面をカス
タマイズしてしまう
• Google Chrome App
• AngularJS + Bootstrap3
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 pages
Mobile Applications
Templates
TV Watch
fridgeCar
Digital
Signage
Data API
<html>
Content
Data API
Any Devices
Other Services
Why Movable Type offers API? Because…
The Web of Things
PCやスマホだけにとどまらず、広がっていくウェブの世界
Mobile First, Content First
モバイル端末での閲覧に最適化。コンテンツを配信することで通信
を最適化
Dynamic Site
リッチな表現は必要に応じてフロント側で実現
Not Perl
Perl 以外の言語でも Movable Type を使える(JS ライブラリ提供)
Introduce Data API 2.0
Data API Ver. 1.0 Endpoints
READ UPDATE DELETE LIST
Entries ⃝ ⃝ ⃝ ⃝
Comments ⃝ ⃝ ⃝ ⃝
Categories ⃝ △
Blog/Websites ⃝ ⃝
Trackbacks ⃝ ⃝ ⃝ ⃝
Users ⃝ ⃝
Site Statistics ⃝
Assets ⃝ (Upload)
Data API Ver. 2.0 Endpoints
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のエンドポイントをサポート
Restrict Data API access for each site
各サイト単位で Data API のアクセスを禁止することが可能に
Search entries across the each site
サイトを横断して記事の検索が可能に
Build index/archive template
インデックス・テンプレート、アーカイブテンプレートの再構築を実行可能に
Make a thumbnail for an asset
任意のサイズのサムネイル画像を作成可能に
Data API v2.0 Features
and more…
Online document available (still writing…)
http://docs.movabletypedataapi.apiary.io/
Data API 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
http://54.64.74.149/
User: Melody
Password: mel0dynels0n
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
Movable Type for AWS
Hourly: $0.07 / h
Annual: $499 / y
Movable Type for AWS - System diagram
Movable Type 6.0.6
Amazon Linux 2014.09
starman
0.4009
MySQL 5.5nginx 1.6.2
php-fpm
5.3.29
Perl 5.16.3
Why Movable Type offers API? Because…
All In One Package
Movable Type の起動に必要な環境をすべて用意済み
Free Tier Eligible
micro インスタンスは、ソフトウェア料が無料
7 days Free Trial
どのインスタンスでも、初期起動から7日間はソフトウェア料が無料
yum update movabletype
アップデートは yum コマンドで
Data API meets AWS
RDS
MT
(API)
EC2
MT
(API)
EC2
MT
(API)
EC2
ELBELB
MT
(CMS)
EC2
MT
(CMS)
EC2
Visitors Visitors Visitors Visitors VisitorsAdmin
S3
Static
Contents auto scaling
PC / Mobile Device / Machine etc….
Data API 2.0 + AWS = ?
Data API + AWS =
Delightful
作って楽しい、使って楽しい
Useful
便利なインフラ
Scalable
サイト・サービスの成長と共に
Movable Type
Thank you for listening
Have fun with Movable Type and Data API !!!

Contenu connexe

Tendances

JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めようJSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
 
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
 
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
Koichiro Nishijima
 

Tendances (20)

概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めようJSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
 
クラウドネイティブ化する未来
クラウドネイティブ化する未来クラウドネイティブ化する未来
クラウドネイティブ化する未来
 
WebAPIのこれまでとこれから
WebAPIのこれまでとこれからWebAPIのこれまでとこれから
WebAPIのこれまでとこれから
 
iOSアプリ開発者から見たMobile Hub
iOSアプリ開発者から見たMobile HubiOSアプリ開発者から見たMobile Hub
iOSアプリ開発者から見たMobile Hub
 
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリAWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
 
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
 
Amazon api gatewayで web apiをサーバーレスで構築しよう
Amazon api gatewayで web apiをサーバーレスで構築しようAmazon api gatewayで web apiをサーバーレスで構築しよう
Amazon api gatewayで web apiをサーバーレスで構築しよう
 
意外な相性!?Azure Cosmos DB × LINE で作る安心のメッセージ配信システム
意外な相性!?Azure Cosmos DB × LINE で作る安心のメッセージ配信システム意外な相性!?Azure Cosmos DB × LINE で作る安心のメッセージ配信システム
意外な相性!?Azure Cosmos DB × LINE で作る安心のメッセージ配信システム
 
WebIDLを見てみる
WebIDLを見てみるWebIDLを見てみる
WebIDLを見てみる
 
はじめてのBluemixでシングルサインオン ~ 希望編!
はじめてのBluemixでシングルサインオン ~ 希望編!はじめてのBluemixでシングルサインオン ~ 希望編!
はじめてのBluemixでシングルサインオン ~ 希望編!
 
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築するCognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
 
Azure Service Fabric 概要
Azure Service Fabric 概要Azure Service Fabric 概要
Azure Service Fabric 概要
 
Aws lambda &amp; amazon api gateway入門
Aws lambda &amp;  amazon api gateway入門Aws lambda &amp;  amazon api gateway入門
Aws lambda &amp; amazon api gateway入門
 
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
俺とサーバレスアーキテクチャ Aws cognito + aws api gateway 編
 
Api gatewayの話
Api gatewayの話Api gatewayの話
Api gatewayの話
 
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
 
Scala@SmartNews AdFrontend を Scala で書いた話
Scala@SmartNews AdFrontend を Scala で書いた話Scala@SmartNews AdFrontend を Scala で書いた話
Scala@SmartNews AdFrontend を Scala で書いた話
 
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
ゼロから始めるモバイルアプリ開発 / 
 AWS Mobile Hubハンズオン 本編
 
Movable Type as a Playground
Movable Type as a PlaygroundMovable Type as a Playground
Movable Type as a Playground
 

En vedette (7)

kintoneプラグイン 《Movable Type 連携》
kintoneプラグイン 《Movable Type 連携》kintoneプラグイン 《Movable Type 連携》
kintoneプラグイン 《Movable Type 連携》
 
Cybozu Kintone x WordPress
Cybozu Kintone x WordPressCybozu Kintone x WordPress
Cybozu Kintone x WordPress
 
フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話
 
[CMSどうでしょう 札幌] 網元起動隊ハンズオン
[CMSどうでしょう 札幌] 網元起動隊ハンズオン[CMSどうでしょう 札幌] 網元起動隊ハンズオン
[CMSどうでしょう 札幌] 網元起動隊ハンズオン
 
WordPress開発の最新事情
WordPress開発の最新事情WordPress開発の最新事情
WordPress開発の最新事情
 
Media Assembly Kit
Media Assembly KitMedia Assembly Kit
Media Assembly Kit
 
Drupal勉強会@さっぽろ/おたる ご紹介
Drupal勉強会@さっぽろ/おたる ご紹介Drupal勉強会@さっぽろ/おたる ご紹介
Drupal勉強会@さっぽろ/おたる ご紹介
 

Similaire à Data API + AWS = (CMS どうでしょう 札幌編)

One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe API
maruyama097
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
maruyama097
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
kumo2010
 

Similaire à Data API + AWS = (CMS どうでしょう 札幌編) (20)

Data API ことはじめ
Data API ことはじめData API ことはじめ
Data API ことはじめ
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
オレ流クラウドデザイン
オレ流クラウドデザインオレ流クラウドデザイン
オレ流クラウドデザイン
 
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
 
Web on Kernel
Web on KernelWeb on Kernel
Web on Kernel
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践
[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践
[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe API
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
 
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラムDropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
 
Web Intents入門
Web Intents入門Web Intents入門
Web Intents入門
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
AWS IoT アップデート 2016.02.16
AWS IoT アップデート 2016.02.16AWS IoT アップデート 2016.02.16
AWS IoT アップデート 2016.02.16
 
ADO.NETでつながるクラウドデータ連携
ADO.NETでつながるクラウドデータ連携ADO.NETでつながるクラウドデータ連携
ADO.NETでつながるクラウドデータ連携
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 

Plus de Yuji Takayama

MT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWSMT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWS
Yuji Takayama
 
Mtとクラウドと私
Mtとクラウドと私Mtとクラウドと私
Mtとクラウドと私
Yuji Takayama
 
Movable Type 6 overview spec3
Movable Type 6 overview spec3Movable Type 6 overview spec3
Movable Type 6 overview spec3
Yuji Takayama
 
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech TalkMovable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Yuji Takayama
 
Mtddc2013: Movable Type 6 Overview
Mtddc2013: Movable Type 6 OverviewMtddc2013: Movable Type 6 Overview
Mtddc2013: Movable Type 6 Overview
Yuji Takayama
 
Mtddc kyusyu-lightningtalks
Mtddc kyusyu-lightningtalksMtddc kyusyu-lightningtalks
Mtddc kyusyu-lightningtalks
Yuji Takayama
 
Movable Type 5.2 Overview at MTDDC 2012
Movable Type 5.2 Overview at MTDDC 2012Movable Type 5.2 Overview at MTDDC 2012
Movable Type 5.2 Overview at MTDDC 2012
Yuji Takayama
 
Phpで作るmovable typeプラグイン
Phpで作るmovable typeプラグインPhpで作るmovable typeプラグイン
Phpで作るmovable typeプラグイン
Yuji Takayama
 

Plus de Yuji Takayama (16)

Movable Type 7 のすべて
Movable Type 7 のすべてMovable Type 7 のすべて
Movable Type 7 のすべて
 
詳説 Movable type 7
詳説 Movable type 7詳説 Movable type 7
詳説 Movable type 7
 
詳説 Data api mtddc 拡張版 v3対応
詳説 Data api mtddc 拡張版   v3対応詳説 Data api mtddc 拡張版   v3対応
詳説 Data api mtddc 拡張版 v3対応
 
Movable Type for AWS Hands-on
Movable Type for AWS Hands-onMovable Type for AWS Hands-on
Movable Type for AWS Hands-on
 
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祭り!
 
MT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWSMT東京03 - Movable Type for AWS
MT東京03 - Movable Type for AWS
 
Mtとクラウドと私
Mtとクラウドと私Mtとクラウドと私
Mtとクラウドと私
 
Movable Type 6 overview spec3
Movable Type 6 overview spec3Movable Type 6 overview spec3
Movable Type 6 overview spec3
 
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech TalkMovable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech Talk
 
Movable Type 6 Overview SPEC2
Movable Type 6 Overview SPEC2Movable Type 6 Overview SPEC2
Movable Type 6 Overview SPEC2
 
Mtddc2013: Movable Type 6 Overview
Mtddc2013: Movable Type 6 OverviewMtddc2013: Movable Type 6 Overview
Mtddc2013: Movable Type 6 Overview
 
Mtddc kyusyu-lightningtalks
Mtddc kyusyu-lightningtalksMtddc kyusyu-lightningtalks
Mtddc kyusyu-lightningtalks
 
Movable Type 5.2 Overview at MTDDC 2012
Movable Type 5.2 Overview at MTDDC 2012Movable Type 5.2 Overview at MTDDC 2012
Movable Type 5.2 Overview at MTDDC 2012
 
Phpで作るmovable typeプラグイン
Phpで作るmovable typeプラグインPhpで作るmovable typeプラグイン
Phpで作るmovable typeプラグイン
 
ダイナミック:Plugin
ダイナミック:Pluginダイナミック:Plugin
ダイナミック:Plugin
 
20070824 MT-DEVCON
20070824 MT-DEVCON20070824 MT-DEVCON
20070824 MT-DEVCON
 

Data API + AWS = (CMS どうでしょう 札幌編)

  • 1. Data API 2.0 + AWS = Jan 17, 2015 CMS どうでしょう - MT/WP 対決列島 札幌編 - たかやま@Six Apart
  • 2. YUJI TAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer Twitter: @yuji Facebook: Yuji Takayama Github: yuji Mail: ytakayama@sixapart.com My Social icon
  • 3. Today’s Agenda Movable Type Overview Movable Type 知ってますか? 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 を紹介 Movable Type for AWS + Data API Data API を Movable Type for AWS で使う
  • 5. 2001年 Ver.1.0 2013年 Ver.6.0 Current Ver. 6.0.6 JSON REST API サーバーインストール型クラウド型
  • 8. Movable Type Data API REST/JSON API for every websites and applications Released with Movable Type 6.0 on Oct 17, 2013
  • 9. 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 用の開発ライブラリを標準提供。ブラウザの差異も吸収
  • 10. Data API Case 1 - COACH UNITED • トップページの記事一覧を Data API で 無限スクロール • ページ遷移が必要ない • 【利用者目線】気になる記事を探し やすく • 【制作者目線】ページ分割のための 再構築が不要 = 負荷が低減 http://coachunited.jp/
  • 11. Data API Case 2 - ワンダードライビング • エンドポイントを独自拡張 • Google Analytics と連携し、アクセス 数の多い記事をランキング表示 • 記事のサムネイルを生成 http://wonderdriving.com/
  • 12. Data API Case 3 - Movable Type Writer • 記事投稿ツール • 生きているサンプル • MovableType の管理画面を改造せずに、 ユーザーのニーズに併せる • コンテンツに合わせて投稿画面をカス タマイズしてしまう • Google Chrome App • AngularJS + Bootstrap3
  • 14. Build web pages Responsive Web Design <html> Content Templates
  • 15. 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 —
  • 16. Build web pages Web pages Mobile Applications Templates TV Watch fridgeCar Digital Signage Data API <html> Content Data API Any Devices Other Services
  • 17. Why Movable Type offers API? Because… The Web of Things PCやスマホだけにとどまらず、広がっていくウェブの世界 Mobile First, Content First モバイル端末での閲覧に最適化。コンテンツを配信することで通信 を最適化 Dynamic Site リッチな表現は必要に応じてフロント側で実現 Not Perl Perl 以外の言語でも Movable Type を使える(JS ライブラリ提供)
  • 19. Data API Ver. 1.0 Endpoints READ UPDATE DELETE LIST Entries ⃝ ⃝ ⃝ ⃝ Comments ⃝ ⃝ ⃝ ⃝ Categories ⃝ △ Blog/Websites ⃝ ⃝ Trackbacks ⃝ ⃝ ⃝ ⃝ Users ⃝ ⃝ Site Statistics ⃝ Assets ⃝ (Upload)
  • 20. Data API Ver. 2.0 Endpoints 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!
  • 21. Data API v2.0 Features Create/read/update/delete every objects ほぼすべてのオブジェクトについて、CRUDのエンドポイントをサポート Restrict Data API access for each site 各サイト単位で Data API のアクセスを禁止することが可能に Search entries across the each site サイトを横断して記事の検索が可能に Build index/archive template インデックス・テンプレート、アーカイブテンプレートの再構築を実行可能に Make a thumbnail for an asset 任意のサイズのサムネイル画像を作成可能に
  • 22. Data API v2.0 Features and more…
  • 23. Online document available (still writing…) http://docs.movabletypedataapi.apiary.io/
  • 25. 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 http://54.64.74.149/ User: Melody Password: mel0dynels0n
  • 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
  • 31.
  • 32. Hourly: $0.07 / h Annual: $499 / y
  • 33. Movable Type for AWS - System diagram Movable Type 6.0.6 Amazon Linux 2014.09 starman 0.4009 MySQL 5.5nginx 1.6.2 php-fpm 5.3.29 Perl 5.16.3
  • 34. Why Movable Type offers API? Because… All In One Package Movable Type の起動に必要な環境をすべて用意済み Free Tier Eligible micro インスタンスは、ソフトウェア料が無料 7 days Free Trial どのインスタンスでも、初期起動から7日間はソフトウェア料が無料 yum update movabletype アップデートは yum コマンドで
  • 36. RDS MT (API) EC2 MT (API) EC2 MT (API) EC2 ELBELB MT (CMS) EC2 MT (CMS) EC2 Visitors Visitors Visitors Visitors VisitorsAdmin S3 Static Contents auto scaling PC / Mobile Device / Machine etc….
  • 37. Data API 2.0 + AWS = ?
  • 38. Data API + AWS = Delightful 作って楽しい、使って楽しい Useful 便利なインフラ Scalable サイト・サービスの成長と共に
  • 40. Thank you for listening Have fun with Movable Type and Data API !!!