Download as PDF, PPTX
![– https://en.wikipedia.org/wiki/Content_management_system
“A content management system (CMS)[1][2][3] is a computer application that
supports the creation and modification of digital content using a simple interface
to abstract away low-level details unless required, usually supporting multiple
users working in a collaborative environment.[4]
CMS features vary widely. Most CMSes include Web-based publishing, format
management, history editing and version control, indexing, search, and retrieval.
By their nature, content management systems support the separation of content
and presentation.
A web content management system (WCM or WCMS) is a CMS designed to support
the management of the content of Web pages. Most popular CMSes are also
WCMSes. Web content includes text and embedded graphics, photos, video,
audio, maps, and code (e.g., for applications) that displays content or interacts
with the user.”](https://image.slidesharecdn.com/letsbegindataapi-161009073122/75/Data-API-17-2048.jpg)
![“A content management system (CMS)[1][2][3] is a computer application that
supports the creation and modification of digital content using a simple interface
to abstract away low-level details unless required, usually supporting multiple
users working in a collaborative environment.[4]
CMS features vary widely. Most CMSes include Web-based publishing, format
management, history editing and version control, indexing, search, and retrieval.
By their nature, content management systems support the separation of content
and presentation.
A web content management system (WCM or WCMS) is a CMS designed to support
the management of the content of Web pages. Most popular CMSes are also
WCMSes. Web content includes text and embedded graphics, photos, video,
audio, maps, and code (e.g., for applications) that displays content or interacts
with the user.”
– https://en.wikipedia.org/wiki/Content_management_system](https://image.slidesharecdn.com/letsbegindataapi-161009073122/75/Data-API-18-2048.jpg)
![Show thumbnail & Rebuild
.done(function( data ) {
var url = "http://54.65.19.34/mt/mt-data-api.cgi/v2/sites/1/assets/" + data.id
+ "/thumbnail?width=400&square=true";
$.ajax({
url: url,
type: "GET",
dataType: 'json'
}).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());
});
});
});](https://image.slidesharecdn.com/letsbegindataapi-161009073122/75/Data-API-55-2048.jpg)
More Related Content
Data API ことはじめ
- 1. Data API ことはじめ MT福岡 - Web制作・運営のツボVol.1 Oct 9, 2016 YUJI TAKAYAMA @ Six Apart
- 2. My Social icon yuji yuji Yuji Takayama YUJITAKAYAMA Six Apart, Ltd. Senior Product Manager Movable Type Lead Engineer シックス・アパートで、働き始めて10年 Movable Type 一筋 好きなタグは <MTAssetProperty>
- 3. Six Apart とは シックス・アパート株式会社 CMS（コンテンツ・マネジメント・システム）や、ブログサービス、 ソーシャルメディア連携サービスなど、企業のWEBマーケティングを 支援する製品・サービスを提供しています。 BLOG CMS BLOG Service BLOG Service
- 4. Movable Type とは MovableType 1.0 Movable Type 6.3.2 2001年 2016年 サンフランシスコ生まれの 世界標準 CMS パブリッシングプラットフォーム。 世界中のユーザーに使われ続けて 15年。
- 5.
- 6. 全国に広がる Movable TypeUsers Group 北海道 東北 東京 新潟 長野 名古屋 関西 神戸 広島 愛媛 福岡 鹿児島 佐賀 熊本 日本全国に 14 のユーザーグループ MTDDC Meetup MT 勉強会 MT Cafe MT Live 全国で開催されているイベント 長崎・大分・宮崎にできると全県制覇
- 7.
- 8.
- 9.
- 10.
- 11.
- 14.
- 15. – https://ja.wikipedia.org/wiki/コンテンツマネージメントシステム コンテンツマネジメントシステム（英: content managementsystem, CMS）は、ウェブコンテ ンツを構成するテキストや画像などのデジタル コンテンツを統合・体系的に管理し、配信など 必要な処理を行うシステムの総称。2005年頃よ り一般的に普及したといわれる。コンテンツ管 理システムとも呼ばれる。
- 16. コンテンツマネジメントシステム（英: content management system,CMS）は、ウェブコンテ ンツを構成するテキストや画像などのデジタル コンテンツを統合・体系的に管理し、配信など 必要な処理を行うシステムの総称。2005年頃よ り一般的に普及したといわれる。コンテンツ管 理システムとも呼ばれる。 – https://ja.wikipedia.org/wiki/コンテンツマネージメントシステム
- 17. – https://en.wikipedia.org/wiki/Content_management_system “A contentmanagement system (CMS)[1][2][3] is a computer application that supports the creation and modification of digital content using a simple interface to abstract away low-level details unless required, usually supporting multiple users working in a collaborative environment.[4] CMS features vary widely. Most CMSes include Web-based publishing, format management, history editing and version control, indexing, search, and retrieval. By their nature, content management systems support the separation of content and presentation. A web content management system (WCM or WCMS) is a CMS designed to support the management of the content of Web pages. Most popular CMSes are also WCMSes. Web content includes text and embedded graphics, photos, video, audio, maps, and code (e.g., for applications) that displays content or interacts with the user.”
- 18. “A content managementsystem (CMS)[1][2][3] is a computer application that supports the creation and modification of digital content using a simple interface to abstract away low-level details unless required, usually supporting multiple users working in a collaborative environment.[4] CMS features vary widely. Most CMSes include Web-based publishing, format management, history editing and version control, indexing, search, and retrieval. By their nature, content management systems support the separation of content and presentation. A web content management system (WCM or WCMS) is a CMS designed to support the management of the content of Web pages. Most popular CMSes are also WCMSes. Web content includes text and embedded graphics, photos, video, audio, maps, and code (e.g., for applications) that displays content or interacts with the user.” – https://en.wikipedia.org/wiki/Content_management_system
- 19. CMS Features inMovable Type 認証 / 認可 / ユーザー管理 テンプレートエンジン / マークアップ言語 コンテンツ設計 / 管理 / 編集 ファイル管理 Static Site Generation REST API
- 20. Movable Type Data API3.0 REST/JSON API for every websites and applications Released with Movable Type 6.2 on Oct 8, 2015
- 21. Movable Type 6.0 DataAPI 1.0 - 2013.10.17 - Movable Type 6.1 Data API 2.0 - 2015.2.12 - Movable Type 6.2 Data API 3.0 - 2015.10.8 -
- 22.
- 23. Data API Overview REST/JSONを用いた標準的な Web API API エンドポイントはバージョン単位で利用可能 MT のユーザー管理 / 認証を API でそのまま利用可能 エンドポイント、出力フォーマットなどプラグインで拡張可能 SDK ライブラリ: JavaScript / Swift / 有志の方の実装
- 24. Case of DataAPI
- 25. Data API Case1 - COACH UNITED • トップページの記事一覧を Data API で無限スクロール • ページ遷移が必要ない • 【利用者目線】気になる記 事を探しやすく • 【制作者目線】ページ分割 のための再構築が不要 = 負 荷が低減 http://coachunited.jp/
- 26. Data API Case2 - ワンダードライビング • エンドポイントを独自拡張 • Google Analytics と連携し、 アクセス数の多い記事をラ ンキング表示 • 記事のサムネイルを生成 • 静的生成 + ダイナミックコ ンテンツ http://wonderdriving.com/
- 27. Data API Case3 - 関連記事の表示 • 記事のタグを元に関連する 記事を動的に表示する • 古い記事でも再構築なしで 情報がリアルタイムに表示 できる • MTML + Data API http://movabletype.jp/
- 28. Data API Case4 - Movable Type Writer • Google Chrome App • HTML + JavaScript + CSS • AngularJS + Bootstrap • Movable Type の管理画面 を使わずにユーザーニーズ に応える • コンテンツに合わせて画面 をカスタマイズする
- 29. Data API Case5 - Kintone plugin • サイボウズ kintone から Movable Typeへ Data API で投稿HTML + JavaScript + CSS • ワークフローに強い kintone と MTML で自由な デザインができる Movable Type のコラボ • それぞれの強みを活かせる http://radical-bridge.com/product/kintone-mt-plugin.html
- 30. Data API Case6 - Nintendo 3DS • Nintendo 3DS でとった写 真を、Data API を利用して Movable Type にアップロー ドすることで、自前のフォ トギャラリーを運営 • 写真を取り出してアップロー ドするという手間がいらな い http://www.slideshare.net/kaorislideshare/six-apart
- 31. Data API Case7 - オレグラム • Data API で作成したウェブサ イト & サービスのデモ • バックエンドのプログラミン グは一切なし。プラグインも なし • ファイルのアップロード、サ ムネイル作成、バックグラウ ンド再構築 • Data API を使えば、サービス のバックエンドとして Movable Type を利用可能
- 32. Data API Case8 - ProNet 検索 http://www.sixapart.jp/pronet/ • カテゴリ、カスタムフィー ルドによる絞り込み検索 • Data API で検索を実施 • Data API の実行は、AWS 上に構築した Movable Type for AWS • ウェブサイト用のデータベー ス (RDS) を共有
- 33. Data API Case9 - アクセスランキング • Google Analytics と連携 • Data API で Google Analytics のアクセス数を取得し、ア クセスランキングを生成 http://www.movabletype.jp/blog/data-api-v2-06.html
- 34. Data API Case10 - Movable Type for iOS • Swift ライブラリを使った iOS 用ネイティブアプリ • ネイティブアプリだからこ そのサクサク動作 • 必要最小限の API 呼び出し • オフラインへの対応 http://www.sixapart.jp/movabletype/mtios/
- 35. Why Data API? PCやスマートフォンに限らず Web の世界は広がる スマホ対応だけがマルチデバイス対応ではない リッチな表現はフロントエンドで実現可能 Perl 以外の言語から Movable Type が利用できる CMS で管理するコンテンツを API で利用する
- 36. Build web pages Responsive WebDesign <html> Content Templates Before Data API
- 37. Build web pages Webpages Mobile Applications Templates TV Watch fridgeCar Digital Signage Data API <html> Content Data API Any Devices Other Services After Data API
- 38. Data API -What can ほぼすべてのオブジェクトに対して操作を実行可能 システム全域あるいはサイト単位で Data API の公開を制限 ファイルをアップロードし、サムネイルを作る テンプレートを再構築する サイトを横断した検索が可能
- 39.
- 40. Movable Type User Management UserAuthentication Template Engine Markup Language Data Manage Database Schama Upload File Data API Your Applications Your Web Services
- 41. Mobile First? Responsive WebDesign • マルチデバイスに対応した画像 • 新しい画面サイズ • 未知のデバイスの登場 API Based Mobile First • デバイスに応じた適切な画像サイズ • デバイス、スクリーンに応じた情報 • 必要最低限の通信量
- 42. Mobile First 10月9日 15時 Web制作・運営のツ… 11月12日12時 MTDDC Meetup TO… 例えば時計型デバイス
- 43.
- 44. The web ofThings “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 —
- 45.
- 46. Scenario / Usecase CLI で Movable Type を操作 Data API を使って MT からログを取得 取得したログをログ解析ツールに処理させる エラーやセキュリティ上の問題の早期発見
- 47.
- 48. Other examples… Active Directoryへのアカウント登録と連動して Movable Type にユーザーを登録する 商品DBへの登録と連動して、Movable Type に商品の記事を作成 する $ mt user add userdata.json $ mt entry add product.json
- 49.
- 50.
- 51. Mobile Applications Web Browser Upload Rebuild mainindex Make thumbnail System Diagram
- 52. Open sign-in page $('#login').click(function() { location.href = "http://54.65.19.34/mt/mt-data-api.cgi/v2/authorization? redirectUrl=" + encodeURIComponent( window.location ) + "&clientId=fake- instagram"; });
- 53. Show username $(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(); }); });
- 54. Upload file $('#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 } })
- 55. Show thumbnail &Rebuild .done(function( data ) { var url = "http://54.65.19.34/mt/mt-data-api.cgi/v2/sites/1/assets/" + data.id + "/thumbnail?width=400&square=true"; $.ajax({ url: url, type: "GET", dataType: 'json' }).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()); }); }); });
- 56.
- 57.
- 58.
- 59. The future forData API
- 60.
- 61. Data API v4 OAuth2 JSON Web Token Anonymous Web Access Token Web hook / Push / Notification SDK and more…
- 62. まとめ CMS ≠ (Static)Site Generator (Static) Site Generation is a part of the CMS features Web page is a kind of content CMS + API = Application Framework
- 63. Have fun withData API!
- 64.
- 65.
- 66. Thank you forlistening