初めての Data api

初めての Data API - タイプ別 Data API 活用ガイド -

YUJI Takayama@Six Apart

YUJI TAKAYAMASix Apart, Ltd.

Senior Product Manager Movable Type Lead Engineer

My Social

icon

yuji

yuji

Yuji Takayama

Today’s Agenda

Movable Type Data API Overview Movable Type Data API とはなんでしょう？

Introduce Data API v2.0 Movable Type Data API v2.0 を紹介

Data API Useful Guides Movable Type Data APIの活用方法を紹介

Data API Overview

Movable Type Data API 2.0

REST/JSON API for every websites and applications

Released with Movable Type 6.1 on Feb 22, 2015

Data API Features

REST / JSON API 使いやすい URI ベースの呼び出し。結果は扱いやすい JSON 形式を標準サポート

MT Authentication and Role based permission Movable Type が提供するユーザー管理機能を利用した認証機能を提供

Pluggable / Extensible Movable Type らしく拡張性も重視。プラグイン (Perl) によるエンドポイントの拡張、

コールバックを利用したフィルター処理、JSON 以外の出力形式を追加することも

JavaScript library available JavaScript 用の開発ライブラリを標準提供。ブラウザの差異も吸収

Build web pages

Responsive Web Design

<html>

Content

Templates

Build web pages

Web pages

Mobile Applications

Templates

TV Watch

fridgeCarDigital

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 ライブラリ提供）

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 プラグイン

• サイボウズ kintone から Movable Type

へ Data API で投稿

• ワークフローに強い kintone と MTML で自由なデザインができる Movable Type

のコラボ

• それぞれの強みを活かせる

http://radical-bridge.com/product/kintone-mt-plugin.html

Data API Case 6 - Nintendo3DS

• Nintendo 3DS でとった写真を、Data

API を利用して Movable Type にアップロードすることで、自前のフォトギャラリーを運営

• 写真を取り出してアップロードするという手間がいらない

http://www.slideshare.net/kaorislideshare/six-apart

http://www.slideshare.net/kaorislideshare/six-apart

Data API Case 7 -オレグラム（デモ)

• Data API で作成したウェブサイト &

サービスのデモ

• バックエンドのプログラミングは一切なし。プラグインもなし

• ファイルのアップロード、サムネイル作成、バックグラウンド再構築

• Data API を使えば、サービスのバックエンドとして Movable Type を利用可能

Introduce Data API 2.0

Data API Ver. 1.0 Endpoints

Create UPDATE DELETE Read

Entries ◯ ◯ ◯ ◯

Comments ◯ ◯ ◯ ◯

Categories ◯ △

Blog/Websites ◯ ◯

Trackbacks ◯ ◯ ◯ ◯

Users ◯ ◯

Site Statistics ◯

Assets ◯ (Upload)

Data API Ver. 2.0 EndpointsCREATE 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

Can create, read, update and delete almost all objects ほぼすべてのオブジェクトについて、CRUDのエンドポイントをサポート

Restrict Data API access by each site 各サイト単位で Data API のアクセスを禁止することが可能に

Search entries across the each site サイトを横断して記事の検索が可能に

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

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

How to use Data API

Basic usage

http://path/to/mt/mt-data-api.cgi/v2/sites/1

エンドポイントにパラメータを付けて呼び出す

Data API のスクリプトへのパス

Data API のバージョン

呼び出すメソッドとパラメータ

User Authentication (Raw API Sample)<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 (JS Library Sample)<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 (JS Library Sample)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 (JS Library Sample)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:Redirect to authentication screen$('#login').click( function() { location.href = "http://54.65.19.34/mt/mt-‐data-‐api.cgi/v2/authorization?redirectUrl=" + encodeURIComponent( window.location ) + "&clientId=fake-‐instagram"; });

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: { 'X-‐MT-‐Authorization': 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: { 'X-‐MT-‐Authorization': token } }) .done(function( data ) { $("#file").replaceWith($("#file").clone()); }); }); }); });

Data API v2.0 Developer Resources

Online API Documentation Data API 2.0 用のドキュメントを順次公開

http://docs.movabletypedataapi.apiary.io/

MT Live! MTに詳しいコミュニティメンバーや、弊社MTエンジニアに直接質問できる

毎月第二、第四水曜日に開催中　詳細はFacebookのイベントで

Data API Recipes コピペしてすぐ使える Data API のレシピサイトを近日公開予定

Developer Resources Center will be available 開発者（フロントエンド、バックエンド、インフラ）向け情報サイトを準備中

Infrastructure for Data API

Point of infrastructure building

Data API is fast, but that is a CGI Data API は、普通のCGIよりは高速に動作します。しかし、PSGI

などの永続化環境で動作させると、より高速に動作します。

Data API is scalable 同じDatabaseを参照させる事によって、スケールアウトさせることも容易です。

Data API is excellent with Cloud クラウドインフラを使うと、より良い環境が構築できます。

Movable Type Cloud

Movable Type for AWS

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

Movable Type for AWS - System diagram

Movable Type 6.1

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 day Free Trial どのインスタンスでも、初期起動から7日間はソフトウェア料が無料

yum update movabletype アップデートは yum コマンドで

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….

Data API 2.0

Our conclusion is…

Data API evolve your web as well as your business. Data API は、ウェブのみならずビジネスも進化させます

Data API will realize your ideas. Data API は、あなたのアイディアを実現できます

Data API is a best practice to realize the modern web. Movable Type と Data API は、イマドキのウェブを作るためのベストプラ

クティスです

Have fun with Data API!

Thank you for listening

Software

初めての Data api