SlideShare a Scribd company logo

初めての Data API CMS どうでしょう - 仙台編 -

•
•
Yuji Takayama
Yuji Takayama

初めての Data API CMS どうでしょう - 仙台編 -

1 of 55
Download to read offline
初めての Data API タイプ別 Data API 活用ガイド CMS どうでしょう - 仙台編 May 9, 2015 YUJI Takayama@Six Apart
My Social icon yuji yuji Yuji Takayama YUJI TAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer シックス・アパートで、働き始めて9年目 Movable Type 一筋 好きなタグは <MTAssetProperty> 好きなサービスは Cloud Watch
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 CMS どうでしょう - 仙台編 -
https://movabletype.net/
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 Overview
• 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 offers 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 2.0 Introduce
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 • インデックス・テンプレート、アーカイブテンプレートを再構築 Movable Type Data API Overview
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 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  {                  }          }   });
Data API DEMO
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:  {                          '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 Developer Resources
• 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/ Movable Type Data API Overview
Infrastructure for Data API
• Data API is fast, but it is CGI • Data API は、普通のCGIよりは高速に動作します。しかし、PSGIなど の永続化環境で動作させると、より高速に動作します。 • Data API is scalable • 同じDatabaseを参照させる事によって、スケールアウトさせること も容易です。 • Cloud infrastructure is best for Data API • クラウドインフラを使うと、より良い環境が構築できます。 Movable Type Data API Overview
Movable Type Cloud
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Movable Type for AWS
初めての Data API CMS どうでしょう - 仙台編 -
Hourly: $0.07 / h Annual: $499 / y
Movable Type for AWS - System component diagram Movable Type 6.1.1 Amazon Linux 2015.03 starman 0.4009 MySQL 5.5nginx 1.6.2 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….
初めての Data API CMS どうでしょう - 仙台編 -
Have fun with Data API!
Thank you for listening See you in tomorrow's hands-on!

More Related Content

初めての Data API CMS どうでしょう - 仙台編 -

  • 1. 初めての Data API タイプ別 Data API 活用ガイド CMS どうでしょう - 仙台編 May 9, 2015 YUJI Takayama@Six Apart
  • 2. My Social icon yuji yuji Yuji Takayama YUJI TAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer シックス・アパートで、働き始めて9年目 Movable Type 一筋 好きなタグは <MTAssetProperty> 好きなサービスは Cloud Watch
  • 4. Movable Type とは Movable Type 1.0 Movable Type 6.1 2001年 2015年 サンフランシスコ生まれの 世界標準 CMS パブリッシングプラットフォーム。 世界中のユーザーに使われ続けて 13年。
  • 5. 全国に広がる Movable Type Users Group 日本全国に 10 個のユーザーグループ 北海道 東北 東京 新潟 長野 名古屋 関西 広島 愛媛 福岡 MTDDC Meetup MT 勉強会 MT Cafe MT Live
  • 9. Movable Type Data API 2.0 REST/JSON API for every websites and applications Released with Movable Type 6.1 on Feb 22, 2015
  • 11. • 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
  • 12. Build web pages Responsive Web Design <html> Content Templates Before Data API
  • 13. 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
  • 14. • The Web of Things • PC やスマホだけにとどまらず、広がっていくウェブの世界 • Mobile First, Content First • モバイル端末での閲覧に最適化。コンテンツを配信することで通信 を最適化 • Dynamic Site • リッチな表現は必要に応じてフロント側で実現 • Not Perl • Perl 以外の言語でも Movable Type を使える Why Movable Type offers Data API?
  • 15. Data API Case 1 - COACH UNITED • トップページの記事一覧を Data API で無限スクロール • ページ遷移が必要ない • 【利用者目線】気になる記 事を探しやすく • 【制作者目線】ページ分割 のための再構築が不要 = 負 荷が低減 http://coachunited.jp/
  • 16. Data API Case 2 - ワンダードライビング • エンドポイントを独自拡張 • Google Analytics と連携し、 アクセス数の多い記事をラ ンキング表示 • 記事のサムネイルを生成 • 静的生成 + ダイナミックコ ンテンツ http://wonderdriving.com/
  • 17. Data API Case 3 - 関連記事の表示 • 記事のタグを元に関連する 記事を動的に表示する • 古い記事でも再構築なしで 情報がリアルタイムに表示 できる • MTML + Data API http://movabletype.jp/
  • 18. Data API Case 4 - Movable Type Writer • Google Chrome App • HTML + JavaScript + CSS • AngularJS + Bootstrap • Movable Type の管理画面 を使わずにユーザーニーズ に応える • コンテンツに合わせて画面 をカスタマイズする
  • 19. 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
  • 20. Data API Case 6 - Nintendo 3DS • Nintendo 3DS でとった写 真を、Data API を利用して Movable Type にアップロー ドすることで、自前のフォ トギャラリーを運営 • 写真を取り出してアップロー ドするという手間がいらな い http://www.slideshare.net/kaorislideshare/six-apart
  • 21. Data API Case 7 - オレグラム • Data API で作成したウェブサ イト & サービスのデモ • バックエンドのプログラミン グは一切なし。プラグインも なし • ファイルのアップロード、サ ムネイル作成、バックグラウ ンド再構築 • Data API を使えば、サービス のバックエンドとして Movable Type を利用可能
  • 22. Data API Case 8 - ProNet 検索 http://www.sixapart.jp/pronet/ • カテゴリ、カスタムフィー ルドによる絞り込み検索 • Data API で検索を実施 • Data API の実行は、AWS 上に構築した Movable Type for AWS • ウェブサイト用のデータベー ス (RDS) を共有
  • 23. Data API 2.0 Introduce
  • 24. Data API v1 Endpoint Create UPDATE DELETE Read Entries ⃝ ⃝ ⃝ ⃝ Comments ⃝ ⃝ ⃝ ⃝ Categories ⃝ △ Blog/Websites ⃝ ⃝ Trackbacks ⃝ ⃝ ⃝ ⃝ Users ⃝ ⃝ Site Statistics ⃝ Assets ⃝ (Upload)
  • 25. 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!
  • 26. • 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 • インデックス・テンプレート、アーカイブテンプレートを再構築 Movable Type Data API Overview
  • 27. How to use Data API
  • 28. Basic usage http://path/to/mt/mt-data-api.cgi/v2/sites/1 エンドポイントにパラメータ を付けて呼び出す Data API のスクリプトへのパス Data API のバージョン 呼び出すメソッドとパラメータ
  • 29. 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>
  • 30. 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>  
  • 31. 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      }   });
  • 32. 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  {                  }          }   });
  • 35. 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;   });  
  • 36. 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();          });   });
  • 37. 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                  }          })  
  • 38. 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'                  })
  • 39. 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());                          });                  });          });   });
  • 40. Data API Developer Resources
  • 41. • 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/ Movable Type Data API Overview
  • 43. • Data API is fast, but it is CGI • Data API は、普通のCGIよりは高速に動作します。しかし、PSGIなど の永続化環境で動作させると、より高速に動作します。 • Data API is scalable • 同じDatabaseを参照させる事によって、スケールアウトさせること も容易です。 • Cloud infrastructure is best for Data API • クラウドインフラを使うと、より良い環境が構築できます。 Movable Type Data API Overview
  • 49. Hourly: $0.07 / h Annual: $499 / y
  • 50. Movable Type for AWS - System component diagram Movable Type 6.1.1 Amazon Linux 2015.03 starman 0.4009 MySQL 5.5nginx 1.6.2 php-fpm 5.3.29 Perl 5.16.3
  • 51. • 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
  • 52. 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….
  • 54. Have fun with Data API!
  • 55. Thank you for listening See you in tomorrow's hands-on!