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

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

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

June 28, 2021
Tweet

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