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

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

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

Kihara, Takuya

June 28, 2021
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. 名前 ⽊原 卓也 / @tacck 所属 ⽣活協同組合コープさっぽろ デジタル推進本部 システム部 主催コミュニティ

    ゆるWeb勉強会@札幌 スマートスピーカーで遊ぼう会@札幌 運営メンバー Amplify Japan User Group 好きな フィギュアスケートの技 スプレッド・イーグル 誰 ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 2
  2. Amazon Location Service • マップ • 地図画像を表⽰ (Esri, HERE) •

    場所 • 住所や都市名から緯度軽度の取得 (Esri, HERE) • ルート • ⼆点間の移動時間や距離 • トラッキング • 対応デバイスの位置情報履歴取得 • ジオフェンシング • 対応デバイスがある範囲を出⼊り したか ゆるWeb勉強会@札幌/Online#13 / #ゆるWeb札幌 5 https://aws.amazon.com/jp/location/features/
  3. Cognito + IAM Role での制御が楽 • Cognito で認証済みの⼈にだけ IAM Role

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

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