MOVABLE TYPE 6 SPECIAL SEMINAR Data APIハンズオン ... · movable type 6 special seminar data apiハンズオン勉強会. 2014/1/24. 藤本壱. 1

MOVABLE TYPE 6 SPECIAL SEMINAR

Data APIハンズオン勉強会2014/1/24藤本壱

1

前半のアジェンダ

• 自己紹介

• APIとは？

• Data APIの背景

• Data APIの概要

• Data APIの活用方法

• 前半のまとめ

2

後半のアジェンダ

• テキストで紹介している事例の紹介

• エンドポイントへのアクセス

• JavaScriptライブラリの利用

• 記事の取得

• 記事の検索

• ページ分割

• 記事の作成

• ファイルのアップロード

• PHPの例

• 記事の読み込み

• 記事の作成

3

自己紹介

4

自己紹介その1• 藤本壱（ふじもとはじめ）

• 兵庫県伊丹市出身

• 群馬県前橋市在住

東京

埼玉

山梨

神奈川

栃木

茨城

千葉

お前はまだグンマを知らないhttp://kurage-bunch.com/manga/gunma/

5

自己紹介その2

• 本職はPC系のフリーライター

• 2004年秋からMovable Typeユーザー

• さまざまなプラグインを開発6

ブログももちろんMT

http://www.h-fj.com/blog/7

APIとは？

8

APIとは？

• 「Application Programming Interface」の略

• あるプログラムから他のプログラムにアクセスする際のインターフェース

• APIの例

• Google Maps API• Windows API• iOSのCocoa Touchなど

• Etc.

9

Web API• Web上の各種のサービスと連携する仕組み

• HTTPプロトコルでサーバーにアクセス

• XMLやJSONなどの形式でデータを交換

• 各種のプログラム言語からサーバーにアクセス可能

• 様々なWeb APIが存在

• Yahoo、Google、Amazon、楽天、リクルート、etc.

10

Web APIの例

• 住所や建物から緯度経度等を取得(Google Geocoding API)http://maps.googleapis.com/maps/api/geocode/json?address=○○○&sensor=true_or_false

11

Web APIの例

• この場所の情報http://maps.googleapis.com/maps/api/geocode/json?address=%E5%A4%A7%E9%98%AA%E5%B8%82%E4%B8%AD%E5%A4%AE%E5%8C%BA%E6%B7%A1%E8%B7%AF%E7%94%BA3-2-8&sensor=false

12

Data APIの背景

13

よくあるWebサイト

• HTMLとCSSでページを作成

• JavaScriptを入れて動きを持たせる

• 動的なコンテンツはサーバー側（PHP等）で生成

14

Webブラウザのアプリケーションプラットフォーム化

• デスクトップアプリケーションがWebアプリケーションに

• 例：Webメール、Google Maps、Google Document

• Ajaxによるレンダリング

• サーバーからデータのみ受け取り

• クライアント側でJavaScriptでレンダリング

サーバー側でのHTML生成の必要性が減少

サーバーからクライアントに生データを渡す必要性が増加

15

ネイティブアプリの流行

• iOS／Androidの伸長でネイティブアプリ化

• WebアプリではiOS／Androidの機能／性能をフルには引き出せない

• ネイティブアプリの利用が増加

• PCではブラウザ、スマートフォン／タブレットではネイティブアプリで閲覧することが増加

• サーバー側との連携が必要

• HTTPでサーバーにアクセスしたい

• HTMLではなく生データが欲しい16

Data APIの登場

• Movable Typeに対してWeb APIの形式でアクセスする機能

• 生データを取得可能

• データの更新／削除も可能

• プログラム言語を問わない

• JavaScript用ライブラリあり

• HTTPアクセス／JSONパースができれば良い

• PHP、Ruby、Node.js、Objective-C、Java、etc.

17

Data APIの概要

18

Data APIでできること

作成読込更新削除

記事 ○ ○ ○ ○

コメント ○ ○ ○ ○

トラックバック ○ ○ ○

ユーザー ○ ○

サイト

（ブログ／ウェブサイト）○

カテゴリ ○

サイトの統計 ○

アイテム ○ 19

JavaScriptライブラリの初期化

var api = new MT.DataAPI({baseUrl: 'http://your-host/path_to_mt/mt-data-api.cgi',clientId: 'example'

});

<script type="text/javascript" src="http://your-host/path-to-mt/mt-static/data-api/v1/js/mt-data-api.js"></script>

• ライブラリの組み込み

• 初期化

20

記事の読み込み

api.listEntries(siteId, params, function(response) {if (response.error) {エラーに対する処理return;

}読み込んだ記事に対する処理

});

21

MTへのログインapi.getToken(function(response) {if (response.error) {if (response.error.code === 401) {location.href = api.getAuthorizationUrl(location.href);

}else {ログイン時にエラーが起きたときの処理;

}}else {ログインに成功したときの処理

}});

22

記事の作成

api.createEntry(siteId, entryData, function(response) {if (response.error) {エラー時の処理return;

}記事作成完了時の処理

});

23

PHPで記事作成$endpoint = 'http://your_host/path_to_mt/mt-data-api.cgi/v1/sites/ウェブサイト（またはブログ）のID/entries';$postdata = array(

'entry' => json_encode(array('title' => '記事のタイトル','body' => '記事の本文',

)),);$options = array('http' =>

array('method' => 'POST','header' => array(

‘X-MT-Authorization: MTAuth accessToken=アクセストークン','Content-Type: application/x-www-form-urlencoded'

),'content' => http_build_query($postdata),

));$response = file_get_contents($endpoint, false, stream_context_create($options)); 24

Objective-C(iOS)で記事作成NSURL *url = [NSURL URLWithString:@"http://your-host/path-to-mt/mt-data-api.cgi/v1/sites/ウェブサイト(またはブログ)のID/entries"];NSDictionary *entry = @{

@"title": 記事のタイトル,@"body": 記事の本文

};NSData *json = [NSJSONSerialization dataWithJSONObject:entry

options:NSJSONWritingPrettyPrinted error:&error];NSString *jsonstr = [[NSString alloc] initWithData:json encoding:NSUTF8StringEncoding];NSString *json_encoded =

(__bridge_transfer NSString *) CFURLCreateStringByAddingPercentEscapes(NULL, (__bridge CFStringRef)jsonstr, NULL,(CFStringRef)@"!*'();:@&=+$,/?%#[]", kCFStringEncodingUTF8

);NSString *query = [NSString stringWithFormat:@"entry=%@", json_encoded];NSData *reqbody = [query dataUsingEncoding:NSUTF8StringEncoding];NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL: url

cachePolicy:NSURLRequestUseProtocolCachePolicytimeoutInterval:60.0];

[request setHTTPMethod: @"POST"];[request setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];[request setValue:[NSString stringWithFormat:@"%d", [reqbody length]]

forHTTPHeaderField:@"Content-Length"];[request setValue:[NSString stringWithFormat:@“MTAuth accessToken=%@”,アクセストークン]

forHTTPHeaderField:@"X-MT-Authorization"];[request setHTTPBody:reqbody];[NSURLConnection sendAsynchronousRequest:request

queue:[NSOperationQueue mainQueue]completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {・・・}];

25

Java(Android)で記事作成AsyncHttpClient client = new AsyncHttpClient();JSONObject entry = new JSONObject();try {

entry.put("title", タイトル);entry.put("body", 本文);

} catch (JSONException e) {e.printStackTrace();

}RequestParams params = new RequestParams();params.put("entry", entry.toString());Header[] headers = new Header[1];headers[0] = new BasicHeader(“X-MT-Authorization”, “MTAuthaccessToken=アクセストークン”);String url = "http://your-host/path-to-mt/mt-data-api.cgi/v1/sites/ブログ(またはウェブサイト)のID/entries";client.post(getBaseContext(), url, headers, params, “application/x-www-form-urlencoded”, new JsonHttpResponseHandler() {…};

26

Androidで記事投稿する例

27

MT標準のData APIでできないこと

• 現状はバージョン1• できないことも多い

• できないことの例

• 記事にカテゴリを割り当て

• アイテムの読み込み

• 詳細な検索

• etc.

28

プラグインでData APIを拡張可能

• エンドポイントの追加

• 読み込み／更新可能なフィールドの追加

• 例：記事のカテゴリを操作するプラグインhttp://www.h-fj.com/blog/archives/2013/09/30-094306.php

29

Data APIの活用方法

30

各種の動的処理

• 記事等の検索

• Data APIで検索条件を渡し、結果を取得してレンダリング

• メインページやアーカイブページのページ分割

• 各ページへのアクセスの際に、Data APIでデータを取得してレンダリング

31

ページ分割の考え方

• Ajaxで以下のようなアドレスに接続http://your_host/mt-data-api.cgi/v1/sites/ブログID/entries?offset=○○&limit=□□□□：1ページ当たりの記事の件数○○：(ページ番号-1)*□□

• レスポンスを元にHTMLを組み立てて出力

32

独自の管理画面

• mt.cgiを使わずに独自の管理画面で記事等を管理

• 例：書籍の第3章の事例

33

iOSアプリ／Androidアプリのバックエンド

• Movable TypeをiOSアプリ／Androidアプリのバックエンドとして使用

• Movable Typeにデータを蓄積

• Data APIでデータの取得や更新を行う

• テンプレートタグでWebページも出力

• 例：

• SNS的なサイト(iOS／Android用アプリとPCサイトの連動)

• ソーシャルゲーム(ユーザー等の情報をMovable Typeで管理)

34

APIの外部提供

• 蓄積したデータをData APIで外部に公開（サイトのWebサービス化）

• 外部のプログラマに様々なアプリを開発してもらう

• Data APIをプラグインで拡張して必要なデータを提供

• 例：

• 大量の情報を扱う情報系サイト(グルメ情報、就職情報、価格情報、etc.）

35

前半のまとめ

36

Data API

• Movable TypeをWeb API形式で操作する仕組み

• 各種オブジェクトの作成／読込／更新／削除が可能

• Webアプリやネイティブアプリの開発に利用可能

37

Data APIの活用のために求められること

• プログラミング

• フロンドエンド／バックエンド両方に対する理解

• デザイナー／コーダー／フロントエンドエンジニア／プログラマ等の協力体制

38

前半終了です

39

後半

40

テキストで紹介している事例(第3章)

• MTCSもどき(コミュニティ系サイト)• 一般ユーザーが記事を投稿可能

• 投稿した記事を再度編集することも可能

• 実際に動作をお試しいただけます

• 管理画面にログイン

• ブログの管理画面で「サイトの表示」をクリック

41

テキストで紹介している事例(第4章)

• シックスアパートのごはんレシピhttp://makanai.sixapart.jp/

• Data APIの利用箇所

• 画像一覧で続きを自動読み込み

• サイト内検索

• タグアーカイブ

42

基本はREST

• REST＝Representational State Transfer

• サーバー上の個々のデータに一意なアドレス(エンドポイント)を割り当て

• HTTPプロトコルで個々のデータのエンドポイントにアクセスしてデータを操作

• HTTPのメソッド(GETやPOST)で操作方法を指定

43

エンドポイントへのアクセス(準備)• アクセスするとJSONが帰ってくる

• JSONを見やすくする拡張機能をインストールしておくことをお勧め

ブラウザ拡張機能

Safari safari-json-formatterChrome JSONViewFirefox JSONView

44

エンドポイントへのアクセス

• 「http://path-to-mt/mt-data-api.cgi/v1/･･･」にアクセス

• HTTPのメソッドで操作を指定

操作メソッド

取得 GET作成 POST更新 PUT削除 DELETE

https://github.com/movabletype/Documentation/wiki/Quick-reference

• 詳細なリファレンスは以下

45

https://github.com/movabletype/Documentation/wiki/Quick-reference

エンドポイントへのアクセス

• パラメータで細かな動作を指定可能

パラメータ内容

offset=n 先頭からn件のデータをスキップ

limit=n N件のデータを取得

search=XXX 検索のキーワードを指定

searchFields=XXX 検索対象のフィールドを指定

fields=XXX 読み込むフィールドを指定

46

オブジェクトの作成等

• 記事の作成や削除なども可能

• ログインの手続きが必要

• 実験してみたい方は野田様作成のMTDataAPIDebuggerを(ただし現在はクローズドベータ)

• Windows版https://junnama.blob.core.windows.net/resources/MTDataAPIDebugger_Win.zip

• Mac版https://junnama.blob.core.windows.net/resources/MTDataAPIDebugger_Mac.zip

47

JavaScriptライブラリ

• JavaScriptでData APIにアクセスするライブラリ(SixApart謹製)

• 詳細なリファレンスは以下

https://github.com/movabletype/mt-data-api-sdk-js/wiki/DataAPI-SDK-japanese-API-reference

48

https://github.com/movabletype/mt-data-api-sdk-js/wiki/DataAPI-SDK-japanese-API-reference

記事の読み込み

• api.listEntries(siteId, params, callback)


siteId ウェブサイト／ブログのIDparams(省略可能)

各種のパラメータ(エンドポイントに指定するパラメータと同じ)

callback 読み込みが終わった後に実行される関数

49

記事の検索

• paramsに検索のパラメータを指定

var params = {search:キーワード,searchFields: 検索対象のフィールド

};api.listEntries(siteId, params, function(response) { … });

50

ページ分割

• パラメータでoffsetとlimitを指定

// パラメータの設定var offset = (page_no - 1) * per_page;var params = {offset: offset,limit: per_page,

};// 記事の読み込みapi.listEntries(<$mt:BlogID$>, params, function(response) {…});

51

記事の作成

• api.createEntry(siteId, entryData, callback)


siteId ウェブサイト／ブログのIDentryData 記事を表すオブジェクト

callback 読み込みが終わった後に実行される関数

52

アイテムのアップロード

• api.uploadAsset(siteId, data, callback)


siteId ウェブサイト／ブログのIDdata アップロードするアイテムの情報

callback アップロードが終わった後に実行される関数

53

アイテムのアップロード

• dataの内容


file FileオブジェクトまたはHTMLInputElementオブジェクト

path アップロード先ディレクトリ

autoRenameIfExists

同名のファイルが存在するときに上書きするかどうか

normalizeOrientation

縦横の自動判別を行うかどうか

54

記事の読み込み(PHP)

• エンドポイントにアクセスして記事のJSONを取得

• JSONをパース

• パース結果を元にHTMLをレンダリング

55

• http://path-to-mt/mt-data-api.cgi/v1/authenticationにアクセスして認証

• 認証結果のJSONをパースしてアクセストークンを取得

• http://path-to-mt/mt-data-api.cgi/v1/sites/サイトID/entriesにアクセスして記事を送信

• 送信の際に「 X-MT-Authorization: MTAuthaccessToken=アクセストークン」のヘッダーを付加

記事の作成(PHP)

56

後半のまとめ

57

後半のまとめ

• エンドポイントにHTTPにアクセスして処理するのが原則

• JavaScriptではライブラリを使うと便利

• JavaScript以外の言語では原則に沿ってロジックを組む

58

One More Thing

59

MTDDC Meetup TOKYO 2014？

• 開催の検討中

• スポンサーにご協力を

60

MTDDC Meetup OSAKA？

• 2009年12月にMTDDC OSAKAが1度だけ開催http://www.movabletype.jp/blog/mtddc_osaka_report.html

• Meetupの開催には有志の力が必要

• 言いだしっぺ募集中

61

MTCafe

• Movable Typeのユーザーミーティング

• 東京、埼玉、札幌、名古屋、福岡等で開催

• 2013年11月2日(埼玉)• 2013年12月7日(福岡)• 2013年1月20日(名古屋)• 大阪でもいかがでしょう？

62

ご清聴ありがとうございました

63

Documents

MOVABLE TYPE 6 SPECIAL SEMINAR Data APIハンズオン ... · movable type 6 special seminar data apiハンズオン勉強会. 2014/1/24. 藤本壱. 1