Data APIの背景と活用方法
MTCafe Nagoya Ver.
2014/1/19
藤本 壱
1
今日のアジェンダ
• 自己紹介
• APIとは?
• Data APIの背景

• Data APIの概要
• Data APIの活用方法

• まとめ

2
自己紹介

3
自己紹介その1
• 藤本 壱(ふじもと はじめ)
• 兵庫県伊丹市出身
• 群馬県前橋市在住
栃木
茨城
埼玉
山梨

東京

千葉

神奈川
4

http://kurage-bunch.com/manga/gunma/
自己紹介その2
• 本職はPC系のフリーライター

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

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

5
ブログももちろんMT

http://www.h-fj.com/blog/
6
APIとは?

7
APIとは?
• 「Application Programming Interface」の略
• あるプログラムから他のプログラムにアク
セスする際のインターフェース

• APIの例
• Google Maps API
• Windows API
• iOSのCocoa Touchなど
• Etc.
8
Web API
• Web上の各種のサービスと連携する仕組
み
• HTTPプロトコルでサーバーにアクセス
• XMLやJSONなどの形式でデータを交換
• 各種のプログラム言語からサーバーにアク
セス可能
• 様々なWeb APIが存在
• Yahoo、Google、Amazon、楽天、リクルート、
etc.
9
Web APIの例
• 住所や建物から緯度経度等を取得
(Google Geocoding API)
http://maps.googleapis.com/maps/api/geo
code/json?address=○○○&sensor=true_o
r_false

10
Web APIの例
• この場所の情報
http://maps.googleapis.com/maps/api/geocode/json?
address=%E6%84%9B%E7%9F%A5%E7%9C%8C%E5%
90%8D%E5%8F%A4%E5%B1%8B%E5%B8%82%E4%B8
%AD%E6%9D%91%E5%8C%BA%E5%90%8D%E9%A7%
85%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%91
%EF%BC%98%E2%88%92%EF%BC%95&sensor=false

11
Data APIの背景

12
よくあるWebサイト
• HTMLとCSSでページを作成
• JavaScriptを入れて動きを持たせる
• 動的なコンテンツはサーバー側(PHP等)で
生成

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

• デスクトップアプリケーションがWebアプリ
ケーションに
• 例:Webメール、Google Maps、Google Document

• Ajaxによるレンダリング
• サーバーからデータのみ受け取り
• クライアント側でJavaScriptでレンダリング

サーバー側でのHTML生成の必要性が減少
サーバーからクライアントに生データを渡す必
要性が増加

14
ネイティブアプリの流行
• iOS/Androidの伸長でネイティブアプリ化
• WebアプリではiOS/Androidの機能/性能を
フルには引き出せない
• ネイティブアプリの利用が増加
• PCではブラウザ、スマートフォン/タブレットで
はネイティブアプリで閲覧することが増加

• サーバー側との連携が必要
• HTTPでサーバーにアクセスしたい
• HTMLではなく生データが欲しい
15
Data APIの登場
• Movable Typeに対してWeb APIの形式でアク
セスする機能
• 生データを取得可能

• データの更新/削除も可能
• プログラム言語を問わない
• JavaScript用ライブラリあり
• HTTPアクセス/JSONパースができれば良い
• PHP、Ruby、Node.js、Objective-C、Java、etc.
16
Data APIの概要

17
Data APIでできること
作成

読込

更新

削除

記事

○

○

○

○

コメント

○

○

○

○

トラックバック

○

○

○

ユーザー
サイト
(ブログ/ウェブサイト)
カテゴリ

○

○

サイトの統計

○

アイテム

○
○
○

18
基本はREST
• REST=Representational State Transfer
• サーバー上の個々のデータに一意なアドレ
スを割り当て

• HTTPプロトコルで個々のデータのアドレス
にアクセスしてデータを操作
• HTTPのメソッド(GETやPOST)で操作方法を
指定

19
RESTでData APIにアクセス
• IDが1番のブログから記事を読み込む
アドレス http://your-host/mt-data-api.cgi
/v1/sites/1/entries
メソッド GET
• IDが1番のブログに記事を投稿
アドレス http://your-host/mt-data-api.cgi
/v1/sites/1/entries
メソッド POST
20
JavaScriptライブラリの初期化
• ライブラリの組み込み
<script type="text/javascript" src="http://your-host/pathto-mt/mt-static/data-api/v1/js/mt-data-api.js"></script>

• 初期化
var api = new MT.DataAPI({
baseUrl: 'http://your-host/path_to_mt/mt-data-api.cgi',
clientId: 'example'
});

21
記事の読み込み
api.listEntries(siteId, params, function(response) {
if (response.error) {
エラーに対する処理
return;
}
読み込んだ記事に対する処理
});

22
MTへのログイン
api.getToken(function(response) {
if (response.error) {
if (response.error.code === 401) {
location.href = api.getAuthorizationUrl(location.href);
}
else {
ログイン時にエラーが起きたときの処理;
}
}
else {
ログインに成功したときの処理
}
});
23
記事の投稿
api.createEntry(siteId, entryData, function(response) {
if (response.error) {
エラー時の処理
return;
}
記事作成完了時の処理
});

24
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));

25
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:NSURLRequestUseProtocolCachePolicy
timeoutInterval: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) {・・・}];

26
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”, “MTAuth
accessToken=アクセストークン”);
String url = "http://your-host/path-to-mt/mt-data-api.cgi/v1/sites/ブログ
(またはウェブサイト)のID/entries";
client.post(getBaseContext(), url, headers, params, “application/x-wwwform-urlencoded”, new JsonHttpResponseHandler() {…};
27
Androidで記事投稿する例

28
MT標準のData APIでできないこと
• 現状はバージョン1
• できないことも多い
• できないことの例
• 記事にカテゴリを割り当て
• アイテムの読み込み
• 詳細な検索
• etc.

29
プラグインでData APIを拡張可能
• エンドポイントの追加
• 読み込み/更新可能なフィールドの追加
• 例:記事のカテゴリを操作するプラグイン
http://www.h-fj.com/blog/archives/2013/09/30094306.php

30
Data APIの活用方法

31
各種の動的処理
• 記事等の検索
• Data APIで検索条件を渡し、結果を取得してレ
ンダリング

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

32
ページ分割の考え方
• Ajaxで以下のようなアドレスに接続
http://your_host/mt-data-api.cgi/v1/sites/
ブログID/entries?offset=○○&limit=□□
□□:1ページ当たりの記事の件数
○○:(ページ番号-1)*□□
• レスポンスを元にHTMLを組み立てて出力

33
独自の管理画面
• mt.cgiを使わずに独自の管理画面で記事
等を管理
• 例:書籍の第3章の事例

34
iOSアプリ/Androidアプリのバックエンド
• Movable TypeをiOSアプリ/Androidアプリのバッ
クエンドとして使用
• Movable Typeにデータを蓄積
• Data APIでデータの取得や更新を行う
• テンプレートタグでWebページも出力
• 例:
• SNS的なサイト(iOS/Android用アプリとPCサイトの連
動)
• ソーシャルゲーム(ユーザー等の情報をMovable Type
で管理)
35
APIの外部提供
• 蓄積したデータをData APIで外部に公開(サ
イトのWebサービス化)
• 外部のプログラマに様々なアプリを開発して
もらう
• Data APIをプラグインで拡張して必要なデー
タを提供
• 例:
• 大量の情報を扱う情報系サイト
(グルメ情報、就職情報、価格情報、etc.)
36
まとめ

37
Data API
• Movable TypeをWeb API形式で操作する仕
組み
• 各種オブジェクトの作成/読込/更新/削
除が可能
• Webアプリやネイティブアプリの開発に利
用可能

38
Data APIの活用のために求められること
• プログラミング
• フロンドエンド/バックエンド両方に対する
理解

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

39
One more thing

40
Movable Type 6 SPECIAL SEMINAR (大阪)
• Data APIに関するハンズオンの勉強会
&PowerCMS 4のセミナー
• 2014年1月24日(金) 13:30~18:00

• アルファサード株式会社 大阪オフィス

41
MTCafe Tokyo Data API勉強会(東京)
• Data APIに関するハンズオンの勉強会
• 2014年2月13日(木) 14:00~16:00
• トスラブ市ヶ谷 D会議室

42
Data APIハンズオン勉強会@名古屋?
• コミュニティの皆様でぜひ開催を

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

44

Data APIの背景と活用方法 MTCafe Nagoya Ver.