Movable Type 6でData APIが追加された背景や、その活用方法についてまとめました。

1. Data APIの背景と活用方法
MTDDC Meetup HOKKAIDO 2013
2013/10/5
藤本 壱

2. 今日のアジェンダ
• 自己紹介
• APIとは？
• Data APIの背景
• Data APIの活用方法
• まとめ

3. 自己紹介

4. 自己紹介その1
• 藤本 壱（ふじもと はじめ）
• 兵庫県伊丹市出身
• 群馬県前橋市在住

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/geo
code/json?address=○○○&sensor=true_o
r_false

11. Web APIの例
• この場所（北農健保会館）の情報
http://maps.googleapis.com/maps/api/geocode/json?
address=%E5%8C%97%E8%BE%B2%E5%81%A5%E4%
BF%9D%E4%BC%9A%E9%A4%A8&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の機能／性能を
フルには引き出せない
• ネイティブアプリの利用が増加
• サーバー側との連携が必要
• HTTPでサーバーにアクセスしたい
• HTMLではなく生データが欲しい

16. Data APIの登場
• Movable Typeに対してWeb APIの形式でアク
セスする機能
• 生データを取得可能
• データの更新／削除も可能
• プログラム言語を問わない
• HTTPアクセス／JSONパースができれば良い
• PHP、Ruby、Node.js、Objective-C、Java、etc.

17. 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));

18. 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) {・・・}];

19. 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-www-
form-urlencoded”, new JsonHttpResponseHandler() {…};

20. Data APIの活用方法

21. 各種の動的処理
• 記事等の検索
• Data APIで検索条件を渡し、結果を取得してレ
ンダリング
• メインページやアーカイブページのページ
分割
• 各ページへのアクセスの際に、Data APIでデー
タを取得してレンダリング

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

23. 独自の管理画面
• mt.cgiを使わずに独自の管理画面で記事
等を管理
• 例：Movable Typeの記事ページで直接編集
できる「EntryEditorプラグイン」(小粋空間)
http://www.koikikukan.com/archives/2013/
08/08-015555.php
http://youtu.be/EmSDvwyfWK4

24. iOSアプリ／Androidアプリのバックエンド
• Movable TypeをiOSアプリ／Androidアプリのバッ
クエンドとして使用
• Movable Typeにデータを蓄積
• Data APIでデータの取得や更新を行う
• テンプレートタグでWebページも出力
• 例：
• SNS的なサイト(iOS／Android用アプリとPCサイトの連
動)
• ソーシャルゲーム(ユーザー等の情報をMovable Type
で管理)

25. APIの外部提供
• 蓄積したデータをData APIで外部に公開（サ
イトのWebサービス化）
• 外部のプログラマに様々なアプリを開発して
もらう
• Data APIをプラグインで拡張して必要なデー
タを提供
• 例：
• 大量の情報を扱う情報系サイト
(グルメ情報、就職情報、価格情報、etc.）

26. まとめ

27. これからのWeb製作
• HTML＋CSS（＋JavaScript）だけでは不足
• Webのアプリ化がさらに進行
• ネイティブアプリも一段と増加
• Data APIはアプリ化に対応するキー

28. Data APIの活用のために求められること
• プログラミング
• フロンドエンド／バックエンド両方に対する
理解
• デザイナー／コーダー／フロントエンドエン
ジニア／プログラマ等の協力体制

29. One more thing

30. Web製作者の皆様に
はじめての正規表現
for Web Creator
350円
黒い画面は怖くない
ターミナルでWeb製作を
パワーアップ
1,280円
Amazon(Kindle本)で販売中

31. Movable Type 5.1 Webサイト制作ガイド
Volume 1／Volume 2
2,500円 3,000円
http://www.h-fj.com/blog/ で販売中

32. Movable Type 6.0プロの現場の仕事術
• 11月発売予定(bit partさん頑張って…)
• マイナビ刊
• Featureing Data API
• 値段未定（2,800円程度？）

33. MTCafe Saitama 2013 Autumn
• 2013年11月2日(土) 13:30～17:00
• コワーキングスペースOffice 7f(JR大宮駅近
く)
• Featuring Data API(座学＆ワークショップ)

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