Your SlideShare is downloading. ×
0
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Data APIの背景と活用方法
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Data APIの背景と活用方法

2,920

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,920
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

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の背景と活用方法 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. ご清聴ありがとうございました

×