Download - 初めての Data api
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の活用方法を紹介
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
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
Data API Case 7 -オレグラム(デモ)
• Data API で作成したウェブサイト &
サービスのデモ
• バックエンドのプログラミングは一切なし。プラグインもなし
• ファイルのアップロード、サムネイル作成、バックグラウンド再構築
• Data API を使えば、サービスのバックエンドとして Movable Type を利用可能
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 任意のサイズのサムネイル画像を作成可能に
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 開発者(フロントエンド、バックエンド、インフラ)向け情報サイトを準備中
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 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….
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 は、イマドキのウェブを作るためのベストプラ
クティスです