Downloaded 23 times
More Related Content
![[出張！雲勉 in Tokyo] Swagger で簡単APIドキュメント作成](https://cdn.slidesharecdn.com/ss_thumbnails/random-160831072101-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Jawsug chiba API Gateway
Jawsug chiba API Gateway
- 1. モバイル✕API Gateway ときどきLambda NRIネットコム株式会社 佐々木拓郎 2015/9/8JAWS-UG 千葉支部Vol.5 ∼秋のAWS Lambda & API Gateway 祭り！！∼
- 2.
- 3.
- 4. もうちょっと宣伝 WEB+DB PRESS Vol.88 モバイル開発最前線―― ビルドもテストもデプロイも クラウドで加速! http://amzn.to/1QhqBl7 DeviceFarmの話も少し載せています
- 5.
- 6. NRIネットコム Web周りのビジネスを専門としている会社 • Webシステムの企画・設計・開発・運用 • 24時間365日の運用体制 •デザインを重視し、ディレクター／デザイナーが多数在籍 • スマホ／タブレットも得意 • AWSをはじめとするクラウドにも力を入れている • 最近のトレンドは、デジタルマーケティング 会社の紹介
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. 多様化するデバイス iOS 2011年 2012年2013年 2014年 Version 5.0 6.0 7.0 8.0 Device iPhone4s iPad 3rd iPhone5 iPad 4th iPad mini iPhone5S iPhone5C iPad Air iPad mini 2 iPhone6 iPhone6 plus iPad Air2 iPad mini 3
- 18. 多様化するデバイス Android 2011年 2012年2013年 2014年 Version 2.3 - 4.0 4.1 - 4.3 4.4 5.0 Device Galaxy S2 Regza Phone Arrows X MEDIAS LTE Xperia NX Galaxy Note Xperia SX Arrows A AQUOS Phone EX Galaxy note3 Nexus5 Xperia Z3 Android Wear Nexus6 Nexus9
- 19. 開発期間の短期化 2013/05 ver1.0.0 リリース ファースト 2014/02 ver1.1.0リリース iOS7対応 2014/10 ver2.0.0 リリース デザインリニューアル 2015/02 ver2.2.0 リリース iOS8対応 開発サイクル例 間に9回リリース 間に4回リリース 間に2回リリース ビジネス的な要件（機能追加etc）以外に、 外的要因（OSバージョンアップ、端末追加）が多く リリース頻度が多くなり、開発期間も短期化の傾向
- 20.
- 21.
- 22. AWSのモバイル向けサービスの歴史（一部） Amazon Cognito 2014年7月発表 認証・認可のサービス Amazon Lambda 2014年11月発表 イベント・ドリブンなコンピュートエンジン AWSDevice Farm 2015年7月発表 クラウド上でモバイルアプリを実機でテスト Amazon APIGateway 2015年7月発表 API作成サービス
- 23.
- 24.
- 25.
- 26. スタブAPIの作成（Before API Gateway） S3のWebホスティング機能を利用 {JSON } JSONファイルの アップロード リクエスト レスポンス それなりに便利。一方で、 レスポンスを変える為に、都度アップロードは面倒 レスポンスコードが、変えられない Client モバイル S3 Web
- 27. スタブAPIの作成（After API Gateway） APIGatewayのモック機能を利用 { JSON } 管理コンソールから JSONファイルの 入力 リクエスト レスポンス 簡単・便利 Mock機能で静的JSONを返すAPIを簡単につくれる レスポンスコードも変えられる 詳細は、こちら APIGateway - Amazon API GatewayでMockを定義してみる - Qiita http://qiita.com/Keisuke69/items/0852d536110b2fa6e087 モバイル API Gateway AWS Management Console
- 28.
- 29. API Gateway モック機能の使い方1/12 APIの作成 適当な名前を入力 作成
- 30. API Gateway モック機能の使い方2/12 リソース（Resource）の作成 Create Resourceを クリック リソース名（ URL Path） の決定
- 31. API Gateway モック機能の使い方3/12 メソッド（Method）の作成 1 ①Create Methodを クリック ②Methodの種類を 選択 ③保存
- 32. API Gateway モック機能の使い方4/12 メソッド（Method）の作成 2 Mock Integrationを 選択して「Save」
- 33. API Gateway モック機能の使い方5/12 メソッド（Method）の作成 3 Integration Responseを クリック
- 34. API Gateway モック機能の使い方6/12 メソッド（Method）の作成 4 ①ここを選択 ②更にMapping Templatesを選択
- 35. API Gateway モック機能の使い方7/12 メソッド（Method）の作成 5 ①application/jsonを クリック ②Output passthrough 横の鉛筆印をクリック
- 36. API Gateway モック機能の使い方8/12 メソッド（Method）の作成 6 ①Mapping templateを 選択して保存 ②任意のJSONを 貼り付けて「Save」
- 37. API Gateway モック機能の使い方9/12 テスト ①TESTをクリック
- 38. API Gateway モック機能の使い方10/12 テスト ①TESTをクリック ②想定のStatusで 想定のレスポンスがあればO.K.
- 39. API Gateway モック機能の使い方11/12 デプロイ ①Deploy APIをクリック Stage nameを記入して Deploy
- 40. API Gateway モック機能の使い方12/12 デプロイ URL/Stage名/リソース名でアクセス可能
- 41.
- 42. API Gateway+LambdaでSlow Mock レスポンスの遅いSlowMockを作ることでUXの調整 リクエスト N秒後に レスポンス Slow Mockの意義 実際のAPIのレスポンスは、遅い場合もある レスポンスの速いMockだけでUXを検討すると、後工 程で困る場合がある 数秒、数十秒の遅延を与えて、UXを調整していく モバイル API Gateway リクエスト レスポンス Sleep処理 Lambda
- 43. API Gateway+LambdaでSlow Mock SlowMockの作り方 console.log('Loading function'); exports.handler = function(event, context) { console.log('before =', new Date().getTime()); var time = 3000; var d1 = new Date().getTime(); var d2 = new Date().getTime(); while (d2 < d1 + time) { d2 = new Date().getTime(); } console.log('after =', new Date().getTime()); context.succeed("Success"); }; 簡単に作るのであれば、LambdaでSleepするだけ。 API GatewayでMockを返す。 真面目に作るのであれば、引数・返却値を返すようにする
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. Mapping Templateの利用 リクエスト編 ①Method Requestで、 Modelの作成 ②IntegrationRequestで、 Mapping Templateの作成
- 52. Mapping Templateの利用 リクエスト編 Modelの作成 { "operation": "update", "conference_id":1, "page_number": 4 } { "$schema": "http://json-schema.org/draft-04/schema#", "title": "SyncSlide", "type": "object", "properties": { "operation": { "type": "string" }, "conference_id": { "type": "number" }, "page_number": { "type": "number" } } } 元のJSON Model 詳細は、こちら Working with Models and Mapping Templates in Amazon API Gateway http://docs.aws.amazon.com/apigateway/latest/developerguide/models-mappings.html
- 53. Mapping Templateの利用 リクエスト編 Mapping Templateで引数を利用 { "operation":"update", "conference_id": "1", "page_number": $input.json('$.page_number') } $input.json( $.項目名 ）で、JSONの値を代入 $input.json( $ ）で、JSON全体を渡すことも QueryStringの場合は、$input.params('foo') その他、変数が幾つかある 詳細は、こちら API Gateway Mapping Template Reference http://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-mapping-template- reference.html
- 54. Mapping Templateの利用 レスポンス編 レスポンスの加工も、基本的には同じ ②Integration Responseで、 Model等を利用して整形 ①MethodResponseで、 Contents-Type等の定義
- 55. JSON XMLに変換 #set($root =$input.path("$")) <xml> <id> $root.id </id> <title> $root.title </title> </xml> { "id": 1, "name": "hoge" } 元のJSON Mapping Template 出力されたXML
- 56. JSON HTMLに変換 その気になれば、HTMLも直接出力できる #set($root =$input.path("$")) <html> <body> ID=$root.id<br/> Name=$root.name<br/> </body> </html> { "id": 1, "name": "hoge" } 元のJSON Mapping Template まったくお勧めしません
- 57.
- 58.
- 59.