2020 AWS re:Invent re:Cap フロントエンド関連サービス編

2020 年に開催された学習型オンラインカンファレンス、AWS re:Inventで発表されたフロントエンド関連サービスのアップデートをまとめてお届けします。AWS Amplifyをはじめ、AWS AppSync、Amazon Pinpoinitについてお話ししました。

Transcript

1. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
   2020 AWS re:Invent re:Cap
   フロントエンド関連サービス 編
   ⽊村 公哉（きむら こうや）
   アマゾン ウェブ サービス ジャパン株式会社
   

   View Slide

2. ⽊村 公哉（きむら こうや）
   所属
   アマゾン ウェブ サービス ジャパン（株）
   技術統括本部 ISV/SaaSソリューション本部
   ソリューションアーキテクト
   好きなAWSサービス
   AWS Amplify AWS Lambda Amazon Kinesis
   @kimyan_udon2
   

   View Slide

3. 内容についての注意点
   o 本資料では2021年1⽉20⽇現在のサービス内容および価格についてご説明しています。
   最新の情報はAWS公式ウェブサイト(http://aws.amazon.com)にてご確認ください。
   o 資料作成には⼗分注意しておりますが、資料内の価格とAWS公式ウェブサイト記載の価格に
   相違があった場合、AWS公式ウェブサイトの価格を優先とさせていただきます。
   o 価格は税抜表記となっています。⽇本居住者のお客様には別途消費税をご請求させていただきま
   す。
   o AWS does not offer binding price quotes. AWS pricing is publicly available and is
   subject to change in accordance with the AWS Customer Agreement available at
   http://aws.amazon.com/agreement/. Any pricing information included in this
   document is provided only as an estimate of usage charges for AWS services based on
   certain information that you have provided. Monthly charges will be based on your
   actual use of AWS services, and may vary from the estimates provided.
   

   View Slide

4. AWSのフロントエンド関連サービスが気になる⽅、
   ぜひ connpass のメンバーに⼊ってください︕
   https://aws-amplify-jp.connpass.com/
   今後のイベント開催時に通知を受け取ることができます︕
   

   View Slide

5. Agenda
   o AWS Amplify
   o Overview
   o Amplify Libraries
   (Web / Android / iOS)
   o Amplify CLI
   o Amplify Console
   o Amplify Admin UI
   o AWS AppSync
   o AWS Device Farm
   o Amazon Pinpoint
   o Amazon Location Service
   New!
   New!
   

   View Slide

6. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
   

   View Slide

7. AWS Amplify
   Amplify ライブラリ
   Web・モバイルアプリとAWSを統合するためのOSSライブラリ
   Amplify UIコンポーネント
   クラウドに接続された美しいOSS UIコンポーネント
   Amplify CLI
   Web・モバイルアプリのバックエンドをインタラクティブに
   作成・管理するためのOSSツールチェーン
   Amplify Console
   フルスタックサーバーレスWebアプリをビルド、テスト、
   デプロイ、ホスティングするためのAWSサービス
   AWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォーム
   

   View Slide

8. アプリのライフサイクル全体にわたるメリット
   展開 管理
   開発
   

   View Slide

9. AWS Amplifyが提供するツールとサービス
   展開
   Static Web Hosting
   Fully managed
   Full stack deployments
   CI/CD built in
   Pull request previews
   管理
   Tools
   Libraries
   CLI Admin UI Admin UI
   CLI Console
   Authentication
   Manage users &
   groups
   DataStore
   Manage data content
   開発
   Authentication
   DataStore
   Storage
   API
   Functions
   Analytics
   PubSub
   Predictions
   Interactions
   Notifications
   Configure
   backends
   Connect
   frontends
   New!
   New!
   

   View Slide

10. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

11. Amplify JavaScript の SSR対応（後で詳しく）
    Ø Amplify JavaScript を使⽤してウェブアプリケーションを構築する際
    に、サーバー側レンダリング (SSR) を Next.js や Nuxt.js などのフ
    レームワークに組み込むことができるようになりました。
    Ø Next.js と Nuxt.js により、デベロッパーは、SSR、静的サイト⽣成、
    クライアント側レンダリングを使⽤して、⾼速で最新のサイトを構築
    できます。
    Ø これらのフレームワークは、デベロッパーが優れたデベロッパーエク
    スペリエンスと API ルート、段階的な静的ページ再⽣、コード分割、
    SEO フレンドリー化などの機能を利⽤するに連れて、⼈気が⾼まって
    きています。
    Amplify JavaScript が Next.js や Nuxt.js などのフレームワークのサーバー側レンダリング (SSR) サポートを追加
    https://aws.amazon.com/jp/about-aws/whats-new/2020/09/amplify-javascript-adds-server-side-rendering-support-frameworks-next-js-nuxt-js/
    

    View Slide

12. Amplify iOS and Amplify Android が GA
    Ø iOS / Android の開発者向けの Amplify ライブラリが GA
    Ø 分析・AI/ML・GraphQL/REST の API・データストア等の機能を容易に追加可能
    Ø ⾼度な機能をより抽象化して宣⾔的に利⽤でき、開発期間の短縮やコード量の削減が期待
    Ø 従来の Mobile SDK は AWS の各サービス の API の低レベルの Wrapper だったため、
    API の理解や⼿続き的な記述が必要だった点を解消
    Announcing General Availability of Amplify iOS and Amplify Android, with new authentication, data, and AI/ML support
    https://aws.amazon.com/about-aws/whats-new/2020/05/announcing-general-availability-amplify-ios-android-authentication-data-ai-ml-support/
    

    View Slide

13. Amplify iOS で Swift Combine のサポートを開始
    Ø Amplify の iOS SDK (Amplify iOS 1.1~) が Swift Combine に対応
    Ø Combine は Apple 製の⾮同期 API 実⾏フレームワーク
    （他フレームワークで有名なのは RxSwift など）
    Ø Amplify のすべての⾮同期 API で対応
    Ø 従来の Amplify iOS ver 1.0 までは call back にしか対応しておらず、
    いわゆるコールバック地獄が発⽣していた可能性
    Ø Swift Combine ⾃体は iOS 13 以降で利⽤可能な点は注意
    Announcing Swift Combine support in Amplify iOS
    https://aws.amazon.com/about-aws/whats-new/2020/08/announcing-swift-combine-support-in-amplify-ios/
    

    View Slide

14. Amplify Flutter の Developer Preview を開始
    Ø Amplify の Flutter SDK の提供を開始
    Ø Developer Preview のため本番環境での利⽤は⾮推奨
    Ø Flutter は単⼀の codebase から複数の Web やネイティブのアプリケーションを
    提供するための UI toolkit
    Ø Amplify for Flutter では現状では iOS と Android をサポート
    Ø 現時点でのサポート機能は https://github.com/aws-amplify/amplify-flutter を参照
    Amplify Flutter now available as Developer Preview
    https://aws.amazon.com/about-aws/whats-new/2020/08/amplify-flutter-now-available-as-developer-preview/
    

    View Slide

15. Amplify Android で RxJava のサポートを開始
    Ø Amplify の Android SDK (Amplify Android 1.3.0~) が RxJava に
    対応
    Ø RxJava は、Reactive Extensions の Java VM 実装
    Ø Amplify のすべての⾮同期 API で対応
    Ø 従来の Amplify Android ではコールバックにしか対応しておらず、
    いわゆるコールバック地獄が発⽣していた可能性
    Ø RxJava はAndroid RunTimeの古いバージョンと広い後⽅互換性がある
    Announcing RxJava Support in Amplify Android
    https://aws.amazon.com/about-aws/whats-new/2020/08/announcing-rxjava-support-amplify-android
    

    View Slide

16. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

17. Amplify CLI 2020年の主要アップデート
    10/17 Amplify CLI で Cognito User Pools & Identity Pools を インポート可能に
    8/31 Amplify CLI がプロジェクト単位でのリソースのタグづけをサポート
    4/6 Amplify CLI が 追加の Lambda ランタイムをサポート (Java, Go, .NET, Python)
    11/22 Amplify CLI で S3 バケットと DynamoDB テーブルをインポート可能に
    12/11 Amplify CLI の API カテゴリがサーバーレスコンテナをサポート
    7/7 Amplify CLI が Lambda レイヤーをサポート
    

    View Slide

18. Amplify CLI が Lambda レイヤーをサポート
    Lambdaレイヤーの作成、デプロイ、細かな設定が可能
    Amplify CLI
    v4.23.0 (7/7)
    https://aws.amazon.com/blogs/mobile/how-to-use-lambda-layers-with-the-amplify-cli/
    

    View Slide

19. Amplify CLI がプロジェクト単位でのリソースの
    タグづけをサポート 概要
    Ø Amplify CLI v4.28.0 以降で、プロジェクト
    単位でのリソースへのタグ付け機能が利⽤可
    能に
    Ø 請求時の計算の簡略化
    使い⽅
    Ø tags.json の配列に追加することで最⼤50ま
    でのタグを使⽤可能
    Ø {project-env} と {project-name} 変数は
    $ amplify push 時に代⼊される
    注意事項
    Ø 4.28.0 以前のバージョンで作成されたプロ
    ジェクトの場合、tags.json ファイルを⼿動
    で作成する必要あり
    $ amplify push
    https://docs.amplify.aws/cli/usage/tags
    Amplify CLI
    v4.28.0 (8/31)
    

    View Slide

20. Amplify CLI で S3 バケットと
    DynamoDB テーブルをインポート可能に
    Ø 既存アプリの S3 バケット・DynamoDB テーブルを Amplify でつくる
    アプリでも使いたい
    Ø Amplify を使う⼀⽅で、S3 バケットや DynamoDB テーブルは Amplify
    外のライフサイクルで管理したい
    Ø Cognito 認証ユーザーに S3/DynamoDB アクセス⽤の IAM の権限設定
    が必要
    Ø インポート した DynamoDB テーブルは APIカテゴリの REST API や
    function カテゴリの Lambda 関数からはアクセス可能な⼀⽅、API カテ
    ゴリの GraphQL API で利⽤する DynamoDB としては利⽤不可
    https://aws.amazon.com/blogs/mobile/use-an-existing-s3-bucket-for-
    your-amplify-project/
    ユースケース
    注意点
    Amplify CLI
    v4.30.0 (10/17)
    

    View Slide

21. Cognito User Pools & Identity Pools を
    Amplify CLI でインポート可能に
    ユースケース
    Ø 既存アプリのユーザー基盤をAmplifyで
    つくるアプリでも使いたい
    Ø 既存アプリを徐々に Amplify に移⾏し
    ていきたい
    Ø Amplify を使う⼀⽅で、重要なユーザー
    基盤は Amplify の外のライフサイクル
    で管理したい
    https://aws.amazon.com/blogs/mobile/use-existing-cognito-resources-for-your-amplify-api-storage-and-more/
    Amplify CLI
    v4.33.0 (11/22)
    

    View Slide

22. Amplify CLI の API (REST/GraphQL) カテゴリが
    サーバーレスコンテナ (ECS + Fargate) をサポート
    https://aws.amazon.com/jp/blogs/news/amplify-cli-enables-serverless-container-deployments-using-aws-fargate-jp/
    Ø Dockerfile を⽤いた単⼀コンテナのデプロイと、Docker Composeを⽤いた
    複数コンテナのデプロイに対応
    Ø イメージのビルドは 1) セルフ、2) コンテナビルド⽤の CodePipeline +
    CodeBuild を利⽤した $ amplify push 時の⾃動デプロイ、から選択
    Ø 実態としては Amazon API Gateway でリクエストを受け、AWS CloudMap
    を利⽤して Amazon ECS on AWS Fargate とプライベート統合
    Amplify CLI
    v4.39.0 (12/11)
    

    View Slide

23. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Amplify Library Server-Side
    Rendering (SSR) Support
    

    View Slide

24. Amplify Library with Server-Side Rendering
    ü 2020年9⽉に、Amplify Library が Next.js や Nuxt.js などのフレーム
    ワークを⽤いた Server-Side Rendering をサポート
    ü もう少し細かく説明すると、Amplify Libraries（JavaScript）がNext.js Serverless
    Componentと連携することで、クライアントサイドでのレンダリングだけでなく、
    サーバーサイドでのレンダリングに対応しました
    ü レンダリング層を「サーバーレスで」「ツールを⽤いて」デプロイする
    場合には「Serverless Framework」というサードパーティーのOSS
    ツールが利⽤できます
    ü この場合のレンダリング層には「CloudFront」と「Lambda@Edge」が⽤いられます
    

    View Slide

25. バックエンド
    従来の Single Page Application
    Amazon Elasticsearch
    Service
    API 層
    AWS AppSync
    データ 層
    Amazon
    DynamoDB
    token
    ① 認証
    token
    ③ レスポンス
    Amazon Cognito
    ② API Call
    ホスティング
    Amplify Console
    .js
    .html
    .css
    

    View Slide

26. バックエンド
    Server-Side Rendering のアーキテクチャ
    レンダリング層
    Amazon Elasticsearch
    Service
    AWS
    Lambda@Edge
    API 層
    AWS AppSync
    データ 層
    Amazon
    DynamoDB
    token
    ① 認証
    ④ ページの作成
    token
    ③ API Call
    ⑤ ページの返却
    Amazon Cognito
    Amazon
    CloudFront
    ② リクエスト
    ※ SSR のフローのみ図⽰
    Amazon
    S3
    

    View Slide

27. バックエンド
    Server-Side Rendering のアーキテクチャ
    レンダリング層
    Amazon Elasticsearch
    Service
    AWS
    Lambda@Edge
    API 層
    AWS AppSync
    データ 層
    Amazon
    DynamoDB
    token
    ① 認証
    ④ ページの作成
    token
    ③ API Call
    ⑤ ページの返却
    Amazon Cognito
    Amazon
    CloudFront
    ② リクエスト
    ※ SSR のフローのみ図⽰
    Amazon
    S3
    [デプロイ⽅法]
    ü Amplify CLI からデプロイ
    $ amplify add auth
    $ amplify add api
    例) 認証機能、API 機能の設定を追加
    $ amplify push
    amplify push コマンドで設定を反映
    

    View Slide

28. バックエンド
    Server-Side Rendering のアーキテクチャ
    レンダリング層
    Amazon Elasticsearch
    Service
    AWS
    Lambda@Edge
    API 層
    AWS AppSync
    データ 層
    Amazon
    DynamoDB
    token
    ① 認証
    ④ ページの作成
    token
    ③ API Call
    ⑤ ページの返却
    Amazon Cognito
    Amazon
    CloudFront
    ② リクエスト
    ※ SSR のフローのみ図⽰
    Amazon
    S3
    [デプロイ⽅法]
    ü Serverless Framework の
    Next.js Serveless Component
    を⽤いてデプロイ
    プロジェクトルートに serverless.yml を配置
    $ npx serverless
    レンダリング層のデプロイ
    (参考)
    https://aws.amazon.com/jp/blogs/mobile
    /ssr-support-for-aws-amplify-javascript-
    libraries/
    

    View Slide

29. Amplify with Server-Side Rendering 実装⽅法
    Amplify.configureで{ssr: true}を指定
    サーバサイドのコードでセッション情報を取得
    あとはクライアントと同様にAPIをCallできる
    

    View Slide

30. Amplify & Next.js Serverless Component を
    ⽤いた SSR の注意点
    ü Amplify Console を⽤いたデプロイは未対応
    ü Serverless Framework の Next.js Serverless Component が複数環境
    のデプロイ未サポート ※
    ü 環境ごとに 「.serverless」 フォルダを作成する等、何かしらの⼯夫が必要
    ü Lambda@Edge の制約 (デプロイパッケージサイズの上限 等)
    https://www.serverless.com/plugins/serverless-nextjs-plugin/
    ※ Serverless Nextjs Plugin / [CI/CD] Multi-stage deployments
    

    View Slide

31. Amplify Library with Server-Side Rendering まとめ
    ü インフラ部分のデプロイは従来通りAmplify CLIが便利︕
    ü レンダリング層を「サーバーレスで」「ツールを⽤いて」デプロイする
    場合には「Serverless Framework」というサードパーティーのOSS
    ツールが利⽤できる
    ü Amplify Consoleはレンダリング層のデプロイには未対応
    ü ただし、Amplify Console の Pipeline 内で Serverless Framework の
    デプロイコマンドを発⾏するといったことは可能
    

    View Slide

32. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    New!
    

    View Slide

33. AWS Amplify Admin UI
    アプリケーションのバックエンド開発を⽀援し、クラウドの経験を必要としない管理ツール
    New!
    マネージメント
    Admin UI
    特徴
    ü AWSコンソールの外部からアクセス可能
    ü 開発者以外の関係者とアクセスを共有
    （QAテスター、プロダクトマネージャー）
    ü リッチテキストをサポートする
    コンテンツ管理機能
    ü ユーザーとグループの管理機能
    

    View Slide

34. バックエンドとAdmin UIの作成
    Ø AWS Console内のAWS Amplify
    の管理画⾯から作成
    Ø 「staging」と呼ばれるバックエ
    ンドの環境が作成される
    Ø AWSの利⽤経験がなく、AWSア
    カウントを持っていない開発者を
    招待したい場合は、この段階で
    Admin UIへのアクセス権限を付
    与することができる
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

35. Admin UI上でデータモデリング
    Ø 2つの機能
    Ø アプリケーションの開発者がバック
    エンドを構成するために必要な開発
    ツール
    Ø コンテンツの管理者がアプリケー
    ションのコンテンツを管理するため
    の機能
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

36. Admin UI上でデータモデリング
    Ø データモデルを保存とデプロイを
    ⾏うと、メニュー項⽬を保存する
    Amazon DynamoDBのテーブル
    やGraphQLのAPIを提供する
    AWS AppSyncなどのリソースが
    AWS上に⾃動で作成されます。
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

37. ローカル環境の構築とAWS Amplifyの設定
    Ø 左のコマンドで開発環境を構築
    Ø AWS Amplify CLIをインストール
    Ø 新しいReactアプリケーションの開
    発環境を構築
    Ø Admin UIに戻り「Local setup
    instructionsを選択」
    Ø アプリケーションのルートディレ
    クトリで、表⽰されている
    amplifyコマンドを実⾏
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

38. アプリケーションの開発（DataStoreの利⽤）
    Ø DataStoreを使うことで、デプロイされたデータベースへの接続、UIか
    らデータのCRUD・並べ替え・フィルタリングの操作が簡単に⾏えます
    Ø Admin UIのページ内では、モデルの作成、更新、削除、その他クエリ
    に関する実装例を確認することができます
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

39. コンテンツを管理するメンバーを追加
    Ø レストランのメニュー項⽬を管理
    するのはレストランのオーナー
    Ø オーナーにメニュー項⽬の操作を
    ⾏ってもらうためには、このアプ
    リケーションのAdmin UIにアク
    セスするための権限が必要
    Ø 作成したアプリケーションの
    AWS Amplify Consoleに移動し、
    Admin UI managementのタブ
    からInvite usersを選択
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

40. コンテンツを管理するメンバーを追加
    Ø Admin UIのアカウントを作成す
    る際に、権限の詳細を設定するこ
    とができます
    Ø Full accessを選択すると、対象
    のアカウントはバックエンドの設
    定や管理を⾏うことが出来ます
    Ø Manage onlyを選択すると、対象
    のアカウントはコンテンツの管理
    を⾏うことが出来ます
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

41. コンテンツの追加
    Ø 3ステップでコンテンツの追加
    Ø Contentタブに移動
    Ø メニューに項⽬を追加
    Ø 同ページ内で追加した項⽬の確認
    Ø この画⾯から、レストランのオー
    ナーはメニューに項⽬を追加、削
    除、編集をいつでも⾏うことが出
    来ます。また、ここで変更した項
    ⽬は保存後すぐにウェブサイトに
    反映されます
    AWS Amplify Admin UIを使った例のご紹介
    

    View Slide

42. AWS Amplify Admin UIのユースケース
    Ø ブログ、Eコマース、予定管理のアプリケーションなど、他にも様々あ
    ります。
    Ø ドメイン固有のデータモデルに焦点を当てることで、アプリケーション
    の開発者は、クラウドインフラストラクチャーの構築や、その接続に時
    間を費やす代わりに複雑で便利な機能の構築に集中することができます。
    Ø AWS Amplifyは、フロントエンドやモバイルアプリケーションの開発者
    に、開発の⾼速化を⾏うシンプルな⽅法を提供しています。
    Ø また、クラウドに慣れていない開発者や、チーム全員にAWSアクセスを
    必ずしも付与する必要がない場合でも、全ての管理機能が利⽤可能です。
    

    View Slide

43. AWS Amplify: Tools & Services to get it done
    DELIVER
    Static Web Hosting
    Fully managed
    Full stack deployments
    CI/CD built in
    Pull request previews
    MANAGE
    Tools
    Libraries
    CLI Admin UI Admin UI
    CLI Console
    Authentication
    Manage users &
    groups
    DataStore
    Manage data content
    DEVELOP
    Authentication
    DataStore
    Storage
    API
    Functions
    Analytics
    PubSub
    Predictions
    Interactions
    Notifications
    Configure
    backends
    Connect
    frontends
    New!
    New!
    

    View Slide

44. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

45. 参考︓GraphQL
    l メリット
    l クライアント – サーバ間のインターフェースがクリーンになる
    l 通信のオーバーヘッドが削減される
    l APIのドキュメント作成・理解に費やす時間を減らすことができる
    l 特徴
    l 型指定されたスキーマ
    l クライアントからのレスポンス形式の指定
    l サブスクリプションを利⽤したリアルタイム処理
    API⽤のOSSクエリ⾔語、クエリを実⾏するためのランタイム
    詳しくは「AWS BlackBelt Online Seminar - AWS AppSync」をご覧ください
    

    View Slide

46. AWS AppSync
    リアルタイム機能とオフライン機能を備えたフルマネージドGraphQLサービス
    

    View Slide

47. AWS AppSync 2020年の主要アップデート
    8/5 Direct Lambda Resolver をリリース
    7/1 GraphQL Cache として 12xlarge をサポート
    2/7 X-Ray との統合と GraphQL Info Objects のサポート
    9/4 GraphiQL Explorer plugin の統合
    10/01 AppSync endpoint での AWS WAF のサポート
    4/23 Subscription での汎⽤ WebSockets Client をサポート
    <関連Solutions>
    ◆ Location-Based Notifications Using Amazon Pinpoint
    ◆ Real-Time Live Sports Updates Using AWS AppSync
    

    View Slide

48. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

49. What is AWS Device Farm?
    テストの⾃動化
    AWSクラウド内の物理デバイス
    の⼤規模コレクションに対し同
    時にアプリケーションをテスト
    します
    リモートアクセス
    ウェブブラウザやローカルホ
    ストから直接リアルタイムで
    デバイスへのジェスチャ、ス
    ワイプ、および操作を実⾏し
    ます
    リモートデバッグ
    AWSクラウド内のリモートデ
    バ イ ス で 、 Xcode や Android
    Studioなどのお好みのIDEから
    AndroidおよびiOSアプリを実
    ⾏およびデバッグが可能です
    

    View Slide

50. AWS Device Farm で Selenium
    • AWS Device Farm では、AWS クラウドでホストされている
    Chrome、Firefox、Internet Explorer ブラウザのさまざまな
    デスクトップバージョンに対してウェブアプリケーションを
    テストできるようになりました。
    AWS Device Farm が Selenium を使⽤したデスクトップブラウザのテストを発表
    https://aws.amazon.com/jp/about-aws/whats-new/2020/01/aws-device-farm-announces-desktop-browser-testing-using-selenium/
    

    View Slide

51. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

52. Amazon Pinpoint とは
    ○○購入
    イベント・属性収集
    居住地
    好きなスポーツ
    etc,etc… ダッシュボード
    • ユーザ行動の解析と可視化
    • ターゲティング（セグメンテーション）通知
    • モバイルプッシュ/Email/SMS/Voice etc
    • 配信数、開封率の把握などの分析
    AWSによるカスタマーエンゲージメントプラットフォーム
    可視化・分析
    開発者・
    マーケター
    Amazon
    Pinpoint
    該当ユーザのみに通知送信
    名古屋の野球好きに
    「限定イベント中！」と送信
    ターゲティング通知
    数分で反映
    

    View Slide

53. Amazon Pinpoint 2020年の主要アップデート
    9/11 Tokyo Region を含む複数のリージョンで利⽤可能に
    6/10 Journey が SMS, Push通知, カスタムチャネルに対応
    5/4 メッセージテンプレートでMLを⽤いたパーソナライズ機能をリリース
    9/18 Attribute の制限を Endpoint あたり250まで拡張
    9/30 Event-Triggerd Journey をリリース
    4/23 カスタムチャネルの⼀般利⽤を開始
    

    View Slide

54. Tokyo Region を含む複数のリージョンで利⽤可能に
    • データを⽇本国内で保持する必要がある
    場合でも利⽤可能に
    • イベントストリーム機能で Kinesis との
    連携の際に Tokyo Region の Kinesis と
    連携できる様に
    • 現時点では Tokyo Region で Voice は
    使えない点にご注意
    https://aws.amazon.com/about-aws/whats-new/2020/09/amazon-pinpoint-available-3-additional-regions/
    

    View Slide

55. Event-Triggerd Journey をリリース
    • 今までは特定のセグメントに対して
    Jouneyを開始していたのに対して、イ
    ベント起因でJouneyを開始できる様に
    • 例えば、新規登録したユーザーに対して
    メールを配信して、さらにn⽇後にメー
    ルを配信するといったフローを⾃動化で
    きる
    https://aws.amazon.com/about-aws/whats-new/2020/09/amazon-pinpoint-launches-event-triggered-journeys/
    

    View Slide

56. Journey が SMS, Push通知, カスタムチャネルに対応
    • Jouneyの対応チャネルがメールの他に
    SMS, Push通知, カスタムチャネルに対
    応
    • Event-Triggerd Jouneyと組み合わせる
    ことで状況によってチャネルの使い分け
    や、セグメントによるチャネルの使い分
    けが可能に
    https://aws.amazon.com/about-aws/whats-new/2020/06/amazon-pinpoint-adds-support-for-sms-push-and-custom-channels-
    for-journeys/
    

    View Slide

57. Attribute の制限を Endpoint あたり250まで拡張
    • Attributes, Metrics, User Attributes の
    上限が Endopoint あたり 40 -> 250
    • セグメントに使⽤するユーザーの属性情
    報を多く持てる様になったことで、より
    多様なセグメントを作成できるように
    https://aws.amazon.com/about-aws/whats-new/2020/09/amazon-pinpoint-supports-250-attributes-per-endpoint/
    

    View Slide

58. カスタムチャネルの⼀般利⽤を開始
    • カスタムチャネルを使うことで、メール
    , Push通知, SMS, Voice以外のチャネル
    にも通知を送れる様に
    • エンドポイントに任意の宛先情報を保持
    できる
    • Pinpointから呼び出される Lambda
    Function 内で送信処理を実装する
    https://aws.amazon.com/about-aws/whats-new/2020/04/announcing-general-availability-of-amazon-pinpoint-custom-
    channels/
    Amazon Pinpoint
    AWS Lambda
    ブラウザプッシュ SNS
    宛先・メッセージ情報
    API
    

    View Slide

59. 機械学習を⽤いたパーソナライズ機能をリリース
    • 今までもメッセージテンプレートの中に
    ユーザーの属性情報を埋め込むことがで
    きたが、さらにAmazon Personalize や
    AWS Lambda と連携してレコメンド情
    報を埋め込むことが可能に
    • 例えば、ユーザー毎におすすめ商品を埋
    め込んだメッセージを配信できる
    https://aws.amazon.com/about-aws/whats-new/2020/03/amazon-pinpoint-template-personalization-using-machine-
    learning/
    Amazon Pinpoint
    AWS Lambda Amazon Personalize
    

    View Slide

60. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

61. モチベーション
    Storage Compute Managed
    databases
    Quantum
    technologies
    LBS Machine
    learning
    LBS: Location Based Service
    

    View Slide

62. LBSの導⼊に対するお客様の課題
    新規プロバイダーの導⼊
    「良い」データの取得
    セキュリティとプライバシーの保護
    コスト管理
    素早い本番環境への投⼊
    

    View Slide

63. ü ⾼品質なデータへのアクセスが容易
    ü コスト最適化
    ü プライバシーとセキュリティー
    ü プロダクション導⼊への時間短縮
    Amazon Location Service (Preview)
    Places
    Routing
    (coming)
    Maps
    Your
    application
    Tracking
    Geofencing
    

    View Slide

64. ü 新しい認証情報や3rd Party
    製品の導⼊が不要
    ü グローバル対応もシンプル
    ü 新しいデータソースの活⽤が
    容易
    ü 検証にかかるコストを下げる
    ⾼品質なデータへのアクセスが容易
    ⼀貫した API を通じて Esri および HERE のデータにアクセス
    Esri
    HERE
    

    View Slide

65. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    

    View Slide

66. 今回アップデートをご紹介したサービス
    o AWS Amplify
    o Overview
    o Amplify Libraries
    (Web / Android / iOS)
    o Amplify CLI
    o Amplify Console
    o Amplify Admin UI
    o AWS AppSync
    o AWS Device Farm
    o Amazon Pinpoint
    o Amazon Location Service
    New!
    New!
    

    View Slide

67. AWSのフロントエンド関連サービスが気になる⽅、
    ぜひ connpass のメンバーに⼊ってください︕
    https://aws-amplify-jp.connpass.com/
    今後のイベント開催時に通知を受け取ることができます︕
    

    View Slide

68. 直近のイベント情報
    Ø Amplify Hands-on
    Ø 2021年01⽉29⽇（⾦）18:00-20:00 オンライン開催
    Ø AWS Amplify でサクッと Web フロントエンドアプリケーションを作ってみま
    しょう。このハンズオンでは、Vue.js を使ったチャットアプリや AI 機能の実
    装や、React を使った SNS "BOYAKI" の実装が学べます。
    Ø Amplify Meetup #03
    Ø 2021年3⽉頃 （現在企画中︕オンライン開催を予定）
    Ø Amplify Meetupは、AWS Amplifyに興味のあるすべてのエンジニアのためのコ
    ミュニティイベントです。AWS Amplifyの知⾒を共有して、⽇本語の情報を増
    やしていきましょう︕Amplify MeetupではAWS Amplifyに関する情報交換と、
    AWS Amplifyの⽇本コミュニティの醸成を⽬的とし、様々なイベントを開催予
    定です。
    

    View Slide

69. 注⽬情報
    Ø awesome-aws-amplify-ja
    Ø https://github.com/aws-amplify-jp/awesome-aws-amplify-ja
    Ø ⽇本語で書かれているAWS Amplifyのツール、チュートリアル、記事
    などのリンク集です。
    Ø Slack: Amplify Japan User Group
    Ø http://bit.ly/join-amplify-jp-slack
    Ø ⽇本のAmplifyコミュニティーSlackです。オープンなコミュニティと
    して、運営含めて皆さんと成⻑したいと考えています。
    

    View Slide

70. 注⽬情報
    Ø awesome-aws-amplify-ja
    Ø https://github.com/aws-amplify-jp/awesome-aws-amplify-ja
    Ø ⽇本語で書かれているAWS Amplifyのツール、チュートリアル、記事
    などのリンク集です。
    Ø Slack: Amplify Japan User Group
    Ø http://bit.ly/join-amplify-jp-slack
    Ø ⽇本のAmplifyコミュニティーSlackです。オープンなコミュニティと
    して、運営含めて皆さんと成⻑したいと考えています。
    

    View Slide

71. Thank you!
    © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Koya Kimura
    @kimyan_udon2
    

    View Slide