はじめに
Uber Eatsやタクシー配車アプリ「GO」をはじめリアルタイム位置情報を使ったサービスが続々と出てきています。今回はアプリケーションにロケーションを素早く、簡単に追加できるAmazon Location Serviceを試してみました。
Amazon Location Serviceの概要
Amazon Location Serciceの機能は大きく以下の５つになります。
- マップ
- インデックスの配置
- ルート計算ツール
- ジオフェンスのコレクション
- トラッカー
マップを試してみる
Amazon Location ServiceではAWSコンソールで作成したMapを簡単にアプリケーションに埋め込むことができます。
以下ではJavascriptでマップを表示する設定を行いました。
MySampleMapという名前のMapを作成
まずはWebアプリに表示したマップをAWSコンソールで作成していきます。用意されているものを選択していくだけなのでとても簡単です。
Web画面に表示するMapのスタイルを選択できます。
Web画面にMapを埋め込むための認証設定① 〜IDプールの作成〜
ここで設定しているのは下画像でいう赤枠の部分です。
引用：https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/getting-started-browser.html
ID プールのIDは後で使うのでメモしておきます。
Web画面にMapを埋め込むための認証設定② 〜IAM Roleの作成〜
AWSの案内に従って認証設定を行います。
以下の画面でWebアプリからAmazon Location Serviceへのアクセスを許可するポリシーを作成します。
上の画面で作ったIAM RoleでWebにMapを表示します。
Web画面を作成
AWSが用意してくれているソースコードをindex.htmlにコピペするだけでMapを表示することができます。
先ほど作成したIDプールがドロップダウンで選択できるので、選択した後、下のソースコードをコピペしましょう。
作成したindex.htmlと同じディレクトリでnpx serveと入力してWebサーバーを起動するとlocalhost:3000からAWSで作成したMapを表示させることができます。
% npx serve
Need to install the following packages:
serve
Ok to proceed? (y) y
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - On Your Network: http://192.168.1.5:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────────┘
localhost:3000にアクセスするとAWSコンソールで作成したマップが表示されました！
このようにAmazon Location Serviceを使うと、Mapの作成と認証設定をするだけでアプリに地図を埋め込むことができます。今回はWebに地図を表示するだけでしたが、次回はジオフェンシングという機能を試してみたいと思います！
おまけ
10月中旬（予定）に54時間でStartup Weekendという起業体験イベントが多摩地域で開催されます。
身近な課題や社会課題をハックしたいというハッカーは奮って参加ください。