Data API ことはじめ

Data API ことはじめ

MT 福岡 - Web制作・運営のツボVol.1 Oct 9, 2016

YUJI TAKAYAMA @ Six Apart

My Social

icon

yuji

yuji

Yuji Takayama

YUJI TAKAYAMASix Apart, Ltd.

Senior Product Manager Movable Type Lead Engineer

シックス・アパートで、働き始めて10年

Movable Type 一筋

好きなタグは <MTAssetProperty>

Six Apart とは

シックス・アパート株式会社

CMS（コンテンツ・マネジメント・システム）や、ブログサービス、

ソーシャルメディア連携サービスなど、企業のWEBマーケティングを

支援する製品・サービスを提供してい ます。

BLOG CMS

BLOG Service BLOG Service

Movable Type とは

Movable Type 1.0 Movable Type 6.3.2

2001年 2016年

サンフランシスコ生まれの

世界標準 CMS パブリッシングプラットフォーム。

世界中のユーザーに使われ続けて 15年。

10月8日は、Movable Type 誕生日

全国に広がる Movable Type Users Group

北海道

東北

東京

新潟

長野

名古屋

関西

神戸

広島

愛媛

福岡

鹿児島

佐賀

熊本

日本全国に 14 のユーザーグループ

MTDDC Meetup

MT 勉強会

MT Cafe

MT Live

全国で開催されているイベント

長崎・大分・宮崎にできると全県制覇

Movable TypeAKKO Pro

CMS

Content Management System

Content

開催日時

開催日時

イベント名

会場

講師

サブ情報

主催者

説明文

タグ

費用

ウェブページ

写真 所属

名前

プロフィール

– https://ja.wikipedia.org/wiki/コンテンツマネージメントシステム

“コンテンツマネジメントシステム（英: content

management system, CMS）は、ウェブコンテ

ンツを構成するテキストや画像などのデジタル

コンテンツを統合・体系的に管理し、配信など

必要な処理を行うシステムの総称。2005年頃よ

り一般的に普及したといわれる。コンテンツ管

理システムとも呼ばれる。”

“コンテンツマネジメントシステム（英: content

management system, CMS）は、ウェブコンテ

ンツを構成するテキストや画像などのデジタル

コンテンツを統合・体系的に管理し、配信など

必要な処理を行うシステムの総称。2005年頃よ

り一般的に普及したといわれる。コンテンツ管

理システムとも呼ばれる。”

– https://ja.wikipedia.org/wiki/コンテンツマネージメントシステム

– 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.”

“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

CMS Features in Movable Type

認証 / 認可 / ユーザー管理

テンプレートエンジン / マークアップ言語

コンテンツ設計 / 管理 / 編集

ファイル管理

Static Site Generation

REST API

Movable Type Data API 3.0

REST/JSON API for every websites and applications

Released with Movable Type 6.2 on Oct 8, 2015

Movable Type 6.0

Data API 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 -

Data API Overview

Data API Overview

REST/JSON を用いた標準的な Web API

API エンドポイントはバージョン単位で利用可能

MT のユーザー管理 / 認証を API でそのまま利用可能

エンドポイント、出力フォーマットなどプラグインで拡張可能

SDK ライブラリ: JavaScript / Swift / 有志の方の実装

Case of 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 Case 9 - アクセスランキング

• Google Analytics と連携

• Data API で Google Analytics

のアクセス数を取得し、ア

クセスランキングを生成

http://www.movabletype.jp/blog/data-api-v2-06.html

Data API Case 10 - Movable Type for iOS

• Swift ライブラリを使った

iOS 用ネイティブアプリ

• ネイティブアプリだからこ

そのサクサク動作

• 必要最小限の API 呼び出し

• オフラインへの対応

http://www.sixapart.jp/movabletype/mtios/

Why Data API?

PC やスマートフォンに限らず Web の世界は広がる

スマホ対応だけがマルチデバイス対応ではない

リッチな表現はフロントエンドで実現可能

Perl 以外の言語から Movable Type が利用できる

CMS で管理するコンテンツを API で利用する

Build web pages

Responsive Web Design

<html>

Content

Templates

Before Data API

Build web pages

Web pages

Mobile Applications

Templates

TV Watch

fridgeCarDigital

Signage

Data API

<html>

Content

Data API

Any Devices

Other Services

After Data API

Data API - What can

ほぼすべてのオブジェクトに対して操作を実行可能

システム全域あるいはサイト単位で Data API の公開を制限

ファイルをアップロードし、サムネイルを作る

テンプレートを再構築する

サイトを横断した検索が可能

CMS + API

Application Framework

＝

Movable Type

User Management User Authentication

Template Engine Markup Language

Data Manage Database SchamaUpload File

Data API

Your Applications Your Web Services

Mobile First?

Responsive Web Design• マルチデバイスに対応した画像 • 新しい画面サイズ • 未知のデバイスの登場

API Based Mobile First• デバイスに応じた適切な画像サイズ • デバイス、スクリーンに応じた情報 • 必要最低限の通信量

Mobile First

10月9日 15時 Web制作・運営のツ…

11月12日 12時 MTDDC Meetup TO…

例えば時計型デバイス

Mobile First

例えばARデバイス

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 —

DEMO

Scenario / Use case

CLI で Movable Type を操作

Data API を使って MT からログを取得

取得したログをログ解析ツールに処理させる

エラーやセキュリティ上の問題の早期発見

https://github.com/yuji/mtlog/blob/master/mtlog.go

Source Code

Other examples…

Active Directory へのアカウント登録と連動して Movable Type

にユーザーを登録する

商品DBへの登録と連動して、Movable Type に商品の記事を作成

する

$ mt user add userdata.json

$ mt entry add product.json

DEMO Part2

Scenario

写真投稿ウェブサービス（○ンス○グラム）

スマホのアプリから投稿

スマホアプリとウェブ

http://54.65.19.34/ user: melody

password: mel0dynels0n

Mobile Applications

Web Browser

Upload

Rebuild main index

Make thumbnail

System Diagram

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"; });

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(); }); });

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 } })

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()); }); }); });

Knowledge

http://www.movabletype.jp/developers/data-api/

Documentation Portal

http://qiita.com/organizations/sixapart

Technical Know-How

The future for Data API

Data API v4

リソースのフィールド名やエンドポイントパラメータの整理

ユーティリティ系エンドポイント

list系でカスタムフィールドによるフィルタリングとソート

DataAPI の利用権限の制限

Data API v4

OAuth 2

JSON Web Token

Anonymous Web Access Token

Web hook / Push / Notification

SDK

and more…

まとめ

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

Have fun with Data API!

https://www.sixapart.jp/inquiry/jobs-engineer.html

Software Engineer

QA Engineer

DevOps

Designer

http://mtddc2016.mt-tokyo.net/

Thank you for listening