AWS Amplify + Amazon Location Service で 地図を作ってみよう 2021年6⽉28⽇ tacck 1 ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 

名前 ⽊原 卓也 / @tacck 所属 ⽣活協同組合コープさっぽろ デジタル推進本部 システム部 主催コミュニティ ゆるWeb勉強会@札幌 スマートスピーカーで遊ぼう会@札幌 運営メンバー Amplify Japan User Group 好きな フィギュアスケートの技 スプレッド・イーグル 誰 ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 2 

今⽇のテーマ ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 3 

AWS Amplify • バックエンドをすばやく構成 • フロントエンドとのシームレスな接続 • 数クリックでデプロイ • 容易なコンテンツ管理 ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 4 https://aws.amazon.com/jp/amplify/ 

Amazon Location Service • マップ • 地図画像を表⽰ (Esri, HERE) • 場所 • 住所や都市名から緯度軽度の取得 (Esri, HERE) • ルート • ⼆点間の移動時間や距離 • トラッキング • 対応デバイスの位置情報履歴取得 • ジオフェンシング • 対応デバイスがある範囲を出⼊り したか ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 5 https://aws.amazon.com/jp/location/features/ 

いわゆる • よくある地図サービスなんですが... ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 6 

個⼈的に良いと思ったところ ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 7 

Cognito + IAM Role での制御が楽 • Cognito で認証済みの⼈にだけ IAM Role で許可を付与できる。 • 単にAPIのエンドポイントだけではリソースにアクセスできない。 (ように制限可能) • 既存サービスのユーザー限定機能として組み込みやすい。 • もちろん、認証していないゲストユーザー向けとしても、 IAM Role の許可で簡単に設定できる。 ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 8 

個⼈的に⼤変だったところ ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 9 

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 

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 

デモ ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 12 

動画でご確認ください ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 13 https://www.youtube.com/watch?v=WQTCwSUKZ9o&t=6960s 

まとめ ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 14 

まとめ • 👍 良いところ • Cognito + IAM Role でのリソース制御が簡単 • 検索(ジオコーディング)もそこそこいける • 🤔 もう少し • 地図上の表記が “英語+ローカル⾔語” • 少なくとも⽇本では致命的になりそう • 🔭 今後 • Amplify のライブラリとして提供される...はず → より使いやすくなる ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 15