Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 初めての Data api cms どうでしょう - 大阪夏の陣
Similaire à 初めての Data api cms どうでしょう - 大阪夏の陣 (20)
Plus de Yuji Takayama
Plus de Yuji Takayama (16)
初めての Data api cms どうでしょう - 大阪夏の陣
- 1. 初めての Data API タイプ別 Data API 活用ガイド CMS どうでしょう - 大阪編 Jul 4, 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
- 3. Six Apart とは シックス・アパート株式会社 CMS（コンテンツ・マネジメント・システム）や、ブログサービス、 ソーシャルメディア連携サービスなど、企業のWEBマーケティングを 支援する製品・サービスを提供してい ます。 BLOG CMS BLOG Service BLOG Service
- 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 6.1.2 has been released!
- 11. Movable Type Data API 2.0 REST/JSON API for every websites and applications Released with Movable Type 6.1 on Feb 22, 2015
- 12. • 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
- 13. Build web pages Responsive Web Design <html> Content Templates Before Data API
- 14. 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
- 15. • The Web of Things • PC やスマホだけにとどまらず、広がっていくウェブの世界 • Mobile First, Content First • モバイル端末での閲覧に最適化。コンテンツを配信することで通信 を最適化 • Dynamic Site • リッチな表現は必要に応じてフロント側で実現 • Not Perl • Perl 以外の言語でも Movable Type を使える Why Movable Type offers Data API?
- 16. Data API Case 1 - COACH UNITED • トップページの記事一覧を Data API で無限スクロール • ページ遷移が必要ない • 【利用者目線】気になる記 事を探しやすく • 【制作者目線】ページ分割 のための再構築が不要 = 負 荷が低減 http://coachunited.jp/
- 17. Data API Case 2 - ワンダードライビング • エンドポイントを独自拡張 • Google Analytics と連携し、 アクセス数の多い記事をラ ンキング表示 • 記事のサムネイルを生成 • 静的生成 + ダイナミックコ ンテンツ http://wonderdriving.com/
- 18. Data API Case 3 - 関連記事の表示 • 記事のタグを元に関連する 記事を動的に表示する • 古い記事でも再構築なしで 情報がリアルタイムに表示 できる • MTML + Data API http://movabletype.jp/
- 19. Data API Case 4 - Movable Type Writer • Google Chrome App • HTML + JavaScript + CSS • AngularJS + Bootstrap • Movable Type の管理画面 を使わずにユーザーニーズ に応える • コンテンツに合わせて画面 をカスタマイズする
- 20. 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
- 21. Data API Case 6 - Nintendo 3DS • Nintendo 3DS でとった写 真を、Data API を利用して Movable Type にアップロー ドすることで、自前のフォ トギャラリーを運営 • 写真を取り出してアップロー ドするという手間がいらな い http://www.slideshare.net/kaorislideshare/six-apart
- 22. Data API Case 7 - オレグラム • Data API で作成したウェブサ イト & サービスのデモ • バックエンドのプログラミン グは一切なし。プラグインも なし • ファイルのアップロード、サ ムネイル作成、バックグラウ ンド再構築 • Data API を使えば、サービス のバックエンドとして Movable Type を利用可能
- 23. Data API Case 8 - ProNet 検索 http://www.sixapart.jp/pronet/ • カテゴリ、カスタムフィー ルドによる絞り込み検索 • Data API で検索を実施 • Data API の実行は、AWS 上に構築した Movable Type for AWS • ウェブサイト用のデータベー ス (RDS) を共有
- 24. Data API Case 9 - アクセスランキング • Google Analytics と連携 • Data API で Google Analytics のアクセス数を取得し、ア クセスランキングを生成 http://www.movabletype.jp/blog/data-api-v2-06.html
- 25. Data API 2.0 Introduce
- 26. Data API v1 Endpoint Create UPDATE DELETE Read Entries ⃝ ⃝ ⃝ ⃝ Comments ⃝ ⃝ ⃝ ⃝ Categories ⃝ △ Blog/Websites ⃝ ⃝ Trackbacks ⃝ ⃝ ⃝ ⃝ Users ⃝ ⃝ Site Statistics ⃝ Assets ⃝ (Upload)
- 27. 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!
- 28. • 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
- 29. How to use Data API
- 30. Basic usage http://path/to/mt/mt-data-api.cgi/v2/sites/1 エンドポイントにパラメータ を付けて呼び出す Data API のスクリプトへのパス Data API のバージョン 呼び出すメソッドとパラメータ
- 31. 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>
- 32. 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>
- 33. 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 } });
- 34. 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. Data API DEMO
- 36. Demo: オレグラム http://54.65.19.34/ User: melody Pass: mel0dynels0n
- 37. 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; });
- 38. 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(); }); });
- 39. 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 } })
- 40. 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' })
- 41. 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()); }); }); }); });
- 42. Data API Developer Resources
- 43. • 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
- 44. Infrastructure for Data API
- 45. • 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. Movable Type on Azure
- 51. Movable Type for AWS
- 53. Hourly: $0.07 / h Annual: $499 / y
- 54. Movable Type for AWS (HVM, Apache) t2.small and over
- 55. Movable Type for AWS - System component diagram Movable Type 6.1.2 Amazon Linux 2015.03 starman 0.4009 MySQL 5.5 nginx 1.6.2 or Apache HTTP Server 2.4 php-fpm 5.3.29 Perl 5.16.3
- 56. • 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
- 57. 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….
- 58. Have fun with Data API!
- 59. Thank you for listening See you soon!