Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
初めての Data API
- タイプ別 Data API 活用ガイド -
YUJI Takayama@Six Apart
YUJI TAKAYAMA
Six 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 AP...
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
M...
Build web
pages
Responsive Web Design
<html>
Content
Templates
Build web pages
Web pages
Mobile Applications
Templates
TV Watch
fridgeCar
Digital
Signage
Data API
<html>
Content
Data AP...
Why Movable Type offers API? Because…
The Web of Things
PCやスマホだけにとどまらず、広がっていくウェブの世界
Mobile First, Content First
モバイル端末での閲覧に...
Data API Case 1 - COACH UNITED
• トップページの記事一覧を Data API で
無限スクロール
• ページ遷移が必要ない
• 【利用者目線】気になる記事を探し
やすく
• 【制作者目線】ページ分割のための
再構...
Data API Case 2 - ワンダードライビング
• エンドポイントを独自拡張
• Google Analytics と連携し、アクセス
数の多い記事をランキング表示
• 記事のサムネイルを生成
• 静的生成 + ダイナミックコンテンツ...
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
• MovableType ...
Data API Case 5 - kintone プラグイン
• サイボウズ kintone から Movable Type
へ Data API で投稿
• ワークフローに強い kintone と MTML で
自由なデザインができる Mo...
Data API Case 6 - Nintendo3DS
• Nintendo 3DS でとった写真を、Data
API を利用して Movable Type にアップ
ロードすることで、自前のフォトギャ
ラリーを運営
• 写真を取り出してア...
Data API Case 7 -オレグラム(デモ)
• Data API で作成したウェブサイト &
サービスのデモ
• バックエンドのプログラミングは一切
なし。プラグインもなし
• ファイルのアップロード、サムネイル
作成、バックグラウン...
Introduce Data API 2.0
Data API Ver. 1.0 Endpoints
Create UPDATE DELETE Read
Entries ⃝ ⃝ ⃝ ⃝
Comments ⃝ ⃝ ⃝ ⃝
Categories ⃝ △
Blog/Websites ⃝ ⃝
Tr...
Data API Ver. 2.0 Endpoints
CREATE READ UPDATE DELETE LIST
Entries ⃝ ⃝ ⃝ ⃝ ⃝
Comments ⃝ ⃝ ⃝ ⃝ ⃝
Categories 🔵 ⃝ 🔵 🔵 🔵
Blog/...
Data API v2.0 Features
Can create, read, update and delete almost all objects
ほぼすべてのオブジェクトについて、CRUDのエンドポイントをサポート
Restrict ...
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://pat...
User Authentication (JS Library Sample)
<script	
  src="//path/to/mt-­‐static/data-­‐api/v2/js/mt-­‐data-­‐
api.min.js">	
...
Retrieve list of entries (JS Library Sample)
var	
  params	
  =	
  {	
  
	
  	
  search:	
  "search	
  terms",	
  
	
  	
 ...
Post a new entry (JS Library Sample)
var	
  siteId	
  =	
  1;	
  
var	
  entry	
  =	
  {};	
  
entry['title']	
  =	
  $('#...
Demo:Redirect to authentication screen
$('#login').click(	
  function()	
  {	
  
	
  	
  location.href	
  =	
  "http://54....
Demo: Fetch user information after sign in
$(document).ready(function()	
  {	
  
	
  	
  	
  	
  if	
  (	
  $.cookie("mt_d...
Demo: File uplod
$('#upload').on('click',	
  function()	
  {	
  
	
  	
  	
  	
  var	
  tokenObj;	
  
	
  	
  	
  	
  if	
...
Demo: Make a thumbnail
	
  	
  	
  	
  .done(function(	
  data	
  )	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  url	
 ...
Demo: Rebuild main index
	
  	
  	
  	
  	
  	
  	
  	
  .done(function(	
  data	
  )	
  {	
  
	
  	
  	
  	
  	
  	
  	
 ...
Data API v2.0 Developer Resources
Online API Documentation
Data API 2.0 用のドキュメントを順次公開
http://docs.movabletypedataapi.apiar...
Infrastructure for
Data API
Point of infrastructure building
Data API is fast, but that is a CGI
Data API は、普通のCGIよりは高速に動作します。しかし、PSGI
などの永続化環境で動作させると...
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....
Why Movable Type offers API? Because…
All In One Package
Movable Type の起動に必要な環境をすべて用意済み
Free Tier Eligible
micro インスタンスは、ソフ...
RDS
MT
(API)
EC2
MT
(API)
EC2
MT
(API)
EC2
ELBELB
MT
(CMS)
EC2
MT
(CMS)
EC2
Visitors Visitors Visitors VisitorsAdmin
S3
St...
Data API 2.0
Our conclusion is…
Data API evolve your web as well as your
business.
Data API は、ウェブのみならずビジネスも進化させます
Data API will realize...
Have fun with Data API!
Thank you for listening
初めての Data api
初めての Data api
初めての Data api
Upcoming SlideShare
Loading in …5
×

初めての Data api

2,126 views

Published on

Movable Type Data API について初級編

Published in: Software
  • Be the first to comment

初めての Data api

  1. 1. 初めての Data API - タイプ別 Data API 活用ガイド - YUJI Takayama@Six Apart
  2. 2. YUJI TAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer My Social icon yuji yuji Yuji Takayama
  3. 3. 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の活用方法を紹介
  4. 4. Data API Overview
  5. 5. Movable Type Data API 2.0 REST/JSON API for every websites and applications Released with Movable Type 6.1 on Feb 22, 2015
  6. 6. 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 用の開発ライブラリを標準提供。ブラウザの差異も吸収
  7. 7. Build web pages Responsive Web Design <html> Content Templates
  8. 8. Build web pages Web pages Mobile Applications Templates TV Watch fridgeCar Digital Signage Data API <html> Content Data API Any Devices Other Services
  9. 9. Why Movable Type offers API? Because… The Web of Things PCやスマホだけにとどまらず、広がっていくウェブの世界 Mobile First, Content First モバイル端末での閲覧に最適化。コンテンツを配信することで通信 を最適化 Dynamic Site リッチな表現は必要に応じてフロント側で実現 Not Perl Perl 以外の言語でも Movable Type を使える(JS ライブラリ提供)
  10. 10. Data API Case 1 - COACH UNITED • トップページの記事一覧を Data API で 無限スクロール • ページ遷移が必要ない • 【利用者目線】気になる記事を探し やすく • 【制作者目線】ページ分割のための 再構築が不要 = 負荷が低減 http://coachunited.jp/
  11. 11. Data API Case 2 - ワンダードライビング • エンドポイントを独自拡張 • Google Analytics と連携し、アクセス 数の多い記事をランキング表示 • 記事のサムネイルを生成 • 静的生成 + ダイナミックコンテンツ http://wonderdriving.com/
  12. 12. Data API Case 3 - 関連記事の表示 • 記事のタグを元に関連する記事を動的 に表示する • 古い記事でも再構築なしで情報がリア ルタイムに表示される • MTML + Data API http://movabletype.jp/
  13. 13. Data API Case 4 - Movable Type Writer • Google Chrome App • HTML + JavaScript + CSS • AngularJS + Bootstrap • MovableType の管理画面を使わずにユー ザーニーズに応える • コンテンツに合わせて画面をカスタ マイズする
  14. 14. Data API Case 5 - kintone プラグイン • サイボウズ kintone から Movable Type へ Data API で投稿 • ワークフローに強い kintone と MTML で 自由なデザインができる Movable Type のコラボ • それぞれの強みを活かせる http://radical-bridge.com/product/kintone-mt-plugin.html
  15. 15. Data API Case 6 - Nintendo3DS • Nintendo 3DS でとった写真を、Data API を利用して Movable Type にアップ ロードすることで、自前のフォトギャ ラリーを運営 • 写真を取り出してアップロードすると いう手間がいらない http://www.slideshare.net/kaorislideshare/six-apart
  16. 16. Data API Case 7 -オレグラム(デモ) • Data API で作成したウェブサイト & サービスのデモ • バックエンドのプログラミングは一切 なし。プラグインもなし • ファイルのアップロード、サムネイル 作成、バックグラウンド再構築 • Data API を使えば、サービスのバック エンドとして Movable Type を利用可能
  17. 17. Introduce Data API 2.0
  18. 18. Data API Ver. 1.0 Endpoints Create UPDATE DELETE Read Entries ⃝ ⃝ ⃝ ⃝ Comments ⃝ ⃝ ⃝ ⃝ Categories ⃝ △ Blog/Websites ⃝ ⃝ Trackbacks ⃝ ⃝ ⃝ ⃝ Users ⃝ ⃝ Site Statistics ⃝ Assets ⃝ (Upload)
  19. 19. 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!
  20. 20. 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 任意のサイズのサムネイル画像を作成可能に
  21. 21. How to use Data API
  22. 22. Basic usage http://path/to/mt/mt-data-api.cgi/v2/sites/1 エンドポイントにパラメータ を付けて呼び出す Data API のスクリプトへのパス Data API のバージョン 呼び出すメソッドとパラメータ
  23. 23. 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>
  24. 24. 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>  
  25. 25. 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      }   });
  26. 26. 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  {                  }          }   });
  27. 27. 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";   });  
  28. 28. 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();          });   });
  29. 29. 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                  }          })  
  30. 30. 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'                  })
  31. 31. 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());                          });                  });          });   });
  32. 32. 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 開発者(フロントエンド、バックエンド、インフラ)向け情報サイトを準備中
  33. 33. Infrastructure for Data API
  34. 34. 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 クラウドインフラを使うと、より良い環境が構築できます。
  35. 35. Movable Type Cloud
  36. 36. Movable Type for AWS
  37. 37. Hourly: $0.07 / h Annual: $499 / y
  38. 38. 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
  39. 39. 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 コマンドで
  40. 40. 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….
  41. 41. Data API 2.0
  42. 42. 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 は、イマドキのウェブを作るためのベストプラ クティスです
  43. 43. Have fun with Data API!
  44. 44. Thank you for listening

×