Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

July 17, 2021
Tweet

Transcript

  1. AWS Amplify + Amazon Location Service を React でやってみる 2021年7⽉18⽇

    tacck 1 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics
  2. 名前 ⽊原 卓也 / @tacck 所属 ⽣活協同組合コープさっぽろ デジタル推進本部 システム部 主催コミュニティ

    ゆるWeb勉強会@札幌 スマートスピーカーで遊ぼう会@札幌 運営メンバー Amplify Japan User Group 好きな フィギュアスケートの技 スプレッド・イーグル 誰 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 2
  3. 先に宣伝 / Amplify Boost Up AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス /

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

  5. AWS Amplify • バックエンドをすばやく構成 • フロントエンドとのシームレスな接続 • 数クリックでデプロイ • 容易なコンテンツ管理

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

  7. React で AWS Amplify + Amazon Location Service AWSの基礎を学ぼう 特別編

    最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 7
  8. 準備⼿順 (超概略版) npx create-react-app react-amplify-location cd react-amplify-location amplify init amplify

    add auth amplify push ここから実装を頑張る AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 8
  9. デモ AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 9

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

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

    11
  12. 認証(Cognito)のリソース • Amplify CLI で追加した Cognito を Amazon Location Service

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

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

    / #awsbasics 14
  15. リアルタイムな情報連携 • Amplify CLI で追加できる API (GraphQL) の裏側は AppSync •

    AppSync の Subscription を使うことで、 地図へのリアルタイムな反映もやりやすい。 準備が間に合わなかったので、今回はお話しだけ。。。 AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる はじめての位置情報サービス / #awsbasics 15
  16. その他モロモロ • IoT Core は Amplify PubSub ライブラリで連携可能 • UI

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

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

    https://aws-amplify-jp.connpass.com/event/217715/