Slide 1
Slide 1 text
AWS Amplify + Amazon
Location Service を
React でやってみる
2021年7⽉18⽇
tacck
1
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics
Slide 2
Slide 2 text
名前 ⽊原 卓也 / @tacck
所属
⽣活協同組合コープさっぽろ
デジタル推進本部 システム部
主催コミュニティ
ゆるWeb勉強会@札幌
スマートスピーカーで遊ぼう会@札幌
運営メンバー Amplify Japan User Group
好きな
フィギュアスケートの技
スプレッド・イーグル
誰
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 2
Slide 3
Slide 3 text
先に宣伝 / Amplify Boost Up
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 3
https://aws-amplify-jp.connpass.com/event/217715/
Slide 4
Slide 4 text
今⽇のテーマ
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 4
Slide 5
Slide 5 text
AWS Amplify
• バックエンドをすばやく構成
• フロントエンドとのシームレスな接続
• 数クリックでデプロイ
• 容易なコンテンツ管理
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 5
https://aws.amazon.com/jp/amplify/
Slide 6
Slide 6 text
機能は盛りだくさん
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 6
Slide 7
Slide 7 text
React で
AWS Amplify +
Amazon Location Service
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 7
Slide 8
Slide 8 text
準備⼿順 (超概略版)
npx create-react-app react-amplify-location
cd react-amplify-location
amplify init
amplify add auth
amplify push
ここから実装を頑張る
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 8
Slide 9
Slide 9 text
デモ
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 9
Slide 10
Slide 10 text
画⾯
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 10
Slide 11
Slide 11 text
AWS Amplify を使って
楽になるところ
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 11
Slide 12
Slide 12 text
認証(Cognito)のリソース
• Amplify CLI で追加した Cognito を
Amazon Location Service でも使える。(設定が少し楽)
• 作成済みの Role に Policy を追加するだけ
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 12
Slide 13
Slide 13 text
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 13
Slide 14
Slide 14 text
認証(Cognito)のリソース
• 将来的には AWS Amplify でここまで⾯倒みてくれる...気がする。
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 14
Slide 15
Slide 15 text
リアルタイムな情報連携
• Amplify CLI で追加できる API (GraphQL) の裏側は AppSync
• AppSync の Subscription を使うことで、
地図へのリアルタイムな反映もやりやすい。
準備が間に合わなかったので、今回はお話しだけ。。。
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 15
Slide 16
Slide 16 text
その他モロモロ
• IoT Core は Amplify PubSub ライブラリで連携可能
• UI Component で認証画⾯など作りやすい
• Webだと React / Vue.js / Angular 対応
• Hosting 機能があるからデプロイ簡単 (Basic認証もできる!)
• Webアプリケーションに地図機能を組み込みたい、という時に
AWS Amplify + Amazon Location Service は相性ピッタリ!!
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 16
Slide 17
Slide 17 text
参考情報
• 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
Slide 18
Slide 18 text
Amplify Japan User Group
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 18
https://github.com/aws-amplify-jp/awesome-aws-amplify-ja
Slide 19
Slide 19 text
Amplify Boost Up
AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる
はじめての位置情報サービス / #awsbasics 19
https://aws-amplify-jp.connpass.com/event/217715/