Movable Type 6の新機能 Data APIの活用法
Upcoming SlideShare
Loading in...5
×
 

Movable Type 6の新機能 Data APIの活用法

on

  • 2,849 views

2013年11月28日マイナビ様で行われたセミナーの資料です。

2013年11月28日マイナビ様で行われたセミナーの資料です。
Movable Type 6のData APIについて解説しています。

Statistics

Views

Total Views
2,849
Views on SlideShare
2,719
Embed Views
130

Actions

Likes
3
Downloads
2
Comments
0

7 Embeds 130

http://www.h-fj.com 77
http://www.mtzanmai.com 20
http://feedly.com 14
http://fujimoto15.rssing.com 14
https://www.chatwork.com 3
http://www.feedspot.com 1
http://www.newsblur.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Movable Type 6の新機能 Data APIの活用法 Movable Type 6の新機能 Data APIの活用法 Presentation Transcript

  • Movable Type 6の新機能 Data APIの活用法 Movable Type 6本格活用ナイトセミナー 2013/11/28 藤本 壱 1
  • 今日のアジェンダ • 自己紹介 • APIとは? • Data APIの背景 • Data APIの概要 • Data APIの活用方法 • まとめ 2
  • 自己紹介 3
  • 自己紹介その1 • 藤本 壱(ふじもと はじめ) • 兵庫県伊丹市出身 • 群馬県前橋市在住 4
  • 自己紹介その2 • 本職はPC系のフリーライター 2004年秋からMovable Typeユーザー さまざまなプラグインを開発 5
  • ブログももちろん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/geo code/json?address=○○○&sensor=true_o r_false 10
  • Web APIの例 • この場所の情報 http://maps.googleapis.com/maps/a pi/geocode/json?address=%E6%9D% B1%E4%BA%AC%E9%83%BD%E5%8 D%83%E4%BB%A3%E7%94%B0%E5 %8C%BA%E4%B8%80%E3%83%84% E6%A9%8B%EF%BC%91%E4%B8%81 %E7%9B%AE%EF%BC%91%E2%88%9 2%EF%BC%91%20%26%238206%3b &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
  • 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' }); 19
  • 記事の読み込み api.listEntries(siteId, params, function(response) { if (response.error) { エラーに対する処理 return; } 読み込んだ記事に対する処理 }); 20
  • MTへのログイン api.getToken(function(response) { if (response.error) { if (response.error.code === 401) { location.href = api.getAuthorizationUrl(location.href); } else { ログイン時にエラーが起きたときの処理; } } else { ログインに成功したときの処理 } }); 21
  • 記事の投稿 api.createEntry(siteId, entryData, function(response) { if (response.error) { エラー時の処理 return; } 記事作成完了時の処理 }); 22
  • 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)); 23
  • 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) {・・・}]; 24
  • 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() {…}; 25
  • Androidで記事投稿する例 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を使わずに独自の管理画面で記事 等を管理 • 例:書籍の第3章の事例 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
  • MTDDC Meetup NAGOYA 2014 • Movable Typeのセミナーイベント • 2014年1月18日(土) 12:30~18:30 • ウインクあいち(名古屋駅近く) 38
  • MTDDC Meetup TOKYO 2014? • 開催の予定 • 12月中に初打ち合わせ • スポンサーにご協力を 39
  • MTCafe • Movable Typeのユーザーミーティング • 東京、埼玉、札幌、名古屋、福岡等で開催 • 2013年11月2日(埼玉) • 2013年12月7日(福岡) 40
  • ご清聴ありがとうございました 41