AWS Amplify + Amazon Location Service を React でやってみる #awsbasics

AWSの基礎を学ぼう 特別編　最新サービスをみんなで触ってみる はじめての位置情報サービス
https://awsbasics.connpass.com/event/215185/

サンプルコード
https://github.com/tacck/react-amplify-location

Transcript

1. AWS Amplify + Amazon
   Location Service を
   React でやってみる
   2021年7⽉18⽇
   tacck
   1
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics
   

   View Slide

2. 名前 ⽊原 卓也 / @tacck
   所属
   ⽣活協同組合コープさっぽろ
   デジタル推進本部 システム部
   主催コミュニティ
   ゆるWeb勉強会@札幌
   スマートスピーカーで遊ぼう会@札幌
   運営メンバー Amplify Japan User Group
   好きな
   フィギュアスケートの技
   スプレッド・イーグル
   誰
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 2
   

   View Slide

3. 先に宣伝 / Amplify Boost Up
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 3
   https://aws-amplify-jp.connpass.com/event/217715/
   

   View Slide

4. 今⽇のテーマ
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 4
   

   View Slide

5. AWS Amplify
   • バックエンドをすばやく構成
   • フロントエンドとのシームレスな接続
   • 数クリックでデプロイ
   • 容易なコンテンツ管理
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 5
   https://aws.amazon.com/jp/amplify/
   

   View Slide

6. 機能は盛りだくさん
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 6
   

   View Slide

7. React で
   AWS Amplify +
   Amazon Location Service
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 7
   

   View Slide

8. 準備⼿順 (超概略版)
   npx create-react-app react-amplify-location
   cd react-amplify-location
   amplify init
   amplify add auth
   amplify push
   ここから実装を頑張る
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 8
   

   View Slide

9. デモ
   AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
   はじめての位置情報サービス / #awsbasics 9
   

   View Slide

10. 画⾯
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 10
    

    View Slide

11. AWS Amplify を使って
    楽になるところ
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 11
    

    View Slide

12. 認証(Cognito)のリソース
    • Amplify CLI で追加した Cognito を
    Amazon Location Service でも使える。(設定が少し楽)
    • 作成済みの Role に Policy を追加するだけ
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 12
    

    View Slide

13. AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 13
    

    View Slide

14. 認証(Cognito)のリソース
    • 将来的には AWS Amplify でここまで⾯倒みてくれる...気がする。
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 14
    

    View Slide

15. リアルタイムな情報連携
    • Amplify CLI で追加できる API (GraphQL) の裏側は AppSync
    • AppSync の Subscription を使うことで、
    地図へのリアルタイムな反映もやりやすい。
    準備が間に合わなかったので、今回はお話しだけ。。。
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 15
    

    View Slide

16. その他モロモロ
    • IoT Core は Amplify PubSub ライブラリで連携可能
    • UI Component で認証画⾯など作りやすい
    • Webだと React / Vue.js / Angular 対応
    • Hosting 機能があるからデプロイ簡単 (Basic認証もできる!)
    • Webアプリケーションに地図機能を組み込みたい、という時に
    AWS Amplify + Amazon Location Service は相性ピッタリ!!
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 16
    

    View Slide

17. 参考情報
    • AWS Amplify
    https://docs.amplify.aws/
    • Using MapLibre GL JS with Amazon Location Service
    https://docs.aws.amazon.com/location/latest/developerguide/t
    utorial-maplibre-gl-js.html
    • Vue.js での AWS Amplify + Amazon Location Service の例
    https://dev.to/aws-builders/take-a-journey-with-your-own-
    map-service-by-aws-amplify-and-amazon-location-service-
    1nj6
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 17
    

    View Slide

18. Amplify Japan User Group
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 18
    https://github.com/aws-amplify-jp/awesome-aws-amplify-ja
    

    View Slide

19. Amplify Boost Up
    AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
    はじめての位置情報サービス / #awsbasics 19
    https://aws-amplify-jp.connpass.com/event/217715/
    

    View Slide