AWS Amplify + Amazon Location Service で地図を使ってみよう #ゆるWeb札幌

ゆるWeb勉強会@札幌 OnLine #13 での発表資料
https://mild-web-sap.connpass.com/event/214866/
https://www.youtube.com/watch?v=WQTCwSUKZ9o&t=6960s

Transcript

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