Slide 1
Slide 1 text
AWS Amplify +
Amazon Location
Service で
地図を作ってみよう
2021年6⽉28⽇
tacck
1
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌
Slide 2
Slide 2 text
名前 ⽊原 卓也 / @tacck
所属
⽣活協同組合コープさっぽろ
デジタル推進本部 システム部
主催コミュニティ
ゆるWeb勉強会@札幌
スマートスピーカーで遊ぼう会@札幌
運営メンバー Amplify Japan User Group
好きな
フィギュアスケートの技
スプレッド・イーグル
誰
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 2
Slide 3
Slide 3 text
今⽇のテーマ
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 3
Slide 4
Slide 4 text
AWS Amplify
• バックエンドをすばやく構成
• フロントエンドとのシームレスな接続
• 数クリックでデプロイ
• 容易なコンテンツ管理
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 4
https://aws.amazon.com/jp/amplify/
Slide 5
Slide 5 text
Amazon Location Service
• マップ
• 地図画像を表⽰ (Esri, HERE)
• 場所
• 住所や都市名から緯度軽度の取得
(Esri, HERE)
• ルート
• ⼆点間の移動時間や距離
• トラッキング
• 対応デバイスの位置情報履歴取得
• ジオフェンシング
• 対応デバイスがある範囲を出⼊り
したか
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 5
https://aws.amazon.com/jp/location/features/
Slide 6
Slide 6 text
いわゆる
• よくある地図サービスなんですが...
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 6
Slide 7
Slide 7 text
個⼈的に良いと思ったところ
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 7
Slide 8
Slide 8 text
Cognito + IAM Role での制御が楽
• Cognito で認証済みの⼈にだけ IAM Role で許可を付与できる。
• 単にAPIのエンドポイントだけではリソースにアクセスできない。
(ように制限可能)
• 既存サービスのユーザー限定機能として組み込みやすい。
• もちろん、認証していないゲストユーザー向けとしても、
IAM Role の許可で簡単に設定できる。
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 8
Slide 9
Slide 9 text
個⼈的に⼤変だったところ
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 9
Slide 10
Slide 10 text
React 向けのコンポーネントを
⾒つけられず...
• マップのレンダリングエンジンとして MapLibre GL JS が
ドキュメントで紹介されている。
(Mapbox GL JS のOSS派⽣ライブラリ)
https://docs.aws.amazon.com/location/latest/developerguide/tutorial-maplibre-gl-js.html
• これをいい感じに使う React 向けのコンポーネントを
探したが⾒つけられず。
(React初⼼者なのでうまく切り抜けることもできず)
• 今回は Vue.js 2 のコンポーネントで対応。
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 10
Slide 11
Slide 11 text
Vue 版は⾒つかった
• @benchmark-urbanism/vue-mapbox-map
https://github.com/benchmark-urbanism/vue-mapbox-map
• 基本的な使い⽅はこちらに記載
“Take a journey with your own map service by AWS Amplify and
Amazon Location Service”
https://dev.to/aws-builders/take-a-journey-with-your-own-map-service-by-aws-amplify-
and-amazon-location-service-1nj6
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 11
Slide 12
Slide 12 text
デモ
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 12
Slide 13
Slide 13 text
動画でご確認ください
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 13
https://www.youtube.com/watch?v=WQTCwSUKZ9o&t=6960s
Slide 14
Slide 14 text
まとめ
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 14
Slide 15
Slide 15 text
まとめ
• 👍 良いところ
• Cognito + IAM Role でのリソース制御が簡単
• 検索(ジオコーディング)もそこそこいける
• 🤔 もう少し
• 地図上の表記が “英語+ローカル⾔語”
• 少なくとも⽇本では致命的になりそう
• 🔭 今後
• Amplify のライブラリとして提供される...はず → より使いやすくなる
ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 15