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 + AWS = (CMS どうでしょう 札幌編)

1,995 views

Published on

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

Published in: Engineering

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

  1. 1. Data API 2.0 + AWS = Jan 17, 2015 CMS どうでしょう - MT/WP 対決列島 札幌編 - たかやま@Six Apart
  2. 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. 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 で使う
  4. 4. What is Movable Type?
  5. 5. 2001年 Ver.1.0 2013年 Ver.6.0 Current Ver. 6.0.6 JSON REST API サーバーインストール型クラウド型
  6. 6. 2015年 サービスイン予定
  7. 7. Data API Overview
  8. 8. Movable Type Data API REST/JSON API for every websites and applications Released with Movable Type 6.0 on Oct 17, 2013
  9. 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. 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 - Movable Type Writer • 記事投稿ツール • 生きているサンプル • MovableType の管理画面を改造せずに、 ユーザーのニーズに併せる • コンテンツに合わせて投稿画面をカス タマイズしてしまう • Google Chrome App • AngularJS + Bootstrap3
  13. 13. Why Movable Type offers API?
  14. 14. Build web pages Responsive Web Design <html> Content Templates
  15. 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. 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. 17. Why Movable Type offers API? Because… The Web of Things PCやスマホだけにとどまらず、広がっていくウェブの世界 Mobile First, Content First モバイル端末での閲覧に最適化。コンテンツを配信することで通信 を最適化 Dynamic Site リッチな表現は必要に応じてフロント側で実現 Not Perl Perl 以外の言語でも Movable Type を使える(JS ライブラリ提供)
  18. 18. Introduce Data API 2.0
  19. 19. Data API Ver. 1.0 Endpoints READ UPDATE DELETE LIST Entries ⃝ ⃝ ⃝ ⃝ Comments ⃝ ⃝ ⃝ ⃝ Categories ⃝ △ Blog/Websites ⃝ ⃝ Trackbacks ⃝ ⃝ ⃝ ⃝ Users ⃝ ⃝ Site Statistics ⃝ Assets ⃝ (Upload)
  20. 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. 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. 22. Data API v2.0 Features and more…
  23. 23. Online document available (still writing…) http://docs.movabletypedataapi.apiary.io/
  24. 24. Data API Demo
  25. 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. 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. 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. 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. 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
  30. 30. Movable Type for AWS
  31. 31. Hourly: $0.07 / h Annual: $499 / y
  32. 32. 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
  33. 33. 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 コマンドで
  34. 34. Data API meets AWS
  35. 35. 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….
  36. 36. Data API 2.0 + AWS = ?
  37. 37. Data API + AWS = Delightful 作って楽しい、使って楽しい Useful 便利なインフラ Scalable サイト・サービスの成長と共に
  38. 38. Movable Type
  39. 39. Thank you for listening Have fun with Movable Type and Data API !!!

×