Data APIの背景と活用方法 MTCafe Nagoya Ver.
•
1 j'aime•5,273 vues
Movable Type 6の新機能のData APIについて、その登場背景や、活用方法についてのセッションです、
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Data APIの背景と活用方法 MTCafe Nagoya Ver.
Similaire à Data APIの背景と活用方法 MTCafe Nagoya Ver. (20)
Plus de Hajime Fujimoto
Plus de Hajime Fujimoto (16)
Dernier
Dernier (11)
Data APIの背景と活用方法 MTCafe Nagoya Ver.
- 1. Data APIの背景と活用方法 MTCafe Nagoya Ver. 2014/1/19 藤本 壱 1
- 2. 今日のアジェンダ • 自己紹介 • APIとは？ • Data APIの背景 • Data APIの概要 • Data APIの活用方法 • まとめ 2
- 3. 自己紹介 3
- 4. 自己紹介その1 • 藤本 壱（ふじもと はじめ） • 兵庫県伊丹市出身 • 群馬県前橋市在住 栃木 茨城 埼玉 山梨 東京 千葉 神奈川 4 http://kurage-bunch.com/manga/gunma/
- 5. 自己紹介その2 • 本職はPC系のフリーライター • 2004年秋からMovable Typeユーザー • さまざまなプラグインを開発 5
- 7. APIとは？ 7
- 8. APIとは？ • 「Application Programming Interface」の略 • あるプログラムから他のプログラムにアク セスする際のインターフェース • APIの例 • Google Maps API • Windows API • iOSのCocoa Touchなど • Etc. 8
- 9. Web API • Web上の各種のサービスと連携する仕組 み • HTTPプロトコルでサーバーにアクセス • XMLやJSONなどの形式でデータを交換 • 各種のプログラム言語からサーバーにアク セス可能 • 様々なWeb APIが存在 • Yahoo、Google、Amazon、楽天、リクルート、 etc. 9
- 10. Web APIの例 • 住所や建物から緯度経度等を取得 (Google Geocoding API) http://maps.googleapis.com/maps/api/geo code/json?address=○○○&sensor=true_o r_false 10
- 12. Data APIの背景 12
- 13. よくあるWebサイト • HTMLとCSSでページを作成 • JavaScriptを入れて動きを持たせる • 動的なコンテンツはサーバー側（PHP等）で 生成 13
- 14. Webブラウザのアプリケーションプラットフォーム化 • デスクトップアプリケーションがWebアプリ ケーションに • 例：Webメール、Google Maps、Google Document • Ajaxによるレンダリング • サーバーからデータのみ受け取り • クライアント側でJavaScriptでレンダリング サーバー側でのHTML生成の必要性が減少 サーバーからクライアントに生データを渡す必 要性が増加 14
- 15. ネイティブアプリの流行 • iOS／Androidの伸長でネイティブアプリ化 • WebアプリではiOS／Androidの機能／性能を フルには引き出せない • ネイティブアプリの利用が増加 • PCではブラウザ、スマートフォン／タブレットで はネイティブアプリで閲覧することが増加 • サーバー側との連携が必要 • HTTPでサーバーにアクセスしたい • HTMLではなく生データが欲しい 15
- 16. Data APIの登場 • Movable Typeに対してWeb APIの形式でアク セスする機能 • 生データを取得可能 • データの更新／削除も可能 • プログラム言語を問わない • JavaScript用ライブラリあり • HTTPアクセス／JSONパースができれば良い • PHP、Ruby、Node.js、Objective-C、Java、etc. 16
- 17. Data APIの概要 17
- 19. 基本はREST • REST＝Representational State Transfer • サーバー上の個々のデータに一意なアドレ スを割り当て • HTTPプロトコルで個々のデータのアドレス にアクセスしてデータを操作 • HTTPのメソッド(GETやPOST)で操作方法を 指定 19
- 20. 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
- 21. 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
- 22. 記事の読み込み api.listEntries(siteId, params, function(response) { if (response.error) { エラーに対する処理 return; } 読み込んだ記事に対する処理 }); 22
- 23. MTへのログイン api.getToken(function(response) { if (response.error) { if (response.error.code === 401) { location.href = api.getAuthorizationUrl(location.href); } else { ログイン時にエラーが起きたときの処理; } } else { ログインに成功したときの処理 } }); 23
- 24. 記事の投稿 api.createEntry(siteId, entryData, function(response) { if (response.error) { エラー時の処理 return; } 記事作成完了時の処理 }); 24
- 25. 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
- 26. 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
- 27. 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
- 29. MT標準のData APIでできないこと • 現状はバージョン1 • できないことも多い • できないことの例 • 記事にカテゴリを割り当て • アイテムの読み込み • 詳細な検索 • etc. 29
- 30. プラグインでData APIを拡張可能 • エンドポイントの追加 • 読み込み／更新可能なフィールドの追加 • 例：記事のカテゴリを操作するプラグイン http://www.h-fj.com/blog/archives/2013/09/30094306.php 30
- 31. Data APIの活用方法 31
- 32. 各種の動的処理 • 記事等の検索 • Data APIで検索条件を渡し、結果を取得してレ ンダリング • メインページやアーカイブページのページ 分割 • 各ページへのアクセスの際に、Data APIでデー タを取得してレンダリング 32
- 35. iOSアプリ／Androidアプリのバックエンド • Movable TypeをiOSアプリ／Androidアプリのバッ クエンドとして使用 • Movable Typeにデータを蓄積 • Data APIでデータの取得や更新を行う • テンプレートタグでWebページも出力 • 例： • SNS的なサイト(iOS／Android用アプリとPCサイトの連 動) • ソーシャルゲーム(ユーザー等の情報をMovable Type で管理) 35
- 36. APIの外部提供 • 蓄積したデータをData APIで外部に公開（サ イトのWebサービス化） • 外部のプログラマに様々なアプリを開発して もらう • Data APIをプラグインで拡張して必要なデー タを提供 • 例： • 大量の情報を扱う情報系サイト (グルメ情報、就職情報、価格情報、etc.） 36
- 37. まとめ 37
- 38. Data API • Movable TypeをWeb API形式で操作する仕 組み • 各種オブジェクトの作成／読込／更新／削 除が可能 • Webアプリやネイティブアプリの開発に利 用可能 38
- 39. Data APIの活用のために求められること • プログラミング • フロンドエンド／バックエンド両方に対する 理解 • デザイナー／コーダー／フロントエンドエン ジニア／プログラマ等の協力体制 39
- 41. Movable Type 6 SPECIAL SEMINAR (大阪) • Data APIに関するハンズオンの勉強会 &PowerCMS 4のセミナー • 2014年1月24日(金) 13:30～18:00 • アルファサード株式会社 大阪オフィス 41
- 42. MTCafe Tokyo Data API勉強会(東京) • Data APIに関するハンズオンの勉強会 • 2014年2月13日(木) 14:00～16:00 • トスラブ市ヶ谷 D会議室 42