Amplify Geo で React アプリに地図を表示してみよう

〜AWS Amplify と Amazon Location Service のご紹介も添えて

2021-11-02
デベロッパーのためのクラウド活用方法

Author : 木村 公哉

みなさんこんにちは!
Amplifyしてますか ? そして Location Service してますか ? 

2021 年 9 月 30 日、Web アプリに簡単に地図と位置情報の機能を追加することができる Amplify Geo for AWS Amplify が一般提供を開始しました

そこで今回は改めて AWS Amplify と Amazon Location Service を紹介します。そして、実際に少しだけ Amplify Geo を触っていきます !


AWS Amplify とは ?

AWS Amplify (Amplify) とは、AWS を用いた Web / モバイルアプリを爆速でリリースするための開発プラットフォームです。AWS Amplify は以下の 4 つから構成されています。

Amplify Libraries

 Web・モバイルアプリと AWS を統合するための OSS ライブラリと UI コンポーネント

Amplify CLI

Web・モバイルアプリのバックエンドをインタラクティブに作成・管理するための OSS ツールチェーン

Amplify Console

フルスタックサーバーレス Web アプリをビルド、テスト、デプロイ、ホスティングするための AWS サービス

Amplify Admin UI

Web・モバイルアプリのバックエンドとコンテンツを管理するための GUI ツール

そしてこれは私が Amplify の紹介をする際には必ずお伝えしているのですが、AWS Amplify は爆速で、スケールするアプリを、簡単に開発することができます。つまり、スタートアップからエンタープライズまで、小さくはじめて大きく育てるビジネスを展開するお客様に最適です ! 詳しくは こちらの資料 をご覧ください。


Amazon Location Serviceとは ?

Amazon Location Service (Location Service) とは、AWS が提供するフルマネージドの位置情報サービス (LBS : Location Based Service) です。Location Service には 以下の機能 があります。

マップ (Maps)

位置情報の視覚化とデータのオーバーレイ

場所 (Places)

ジオコーディングとリバースジオコーディング

ルート (Routes)

出発地と目的地の間の移動時間、移動距離、特定の移動制限 (トラック用モード、車体寸法、回避など) 付きで道順を提示

トラッキング (Tracking)

位置情報のトラッキング

ジオフェンシング (Geofencing)

地理的境界 (ジオフェンス) への出入りを検知

このように、マップ機能を中心に位置情報に関連する機能が一通り提供されている Location Service ですが、これ以外にも AWS ならではの特徴があります。それは AWS サービスとの統合です。AWS CloudFormation を使って Location Service のリソースを作成したり、Amazon CloudWatch でメトリクス、AWS CloudTrail で API 呼び出し、それぞれの監視をしたり、Amazon EventBridge によってジオフェンスイベントを受け取ることができます。

特に EventBridge 統合では、スマホや IoT デバイスなどがジオフェンス内に入ったことをトリガーにして、AWS Lambda の Lambda 関数を実行することができます。Lambda 関数を実行できれば後はこっちのもの、Amazon SNS でプッシュ通知を実行したり、既存アプリの API を叩いたりなど、活用方法は無限大です !


Amplify Geoとは ?

ここまでの説明で「早速 Location Service 使ってみたい ! 触ってみたい !」と思った方もいらっしゃるのではないでしょうか。

そこで登場するのが Amplify Geo です ! 

Amplify Geo は Web アプリに簡単に地図と位置情報の機能を追加できるものです。この Amplify Geo の裏側では Location Service が活用されており、ここでようやく Amplify と Location Service がつながってくるのです ! ちなみに Amplify 視点で見ると、主に 2 つの観点で機能追加がなされています。

  • Amplify Libraries : Amazon Location Service の API のラッパーと MapLibre GL JS (※) を活用した UI コンポーネント
  • Amplify CLI : フロントエンドから Amazon Location Service (マップとジオコーディング関連機能) をすぐに使い始められるようにするコマンド (amplify add geo) の追加

このような形で Location Service と Amplify を活用することで、簡単にご自身の Web アプリへ地図を追加したり、位置情報を活用した機能を追加したりできるのです !

※MapLibre GL JS:WebGL を用いた OSS マップレンダリングライブラリ


Amplify Geo を触ってみる

それでは実際に、Amplify の公式ドキュメント に沿ってAmplify Geoを触ってみましょう。ちなみに、私は AWS Cloud9 (Cloud9) を用いて触っています。

Amplify CLIのインストール

千里の道も Amplify CLI から。まずは Amplify CLI をインストールします。

今回は執筆時点での最新バージョンを指定してインストールしています。

npm i -g @aws-amplify/cli@6.3.1

そしてバージョンを確認をして、インストールが成功していることを確認します。Amplify Geo を利用する場合、 6.1.0 以上である必要があります。

amplify --version

Amplify CLIを利用するのが初めての方は、ここで以下のコマンドを実行して、Amplify CLI の初期設定 を実行してください。

amplify configure

お試し用 React アプリの作成と Amplify CLI によるプロジェクトの初期設定

次に、Amplify Geo を試すための React アプリを、公式ドキュメント を参考にしながら作ります。

npx create-react-app amplify-geo-sawattemita
cd amplify-geo-sawattemita/

先ほど移動したディレクトリの中でプロジェクトの初期設定を実行します。

使用する AWS プロファイルに注意します。それ以外はデフォルトで OK です。

npx create-react-app amplify-geo-sawattemita
cd amplify-geo-sawattemita/

実行結果

? Enter a name for the project amplifygeosawattemit
The following configuration will be applied:

Project information
| Name: amplifygeosawattemit
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
...

地図リソースの追加

早速、地図のリソースを追加してみましょう ! 

このコマンドでは地図のリソース、またはジオコーディング関連の機能を追加することができますが、ここでは地図のリソースを追加します。

バックエンドの設定に必要な情報を聞かれますが、今回は簡略化のために「Authorized and Guest users」だけ明示的に選択して、後はデフォルトで問題ありません。

注意 :「Authorized and Guest users」は認証していないユーザーも Location Service の API を叩くことができるという設定となります。今回試した後は「後片付け」パートを参考に、バックエンドを削除しておきましょう。

amplify add geo

実行結果

? Select which capability you want to add: Map (visualize the geospatial data)
✔ geo category resources require auth (Amazon Cognito). Do you want to add auth now? (Y/n) · yes
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource amplifygeosawattemithogehoge locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

✔ Provide a name for the Map: · maphogehoge
✔ Who can access this Map? · Authorized and Guest users
The following choices determine the pricing plan for Geo resources. Learn more at https://aws.amazon.com/location/pricing/
✔ Are you tracking commercial assets for your business in your app? · No, I do not track devices or I only need to track consumers' personal devices

Successfully set RequestBasedUsage pricing plan for your Geo resources.
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no

そして、以下のコマンドで先ほど設定した内容をバックエンド (AWS 上) に適用 (push) します。Push する内容がこれでいいか聞かれるので、確認の上、Enter をバチーンと叩くと、これでバックエンドの準備は完了です !

amplify push

React アプリに地図を表示する

ここから、実際に React アプリに地図を表示させていきましょう。

まずは、Amplify Libraries をインストールします。

npm install aws-amplify

続いて、地図を表示させるためのライブラリをインストールしていきましょう。

下記のコマンドを実行してください。

npm install maplibre-gl@1 maplibre-gl-js-amplify

次に、src の中にある App.js を以下のようにします。

とりあえず地図をバンッと表示させたいので、そのように書いてます。

import { useEffect } from 'react';
import { createMap } from "maplibre-gl-js-amplify";
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import "maplibre-gl/dist/maplibre-gl.css";

// Amplify の設定を読み込み
Amplify.configure(awsconfig);

function App() {
  useEffect(() => {
    createMap({
      container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
      center: [139.7674681227469, 35.68111419325676], // 東京駅
      zoom: 14,
  })
  }, []);
  return (
    <div id="map" style={{height: '100vh'}}/>
  );
}

export default App;

さあこれで準備は整いました。プレビューしてみましょう !

下記のコマンドを実行して、ローカルで実行されている場合は表示されている http://localhost:8080 にアクセス、Cloud9 で実行されている場合は「Preview」から「Preview Running Application」をクリックします。

npm start

※このコマンドを終了するには、Ctrl + c を押してください。

img_amplify-geo-map_01

すると、このように東京駅を中心とした地図がバァ〜ンと表示されていることでしょう!

img_amplify-geo-map_02

後片付け (必ず実行してください !)

今回私はローカルで地図が表示されて十分満足しましたので、このまま後片付けに入りたいと思います。

特にバックエンドの削除は不要なリソースに対するアクセスを防ぐという観点で非常に重要ですので、試し終わりましたら下記のコマンドを実行してください。

amplify delete

Amplify CLI を使っているとバックエンドの削除も簡単でいいですね !


まとめ

今回は Amplify Geo の一般公開を記念して、Amplify と Location Service の簡単なご紹介と、実際に Amplify Geo を使って React アプリに地図を表示してみました。

今回は特に「すぐに Amplify x Location Service を試してみたい !」と考える方向けに、いろいろ省略して最短ルートで地図を表示してみたので、アラがありますがご了承ください。多分これが一番早いと思います。

もうちょっと詳しく試してみたい ! という方は、AWS ブログ「Add Maps to your App in 3 Steps with AWS Amplify Geo powered by Amazon Location Service」でマップの表示だけでなくマーカーの表示などもやってみていますので、是非参考にしてみてください。

また、Amplify については GitHub リポジトリ「Amplify 学習リソース集」に日本語で書かれている AWS Amplify のツール、チュートリアル、記事などがリンク集としてまとまっています。また、それらを管理運用している「Amplify 日本ユーザーグループ」での交流を通して、いろんな情報がキャッチアップすることもできます !

というわけで、皆様の良き Amplify & Location Service ライフを !
Let's Amplify & Location Service〜!


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

筆者プロフィール

photo_kimura-koya

木村 公哉
アマゾン ウェブ サービス ジャパン合同会社
ソリューションアーキテクト

香川県出身のソリューションアーキテクトです。普段は ISV/SaaS なお客様の技術支援を担当しています。好きなサービスは AWS Amplify と AWS Lambda、Amazon Kinesis です。好きな食べ物はうどんです。つい最近、愛犬家になりました。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する