data apiの背景と活用方法 mtcafe nagoya ver
DESCRIPTION
Movable Type 6の新機能のData APIについて、その登場背景や、活用方法についてのセッションです、TRANSCRIPT
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系のフリーライター
5
• 2004年秋からMovable Typeユーザー
• さまざまなプラグインを開発
ブログももちろん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/geocode/json?address=○○○&sensor=true_or_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番のブログから記事を読み込む
20
アドレス 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
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>
• ライブラリの組み込み
• 初期化
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: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) {・・・}];
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”, “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() {…};
27
Androidで記事投稿する例
28
MT標準のData APIでできないこと
• 現状はバージョン1
• できないことも多い
• できないことの例
• 記事にカテゴリを割り当て
• アイテムの読み込み
• 詳細な検索
• etc.
29
プラグインでData APIを拡張可能
• エンドポイントの追加
• 読み込み／更新可能なフィールドの追加
• 例：記事のカテゴリを操作するプラグインhttp://www.h-fj.com/blog/archives/2013/09/30-094306.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
• Data APIに関するハンズオンの勉強会&PowerCMS 4のセミナー
• 2014年1月24日(金) 13:30～18:00
• アルファサード株式会社 大阪オフィス
41
Movable Type 6 SPECIAL SEMINAR (大阪)
MTCafe Tokyo Data API勉強会(東京)
• Data APIに関するハンズオンの勉強会
• 2014年2月13日(木) 14:00～16:00
• トスラブ市ヶ谷 D会議室
42
Data APIハンズオン勉強会@名古屋？
• コミュニティの皆様でぜひ開催を
43
ご清聴ありがとうございました
44