Jawsug chiba API Gateway
•
24 likes•14,963 views
JAWSUG千葉のAWS Lambda & API Gateway祭りの資料です
Jawsug chiba API Gateway
- 1. モバイル✕API Gateway ときどきLambda NRIネットコム株式会社 佐々木拓郎 2015/9/8JAWS-UG 千葉支部 Vol.5 ∼秋のAWS Lambda & API Gateway 祭り！！∼
- 2. 佐々木拓郎 AWSの事業推進の他に モバイルチームと データ解析チームの マネジメントをしています blog: http://blog.takuros.net twitter: @dkfj 自己紹介
- 4. もうちょっと宣伝 WEB+DB PRESS Vol.88 モバイル開発最前線 ―― ビルドもテストもデプロイも クラウドで加速! http://amzn.to/1QhqBl7 DeviceFarmの話も少し載せています
- 5. まだまだ宣伝 Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例 http://amzn.to/1lsJ5id 2014年 ジュンク堂書店 コンピュータ書 年間総合ランキング14位
- 6. NRIネットコム Web周りのビジネスを専門としている会社 • Webシステムの企画・設計・開発・運用 • 24時間365日の運用体制 • デザインを重視し、ディレクター／デザイナーが多数在籍 • スマホ／タブレットも得意 • AWSをはじめとするクラウドにも力を入れている • 最近のトレンドは、デジタルマーケティング 会社の紹介
- 8. たまに頭を抱えています
- 9. NAOもいます
- 13. モバイル・アプリとは？
- 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バージョンアップ、端末追加）が多く リリース頻度が多くなり、開発期間も短期化の傾向
- 22. AWSのモバイル向けサービスの歴史（一部） Amazon Cognito 2014年7月発表 認証・認可のサービス Amazon Lambda 2014年11月発表 イベント・ドリブンなコンピュートエンジン AWS Device Farm 2015年7月発表 クラウド上でモバイルアプリを実機でテスト Amazon APIGateway 2015年7月発表 API作成サービス
- 26. スタブAPIの作成（Before API Gateway） S3のWebホスティング機能を利用 { JSON } JSONファイルの アップロード リクエスト レスポンス それなりに便利。一方で、 レスポンスを変える為に、都度アップロードは面倒 レスポンスコードが、変えられない Client モバイル S3 Web
- 27. スタブAPIの作成（After API Gateway） API Gatewayのモック機能を利用 { JSON } 管理コンソールから JSONファイルの 入力 リクエスト レスポンス 簡単・便利 Mock機能で静的JSONを返すAPIを簡単につくれる レスポンスコードも変えられる 詳細は、こちら APIGateway - Amazon API GatewayでMockを定義してみる - Qiita http://qiita.com/Keisuke69/items/0852d536110b2fa6e087 モバイル API Gateway AWS Management Console
- 28. API Gateway モック機能の使い方 デモ
- 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名/リソース名でアクセス可能
- 42. API Gateway+LambdaでSlow Mock レスポンスの遅いSlow Mockを作ることでUXの調整 リクエスト N秒後に レスポンス Slow Mockの意義 実際のAPIのレスポンスは、遅い場合もある レスポンスの速いMockだけでUXを検討すると、後工 程で困る場合がある 数秒、数十秒の遅延を与えて、UXを調整していく モバイル API Gateway リクエスト レスポンス Sleep処理 Lambda
- 43. API Gateway+LambdaでSlow Mock Slow Mockの作り方 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を返す。 真面目に作るのであれば、引数・返却値を返すようにする
- 51. Mapping Templateの利用 リクエスト編 ①Method Requestで、 Modelの作成 ②Integration Requestで、 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等を利用して整形 ①Method Responseで、 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 まったくお勧めしません
- 59. ご静聴、ありがとうございました。