Data APIの基本

MTCafe Saitama 2013 Autumn
2013/11/2
藤本 壱
今日のアジェンダ
• 自己紹介
• APIとは?
• Data APIの背景
• Data APIの概要
• Data APIの活用方法
• まとめ
自己紹介
自己紹介その1
• 藤本 壱(ふじもと はじめ)
• 兵庫県伊丹市出身
• 群馬県前橋市在住
自己紹介その2
• 本職はPC系のフリーライター

2004年秋からMovable Typeユーザー
さまざまなプラグインを開発
ブログももちろんMT

http://www.h-fj.com/blog/
APIとは?
APIとは?
• 「Application Programming Interface」の略
• あるプログラムから他のプログラムにアク
セスする際のインターフェース
• APIの例
• Google Maps API
• Windows AP...
Web API
• Web上の各種のサービスと連携する仕組
み
• HTTPプロトコルでサーバーにアクセス
• XMLやJSONなどの形式でデータを交換
• 各種のプログラム言語からサーバーにアク
セス可能
• 様々なWeb APIが存在
• ...
Web APIの例
• 住所や建物から緯度経度等を取得
(Google Geocoding API)
http://maps.googleapis.com/maps/api/geo
code/json?address=○○○&sensor=tr...
Web APIの例
• この場所の情報
http://maps.googleapis.com/maps/api/geocode/jso
n?address=%E5%9F%BC%E7%8E%89%E7%9C%8C%E
3%81%95%E3%81%...
Data APIの背景
よくあるWebサイト
• HTMLとCSSでページを作成
• 一部にJavaScriptを入れてちょっとした動き
を持たせる
• 動的なコンテンツはサーバー側(PHP等)で
生成
Webブラウザのアプリケーションプラットフォーム化

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

• Ajaxによるレンダリング
• サーバーから...
ネイティブアプリの流行
• iOS/Androidの伸長でネイティブアプリ化
• WebアプリではiOS/Androidの機能/性能を
フルには引き出せない
• ネイティブアプリの利用が増加
• PCではブラウザ、スマートフォン/タブレットで
...
Data APIの登場
• Movable Typeに対してWeb APIの形式でアク
セスする機能
• 生データを取得可能
• データの更新/削除も可能
• プログラム言語を問わない
• JavaScript用ライブラリあり
• HTTPアク...
Data APIの概要
Data APIでできること
作成

読込

更新

削除

記事

○

○

○

○

コメント

○

○

○

○

トラックバック

○

○

○

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

○

○

○

サイ...
JavaScriptライブラリの初期化
• ライブラリの組み込み
<script type="text/javascript" src="http://your-host/pathto-mt/mt-static/data-api/v1/js/m...
記事の読み込み
api.listEntries(siteId, params, function(response) {
if (response.error) {
エラーに対する処理
return;
}
読み込んだ記事に対する処理
});
MTへのログイン
api.getToken(function(response) {
if (response.error) {
if (response.error.code === 401) {
location.href = api.ge...
記事の投稿
api.createEntry(siteId, entryData, function(response) {
if (response.error) {
エラー時の処理
return;
}
記事作成完了時の処理
});
PHPで記事投稿
$endpoint = 'http://your_host/path_to_mt/mt-data-api.cgi/v1/sites/ウェブサイト
(またはブログ)のID/entries';
$postdata = array(...
Objective-C(iOS)で記事投稿
NSURL *url = [NSURL URLWithString:@"http://your-host/path-to-mt/mt-data-api.cgi/v1/sites/ウェブサイト
(または...
Java(Android)で記事投稿
AsyncHttpClient client = new AsyncHttpClient();
JSONObject entry = new JSONObject();
try {
entry.put("t...
プラグインでData APIを拡張可能
• エンドポイントの追加
• 読み込み/更新可能なフィールドの追加
• 例:記事のカテゴリを操作するプラグイン
http://www.h-fj.com/blog/archives/2013/09/3009...
Data APIの活用方法
各種の動的処理
• 記事等の検索
• Data APIで検索条件を渡し、結果を取得してレ
ンダリング

• メインページやアーカイブページのページ
分割
• 各ページへのアクセスの際に、Data APIでデー
タを取得してレンダリング
ページ分割の考え方
• Ajaxで以下のようなアドレスに接続
http://your_host/mt-data-api.cgi/v1/sites/
ブログID/entries?offset=○○&limit=□□
□□:1ページ当たりの記事の件...
独自の管理画面
• mt.cgiを使わずに独自の管理画面で記事
等を管理
• 例:Movable Typeの記事ページで直接編集
できる「EntryEditorプラグイン」(小粋空間)
http://www.koikikukan.com/arc...
iOSアプリ/Androidアプリのバックエンド
• Movable TypeをiOSアプリ/Androidアプリのバッ
クエンドとして使用
• Movable Typeにデータを蓄積
• Data APIでデータの取得や更新を行う
• テンプ...
APIの外部提供
• 蓄積したデータをData APIで外部に公開(サ
イトのWebサービス化)
• 外部のプログラマに様々なアプリを開発して
もらう
• Data APIをプラグインで拡張して必要なデー
タを提供
• 例:
• 大量の情報を扱...
まとめ
Data API
• Movable TypeをRESTで操作する仕組み
• 各種オブジェクトの作成/読込/更新/削
除が可能
• Webアプリやネイティブアプリの開発に利
用可能
Data APIの活用のために求められること
• プログラミング
• フロンドエンド/バックエンド両方に対する
理解
• デザイナー/コーダー/フロントエンドエン
ジニア/プログラマ等の協力体制
One more thing
Movable Type 6 本格活用ガイドブック
• 近日発売予定
• bit partさんとの共著
• マイナビ刊
• Featuring Data API
• 予価3,444円
Movable Type 6本格活用セミナー
~マイナビ クリエイターズ Power Session Vol.3

• 11月28日(木曜日) 19時~21時
• マイナビ本社(東京メトロ東西線竹橋駅)
• 定員100名
• 参加費
• 400...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in...5
×

Data APIの基本

4,343

Published on

2013年11月2日開催の「MTCafe Saitama 2013 Autumn」のセッション「Data APIの基本」のスライドです

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,343
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Data APIの基本

  1. 1. Data APIの基本 MTCafe Saitama 2013 Autumn 2013/11/2 藤本 壱
  2. 2. 今日のアジェンダ • 自己紹介 • APIとは? • Data APIの背景 • Data APIの概要 • Data APIの活用方法 • まとめ
  3. 3. 自己紹介
  4. 4. 自己紹介その1 • 藤本 壱(ふじもと はじめ) • 兵庫県伊丹市出身 • 群馬県前橋市在住
  5. 5. 自己紹介その2 • 本職はPC系のフリーライター 2004年秋からMovable Typeユーザー さまざまなプラグインを開発
  6. 6. ブログももちろんMT http://www.h-fj.com/blog/
  7. 7. APIとは?
  8. 8. APIとは? • 「Application Programming Interface」の略 • あるプログラムから他のプログラムにアク セスする際のインターフェース • APIの例 • Google Maps API • Windows API • iOSのCocoa Touchなど • Etc.
  9. 9. Web API • Web上の各種のサービスと連携する仕組 み • HTTPプロトコルでサーバーにアクセス • XMLやJSONなどの形式でデータを交換 • 各種のプログラム言語からサーバーにアク セス可能 • 様々なWeb APIが存在 • Yahoo、Google、Amazon、楽天、リクルート、 etc.
  10. 10. Web APIの例 • 住所や建物から緯度経度等を取得 (Google Geocoding API) http://maps.googleapis.com/maps/api/geo code/json?address=○○○&sensor=true_o r_false
  11. 11. Web APIの例 • この場所の情報 http://maps.googleapis.com/maps/api/geocode/jso n?address=%E5%9F%BC%E7%8E%89%E7%9C%8C%E 3%81%95%E3%81%84%E3%81%9F%E3%81%BE%E5 %B8%82%E5%A4%A7%E5%AE%AE%E5%8C%BA%E5 %AE%AE%E7%94%BA%EF%BC%91%E4%B8%81%E7 %9B%AE%EF%BC%95%E9%8A%80%E5%BA%A7%E3 %83%93%E3%83%AB7%E9%9A%8E&sensor=false
  12. 12. Data APIの背景
  13. 13. よくあるWebサイト • HTMLとCSSでページを作成 • 一部にJavaScriptを入れてちょっとした動き を持たせる • 動的なコンテンツはサーバー側(PHP等)で 生成
  14. 14. Webブラウザのアプリケーションプラットフォーム化 • デスクトップアプリケーションがWebアプリ ケーションに • 例:Webメール、Google Maps、Google Document • Ajaxによるレンダリング • サーバーからデータのみ受け取り • クライアント側でJavaScriptでレンダリング サーバー側でのHTML生成の必要性が減少 サーバーからクライアントに生データを渡す必 要性が増加
  15. 15. ネイティブアプリの流行 • iOS/Androidの伸長でネイティブアプリ化 • WebアプリではiOS/Androidの機能/性能を フルには引き出せない • ネイティブアプリの利用が増加 • PCではブラウザ、スマートフォン/タブレットで はネイティブアプリで閲覧することが増加 • サーバー側との連携が必要 • HTTPでサーバーにアクセスしたい • HTMLではなく生データが欲しい
  16. 16. Data APIの登場 • Movable Typeに対してWeb APIの形式でアク セスする機能 • 生データを取得可能 • データの更新/削除も可能 • プログラム言語を問わない • JavaScript用ライブラリあり • HTTPアクセス/JSONパースができれば良い • PHP、Ruby、Node.js、Objective-C、Java、etc.
  17. 17. Data APIの概要
  18. 18. Data APIでできること 作成 読込 更新 削除 記事 ○ ○ ○ ○ コメント ○ ○ ○ ○ トラックバック ○ ○ ○ ユーザー サイト (ブログ/ウェブサイト) カテゴリ ○ ○ ○ サイトの統計 ○ アイテム ○ ○
  19. 19. 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' });
  20. 20. 記事の読み込み api.listEntries(siteId, params, function(response) { if (response.error) { エラーに対する処理 return; } 読み込んだ記事に対する処理 });
  21. 21. MTへのログイン api.getToken(function(response) { if (response.error) { if (response.error.code === 401) { location.href = api.getAuthorizationUrl(location.href); } else { ログイン時にエラーが起きたときの処理; } } else { ログインに成功したときの処理 } });
  22. 22. 記事の投稿 api.createEntry(siteId, entryData, function(response) { if (response.error) { エラー時の処理 return; } 記事作成完了時の処理 });
  23. 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. 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: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) {・・・}];
  25. 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”, “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() {…};
  26. 26. プラグインでData APIを拡張可能 • エンドポイントの追加 • 読み込み/更新可能なフィールドの追加 • 例:記事のカテゴリを操作するプラグイン http://www.h-fj.com/blog/archives/2013/09/30094306.php
  27. 27. Data APIの活用方法
  28. 28. 各種の動的処理 • 記事等の検索 • Data APIで検索条件を渡し、結果を取得してレ ンダリング • メインページやアーカイブページのページ 分割 • 各ページへのアクセスの際に、Data APIでデー タを取得してレンダリング
  29. 29. ページ分割の考え方 • Ajaxで以下のようなアドレスに接続 http://your_host/mt-data-api.cgi/v1/sites/ ブログID/entries?offset=○○&limit=□□ □□:1ページ当たりの記事の件数 ○○:(ページ番号-1)*□□ • レスポンスを元にHTMLを組み立てて出力
  30. 30. 独自の管理画面 • mt.cgiを使わずに独自の管理画面で記事 等を管理 • 例:Movable Typeの記事ページで直接編集 できる「EntryEditorプラグイン」(小粋空間) http://www.koikikukan.com/archives/2013/ 08/08-015555.php http://youtu.be/EmSDvwyfWK4
  31. 31. iOSアプリ/Androidアプリのバックエンド • Movable TypeをiOSアプリ/Androidアプリのバッ クエンドとして使用 • Movable Typeにデータを蓄積 • Data APIでデータの取得や更新を行う • テンプレートタグでWebページも出力 • 例: • SNS的なサイト(iOS/Android用アプリとPCサイトの連 動) • ソーシャルゲーム(ユーザー等の情報をMovable Type で管理)
  32. 32. APIの外部提供 • 蓄積したデータをData APIで外部に公開(サ イトのWebサービス化) • 外部のプログラマに様々なアプリを開発して もらう • Data APIをプラグインで拡張して必要なデー タを提供 • 例: • 大量の情報を扱う情報系サイト (グルメ情報、就職情報、価格情報、etc.)
  33. 33. まとめ
  34. 34. Data API • Movable TypeをRESTで操作する仕組み • 各種オブジェクトの作成/読込/更新/削 除が可能 • Webアプリやネイティブアプリの開発に利 用可能
  35. 35. Data APIの活用のために求められること • プログラミング • フロンドエンド/バックエンド両方に対する 理解 • デザイナー/コーダー/フロントエンドエン ジニア/プログラマ等の協力体制
  36. 36. One more thing
  37. 37. Movable Type 6 本格活用ガイドブック • 近日発売予定 • bit partさんとの共著 • マイナビ刊 • Featuring Data API • 予価3,444円
  38. 38. Movable Type 6本格活用セミナー ~マイナビ クリエイターズ Power Session Vol.3 • 11月28日(木曜日) 19時~21時 • マイナビ本社(東京メトロ東西線竹橋駅) • 定員100名 • 参加費 • 4000円(書籍付) • 5000円(書籍+電子書籍付)
  39. 39. ご清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×