Data APIの基本
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Data APIの基本

  • 4,105 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,105
On Slideshare
4,032
From Embeds
73
Number of Embeds
6

Actions

Shares
Downloads
7
Comments
0
Likes
4

Embeds 73

http://www.h-fj.com 44
http://cloud.feedly.com 14
https://twitter.com 6
http://fujimoto15.rssing.com 5
http://www.feedspot.com 3
http://www.newsblur.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Data APIの基本 MTCafe Saitama 2013 Autumn 2013/11/2 藤本 壱
  • 2. 今日のアジェンダ • 自己紹介 • APIとは? • Data 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/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. 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ライブラリの初期化 • ライブラリの組み込み <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. 記事の読み込み 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: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. 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. プラグインでData APIを拡張可能 • エンドポイントの追加 • 読み込み/更新可能なフィールドの追加 • 例:記事のカテゴリを操作するプラグイン http://www.h-fj.com/blog/archives/2013/09/30094306.php
  • 27. Data APIの活用方法
  • 28. 各種の動的処理 • 記事等の検索 • Data APIで検索条件を渡し、結果を取得してレ ンダリング • メインページやアーカイブページのページ 分割 • 各ページへのアクセスの際に、Data APIでデー タを取得してレンダリング
  • 29. ページ分割の考え方 • Ajaxで以下のようなアドレスに接続 http://your_host/mt-data-api.cgi/v1/sites/ ブログID/entries?offset=○○&limit=□□ □□:1ページ当たりの記事の件数 ○○:(ページ番号-1)*□□ • レスポンスを元にHTMLを組み立てて出力
  • 30. 独自の管理画面 • mt.cgiを使わずに独自の管理画面で記事 等を管理 • 例:Movable Typeの記事ページで直接編集 できる「EntryEditorプラグイン」(小粋空間) http://www.koikikukan.com/archives/2013/ 08/08-015555.php http://youtu.be/EmSDvwyfWK4
  • 31. iOSアプリ/Androidアプリのバックエンド • Movable TypeをiOSアプリ/Androidアプリのバッ クエンドとして使用 • Movable Typeにデータを蓄積 • Data APIでデータの取得や更新を行う • テンプレートタグでWebページも出力 • 例: • SNS的なサイト(iOS/Android用アプリとPCサイトの連 動) • ソーシャルゲーム(ユーザー等の情報をMovable Type で管理)
  • 32. APIの外部提供 • 蓄積したデータをData APIで外部に公開(サ イトのWebサービス化) • 外部のプログラマに様々なアプリを開発して もらう • Data APIをプラグインで拡張して必要なデー タを提供 • 例: • 大量の情報を扱う情報系サイト (グルメ情報、就職情報、価格情報、etc.)
  • 33. まとめ
  • 34. Data API • Movable TypeをRESTで操作する仕組み • 各種オブジェクトの作成/読込/更新/削 除が可能 • Webアプリやネイティブアプリの開発に利 用可能
  • 35. Data APIの活用のために求められること • プログラミング • フロンドエンド/バックエンド両方に対する 理解 • デザイナー/コーダー/フロントエンドエン ジニア/プログラマ等の協力体制
  • 36. One more thing
  • 37. Movable Type 6 本格活用ガイドブック • 近日発売予定 • bit partさんとの共著 • マイナビ刊 • Featuring Data API • 予価3,444円
  • 38. Movable Type 6本格活用セミナー ~マイナビ クリエイターズ Power Session Vol.3 • 11月28日(木曜日) 19時~21時 • マイナビ本社(東京メトロ東西線竹橋駅) • 定員100名 • 参加費 • 4000円(書籍付) • 5000円(書籍+電子書籍付)
  • 39. ご清聴ありがとうございました