` を CSS でスタイル設定して、アプリケーションに必要なディメンションを設定できます。GitHub リポジトリから、CSS ファイル `style.css` をダウンロードする必要があります。これにより、ビジネスロジックに集中できます。
`style.css` および `index.html` ファイルを同じフォルダに保存します。
`style.css` ファイルを [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css) からダウンロードします。
```
```
#### API キーと AWS リージョンの詳細を追加する
で作成した API キー[API キーを使用して認証する](using-apikeys.md)を、キーが作成された AWS リージョンとともにこのファイルに追加します。
```
.....
.....
```
### アプリケーションにマップを追加する
このセクションでは、アプリケーションにマップ機能を追加します。開始するためには、ファイルがこのフォルダ構造内にある必要があります。
まだダウンロードしていない場合は、[GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css) から `style.css` ファイルをダウンロードしてください。
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
```
#### マップを初期化する関数を作成します。
マップを設定するには、`initializeMap(...)` 行の後に次の関数 `//Add functions` を作成します。
最初の中心位置とズームレベルを選択します。この例では、マップの中心をカナダのバンクーバーに設定し、ズームレベルを 10 に設定します。簡単にズームできるようにするためナビゲーションコントロールを追加します。
```
/**
* Initializes the map with the specified style and color scheme.
*/
function initializeMap(mapStyle = "Standard", colorScheme = "Dark") {
const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;
const map = new maplibregl.Map({
container: 'map', // The ID of the map container
style: styleUrl, // The style URL for the map
center: [-123.116226, 49.246292], // Starting center coordinates
zoom: 10, // Initial zoom level
validateStyle: false // Disable style validation
});
return map; // Return the initialized map
}
```
#### マップを初期化する
`initializeMap(...)` を呼び出してマップを初期化します。オプションで、`initializeMap` 関数の後に任意のスタイルとカラースキームを使用して初期化できます。他のスタイルオプションについては、「[AWS マップスタイルと機能](map-styles.md)」を参照してください。
```
// Step 1: Setup API Key and AWS Region
const API_KEY = "Your_API_Key";
const AWS_REGION = "Region_where_you_created_API_Key";
// Step 2.1 Add maps to application
// Step 2.2 initialize the map
const map = initializeMap("Standard","Light");
// Step 3: Add places features to application
```
ブラウザで `index.html` を開いて実行中のマップを表示します。
#### ナビゲーションコントロールを追加する
オプションで、ナビゲーションコントロール (ズームとローテーション) をマップに追加できます。これは、`initializeMap(...)` を呼び出した後に実行する必要があります。
```
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places features to application
```
#### マップコードを確認する
お疲れ様でした。最初のアプリでマップを使用できるようになりました。ブラウザで `index.html` を開きます。`style.css` が `index.html` と同じフォルダにあることを確認してください。
最終的な HTML は以下のようになります。
```
Amazon Location Service - Getting Started with First Map App
```
### アプリケーションに場所を追加する
このセクションでは、アプリケーションに場所機能を設定します。GitHub、[https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js) から JavaScript ファイルをダウンロードします。
開始するためには、ファイルがこのフォルダ構造内にある必要があります。
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### GeoPlaces を作成する関数を作成する
検索機能を追加するには、`AuthHelper` と `AmazonLocationClient` を使用して `GeoPlaces` クラスを初期化します。`index.html` の `` タグの前に次の `getGeoPlaces(map)` 関数を追加します。
```
/**
* Gets a GeoPlaces instance for Places operations.
*/
function getGeoPlaces(map) {
const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region
const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client
const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance
return geoPlaces; // Return the GeoPlaces instance
}
```
#### 検索ボックスをアプリケーションに追加する関数を作成する
`index.html` の `` タグの前に次の `addSearchBox(map, geoPlaces)`、`renderPopup(feature)`、`createPopup(feature)` 関数を追加して、検索機能の設定を完了します。
```
/**
* Adds search box to the map.
*/
function addSearchBox(map, geoPlaces) {
const searchBox = new MaplibreGeocoder(geoPlaces, {
maplibregl,
showResultsWhileTyping: true, // Show results while typing
debounceSearch: 300, // Debounce search requests
limit: 30, // Limit number of results
popuprender: renderPopup, // Function to render popup
reverseGeocode: true, // Enable reverse geocoding
zoom: 14, // Zoom level on result selection
placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box.
});
// Add the search box to the map
map.addControl(searchBox, 'top-left');
// Event listener for when a search result is selected
searchBox.on('result', async (event) => {
const { id, result_type } = event.result; // Get result ID and type
if (result_type === "Place") { // Check if the result is a place
const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place
if (placeResults.features.length) {
createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place
}
}
});
}
/**
* Renders the popup content for a given feature.
*/
function renderPopup(feature) {
return `
`;
}
/**
* Creates a popup for a given feature and sets its position.
*/
function createPopup(feature) {
return new maplibregl.Popup({ offset: 30 }) // Create a new popup
.setLngLat(feature.geometry.coordinates) // Set the popup position
.setHTML(renderPopup(feature)); // Set the popup content
}
```
#### アプリケーションに検索ボックスを追加する
セクション 3.1 で定義されているように `getGeoPlaces(map)` を呼び出して `GeoPlaces` オブジェクトを作成してから、`addSearchBox(map, geoPlaces)` を呼び出して検索ボックスをアプリケーションに追加します。
```
// Step 2: Add maps to application
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
```
場所の検索を使用できるようになりました。ブラウザで `index.html` を開いて動作を確認します。
#### マップをクリック時にポップアップを表示するための関数を追加する
マップをクリックしたときにポップアップを表示する関数 `addMapClick(map, geoPlaces)` を作成します。この関数を `` タグの直前に追加します。
```
/**
* Sets up reverse geocoding on map click events.
*/
function addMapClick(map, geoPlaces) {
map.on('click', async ({ lngLat }) => { // Listen for click events on the map
const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding
if (response.features.length) { // If there are results
const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker
const feature = response.features[0]; // Get the clicked feature
const clickedPopup = createPopup(feature); // Create popup for the clicked feature
clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position
.setPopup(clickedPopup) // Attach popup to marker
.addTo(map); // Add marker to the map
clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed
}
});
}
```
#### マップクリック機能を追加する関数を呼び出す
マップクリックアクションを有効にするには、`addSearchBox(map, geoPlaces)` を含む行の後に `addMapClick(map, geoPlaces)` を呼び出します。
```
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
// Step 3.3: Setup map click functionality
addMapClick(map, geoPlaces);
```
#### Maps and Places アプリケーションを確認する
お疲れ様でした。最初のアプリケーションが Maps and Places を使用することができるようになりました。ブラウザで `index.html` を開きます。`style.css` と `utils.js` が `index.html` と同じフォルダにあることを確認します。
最終的な HTML は以下のようになります。
```
Amazon Location Service - Getting Started with First Map App
```
### 詳細を見る
クイックスタートチュートリアルを完了したので、Amazon Location Service を使用してアプリケーションを構築する方法を理解できるでしょう。Amazon Location をさらに活用するには、以下のリソースをご覧ください。
+ **クエリ提案の詳細** - `Suggestion` API が返す結果の詳細を取得するには、`ReverseGeocode` クラスを拡張するか、`GeoPlaces` と同様の手法を使用することを検討してください。
+ **ビジネスニーズに適した API を選択する** - 要件に最適な Amazon Location API を決定するには、「[適切な API を選択する](choose-an-api.md)」のリソースを確認してください。
+ **Amazon Location の「ハウツー」ガイドを確認する** - チュートリアルやその他のリソースについては、「[Amazon Location Service デベロッパーガイド](https://docs.aws.amazon.com/location/)」を参照してください。
+ **ドキュメントと製品情報** - 詳細なドキュメントについては、「[Amazon Location Service デベロッパーガイド](https://docs.aws.amazon.com/location/)」を参照してください。製品の詳細については、「[Amazon Location Service の製品](https://aws.amazon.com/location)」ページを参照してください。
# 最初の Geofences and Trackers アプリケーションを作成する
このセクションでは、Amazon Location Geofences and Trackers を使用する主な機能を示すアプリケーションを作成します。アプリケーションは、Lambda、 AWS IoT、Amazon Location 機能の組み合わせを使用してトラッカーとジオフェンスがどのように相互作用するかを示します。iOS または Android プラットフォームを選択して開始します。
アプリケーションの構築を開始する前に、「[Amazon Location Service コンソールを使用して認証する](set-up-auth.md)」の手順に従って適切なアクセス権を付与します。
**Topics**
+ [iOS アプリケーションを作成する](ios-geofence-app.md)
+ [Android アプリケーションの作成](android-geofence-app.md)
# iOS アプリケーションを作成する
Amazon Location Service を使用して iOS アプリケーションを構築するには、次の手順に従います。
[GitHub](https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications) からプロジェクトファイルをクローンします。
## アプリケーション用の Amazon Location リソースを作成する
AWS アカウントの準備ができたら、Amazon Location Service リソースを生成できます。これらのリソースは、提供されたコードスニペットの実行に不可欠です。
**注記**
AWS アカウントをまだ作成していない場合は、[AWS アカウントを作成](https://portal.aws.amazon.com/billing/signup#/start/email)してください。
まず、Amazon Cognito アイデンティティプール ID を作成する必要があります。以下の手順に従ってください。
1. AWS コンソールで、Amazon Cognito サービスに移動し、左側のメニューから **ID プール**を選択し、**ID プールの作成**を選択します。
1. **[ゲストアクセス]** がオンになっていることを確認し、**[次へ]** を押して続行します。
1. 次に、新しい IAM ロールを作成するか、既存の IAM ロールを使用します。
1. アイデンティティプール名を入力し、次の手順で作成するマップとトラッカーの Amazon Location `(geo)` リソースにアイデンティティプールがアクセスできることを確認します。
1.
次に、 AWS Amazon Location コンソールでマップを作成してスタイル設定する必要があります。次の手順を使用します。
1. Amazon Location コンソールの [[マップ]](https://console.aws.amazon.com/location/maps/home) セクションに移動し、**[マップを作成]** を選択して使用可能なマップスタイルをプレビューします。
1. 新しいマップリソースに**名前**と**説明**を付けます。後からチュートリアルで使用するため、マップリソースに割り当てた名前を記録しておいてください。
1. マップスタイルを選択する際は、マップデータプロバイダーを考慮してください。詳細については、[AWS サービス利用規約](https://aws.amazon.com/service-terms)の第 82 項を参照してください。
1. [Amazon Location の利用規約](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service)に同意し、**[マップを作成]** を選択します。マップを作成したら、任意の方向にズームイン、ズームアウト、またはパンしてマップを操作できます。
Amazon Location コンソールを使用してトラッカーを作成するには
1. [Amazon Location Service コンソール](https://console.aws.amazon.com/location/)を開きます。
1. 左のナビゲーションペインから、[**トラッカー**] を選択します。
1. **トラッカーを作成**を選択します。
1. すべての必須フィールドに入力します。
1. [**位置フィルター**] で、トラッカーリソースの使用目的に最も適したオプションを選択します。位置のフィルタリングを設定しない場合、デフォルト設定は TimeBased となります。詳細については、このガイドの「トラッカー」と「Amazon Location Service トラッカー API リファレンス」の「PositionFiltering」を参照してください。
1. **[トラッカーを作成]** を選択して終了します。
## ジオフェンスコレクションを作成する
ジオフェンスコレクションを作成する際は、コンソール、API、または CLI のいずれかを使用できます。以下の手順で、各オプションについて説明します。
Amazon Location コンソールを使用してジオフェンスコレクションを作成する:
1. Amazon Location Service コンソール (https://console.aws.amazon.com/location/) を開きます。
1. 左のナビゲーションペインから、[ジオフェンスコレクション] を選択します。
1. [ジオフェンスコレクションの作成] を選択します。
1. コレクションの名前と説明を入力します。
1. [CloudWatch をターゲットとするEventBridge ルール] で、オプションのEventBridge ルールを作成して、ジオフェンスイベントへの対応を開始できます。これにより、Amazon Location は Amazon CloudWatch Logs にイベントをパブリッシュできるようになります。
1. [ジオフェンスコレクションの作成] を選択します。
Amazon Location API を使用してジオフェンスコレクションを作成する:
Amazon Location Geofences API の CreateGeofenceCollection オペレーションを使用してください。以下の例では、API リクエストを使用して `GOECOLLECTION_NAME` というジオフェンスコレクションを作成します。
```
POST /geofencing/v0/collections
Content-type: application/json
{
"CollectionName": "GOECOLLECTION_NAME",
"Description": "Geofence collection 1 for shopping center",
"Tags": {
"Tag1" : "Value1"
}
}
```
AWS CLI コマンドを使用してジオフェンスコレクションを作成します。
create-geofence-collection コマンドを使用します。以下の例では、 AWS CLI を使用して `GOECOLLECTION_NAME` というジオフェンスコレクションを作成します。
```
aws location \ create-geofence-collection \
--collection-name "GOECOLLECTION_NAME" \
--description "Shopping center geofence collection" \
--tags Tag1=Value1
```
## トラッカーをジオフェンスコレクションにリンクする
トラッカーをジオフェンスコレクションにリンクするには、コンソール、API、または CLI のいずれかを使用できます。以下の手順で、各オプションについて説明します。
Amazon Location Service コンソールを使用してトラッカーリソースをジオフェンスコレクションにリンクする:
1. Amazon Location コンソールを開きます。
1. 左のナビゲーションペインから、**[トラッカー]** を選択します。
1. **[デバイストラッカー]** で、対象トラッカーの名前リンクを選択します。
1. [**リンクされたジオフェンスコレクション**] で [**ジオフェンスコレクションをリンク**] を選択します。
1. [**リンクされたジオフェンスコレクション**] ウィンドウのドロップダウンメニューからジオフェンスコレクションを選択します。
1. [**Link (リンク)**] を選択します。
1. トラッカーリソースをリンクすると、そのリソースには[アクティブ] ステータスが割り当てられます。
Amazon Location API を使用してトラッカーリソースをジオフェンスコレクションにリンクする:
Amazon Location Trackers API の ``AsssociateTrackerConsumer オペレーションを使用してください。以下は、Amazon リソースネーム (ARN) を使用して ExampleTracker をジオフェンスコレクションにリンクする API リクエストの例です。
```
POST /tracking/v0/trackers/ExampleTracker/consumers
Content-type: application/json
{
"ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME"
}
```
AWS CLI コマンドを使用してトラッカーリソースをジオフェンスコレクションにリンクする:
`associate-tracker-consumer ` コマンドを使用します。次の例では、 を使用して AWS CLI というジオフェンスコレクションを作成します`GOECOLLECTION_NAME`。
```
aws location \
associate-tracker-consumer \
--consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \
--tracker-name "ExampleTracker"
```
## MQTT で AWS Lambda を使用する
Lambda 関数を作成します。
AWS IoT Core と Amazon Location Service 間の接続を作成するには、EventBridge CloudWatch イベントによって転送されたメッセージを処理するための AWS Lambda 関数が必要です。 CloudWatch この関数は、位置データを抽出し、Amazon Location Service 用にフォーマットし、Amazon Location Tracker API を通じて送信します。この関数は、 AWS Lambda コンソールから作成することも、 AWS Command Line Interface (AWS CLI) または AWS Lambda APIsを使用することもできます。コンソールを使用して Amazon Location に位置更新を公開する Lambda 関数を作成するには:
1. https://console.aws.amazon.com/lambda/ で AWS Lambda コンソールを開きます。
1. ナビゲーションペインで、[関数] を選択します。
1. 関数を作成を選択し、最初から作成するが選択されていることを確認します。
1. 次のボックスに入力します。
+ 関数名
+ **[ランタイム]** オプションで [Node.js 16.x] を選択します。
1. [関数の作成] を選択してください。
1. [コード] タブを選択してエディタを開きます。
1. index.js のプレースホルダーコードを次のように上書きします。
```
const AWS = require('aws-sdk')
const iot = new AWS.Iot();
exports.handler = function(event) {
console.log("event===>>>", JSON.stringify(event));
var param = {
endpointType: "iot:Data-ATS"
};
iot.describeEndpoint(param, function(err, data) {
if (err) {
console.log("error===>>>", err, err.stack); // an error occurred
} else {
var endp = data['endpointAddress'];
const iotdata = new AWS.IotData({endpoint: endp});
const trackerEvent = event["detail"]["EventType"];
const src = event["source"];
const time = event["time"];
const gfId = event["detail"]["GeofenceId"];
const resources = event["resources"][0];
const splitResources = resources.split(".");
const geofenceCollection = splitResources[splitResources.length - 1];
const coordinates = event["detail"]["Position"];
const deviceId = event["detail"]["DeviceId"];
console.log("deviceId===>>>", deviceId);
const msg = {
"trackerEventType" : trackerEvent,
"source" : src,
"eventTime" : time,
"geofenceId" : gfId,
"coordinates": coordinates,
"geofenceCollection": geofenceCollection
};
const params = {
topic: `${deviceId}/tracker`,
payload: JSON.stringify(msg),
qos: 0
};
iotdata.publish(params, function(err, data) {
if (err) {
console.log("error===>>>", err, err.stack); // an error occurred
} else {
console.log("Ladmbda triggered===>>>", trackerEvent); // successful response
}
});
}
});
}
```
1. [デプロイ] を選択して、関数を更新します。
1. 設定タブを選択します。
1. [トリガー] セクションで、[トリガーを追加] を選択します。
1. [ソース] フィールドで [EventBridge (CloudWatch Events)] を選択します。
1. [既存のルール] ラジオオプションを選択します。
1. 「AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME」のようなルール名を入力します。
1. [追加] ボタンをクリックします。
1. これにより、アクセス許可タブに「リソースベースのポリシーステートメント」もアタッチされます。
MQTT テストクライアント
1. [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/) を開きます。
1. 左側のナビゲーションペインで、[MQTT テストクライアント] を選択します。
1. **[MQTT テストクライアント]** というセクションが表示され、そこで MQTT 接続を設定できます。
1. 必要な設定を行った後、**[接続]** ボタンをクリックして、指定したパラメータを使用して MQTT ブローカーへの接続を確立します。
1. エンドポイントの値をメモしておきます。
接続すると、MQTT テストクライアントインターフェイスに用意されている各入力フィールドを使用して、MQTT トピックにサブスクライブしたり、トピックにメッセージをパブリッシュしたりできます。次に、MQTT ポリシーをアタッチします。
1. 左側のメニューの **[管理]** で、**[セキュリティ]** オプションを展開し、**[ポリシー]** をクリックします。
1. **[ポリシーを作成]** ボタンをクリックします。
1. ポリシー名を入力します。
1. **[ポリシードキュメント]** で **[JSON]** タブを選択します。
1. 以下に示すポリシーをコピーして貼り付けます。ただし、すべての要素を実際の `REGION` と `ACCOUNT_ID` で更新してください。
```
{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"iot:Connect",
"iot:Publish",
"iot:Subscribe",
"iot:Receive"
],
"Resource": [
"arn:aws:iot:REGION:ACCOUNT_ID:client/${cognito-identity.amazonaws.com:sub}",
"arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}",
"arn:aws:iot:REGION:ACCOUNT_ID:topicfilter/${cognito-identity.amazonaws.com:sub}/",
"arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}/tracker"
],
"Effect": "Allow"
}
]
}
```
1. **[作成]** ボタンを選択して終了します。
## サンプルアプリケーションコードを設定する
サンプルコードを設定するには、以下のツールがインストールされている必要があります。
+ Git
+ XCode 15.3 以後
+ iOS Simulator 16 以降
以下の手順を使用して、サンプルアプリケーションコードを設定します。
1. この URL ([https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications](https://github.com/aws-geospatial/amazon-location-samples-ios/tree/main/tracking-with-geofence-notifications)) から git リポジトリを複製します。
1. `AWSLocationSampleApp.xcodeproj` プロジェクトファイルを開きます。
1. パッケージの解決プロセスを待ちます。
1. **オプション**: プロジェクトナビゲーションメニューで、`ConfigTemplate.xcconfig` を `Config.xcconfig` に変更し、以下の値を入力します。
```
IDENTITY_POOL_ID = `YOUR_IDENTITY_POOL_ID`
MAP_NAME = `YOUR_MAP_NAME`
TRACKER_NAME = `YOUR_TRACKER_NAME`
WEBSOCKET_URL = `YOUR_MQTT_TEST_CLIENT_ENDPOINT`
GEOFENCE_ARN = `YOUR_GEOFENCE_COLLECTION_NAME`
```
## サンプルアプリケーションを使用する
サンプルコードの設定が完了したら、iOS シミュレーターまたは実機でアプリケーションを実行できるようになります。
1. アプリケーションをビルドして実行します。
1. アプリケーションから位置情報と通知に対するアクセス許可を求められます。それらのアクセス許可を付与する必要があります。
1. [Cognito Configuration] ボタンをタップします。
1. [Config.xcconfig] ファイルに値を入力していない場合は、設定画面で以前に作成したリソース値をフィールドに入力する必要があります。
```
IDENTITY_POOL_ID = `YOUR_IDENTITY_POOL_ID`
MAP_NAME = `YOUR_MAP_NAME`
TRACKER_NAME = `YOUR_TRACKER_NAME`
WEBSOCKET_URL = `YOUR_MQTT_TEST_CLIENT_ENDPOINT`
GEOFENCE_ARN = `YOUR_GEOFENCE_COLLECTION_NAME`
```
1. 設定を保存します。
1. [フィルタ] のオプションとして時間、距離、精度が表示されるようになりました。必要に応じてそれらのオプションを使用してください。
1. アプリケーションの [追跡] タブに移動すると、マップと [追跡を開始する] ボタンが表示されます。
1. このアプリケーションをシミュレーターにインストールしている場合は、位置の変更をシミュレートできます。これは [機能] の [ロケーション] メニューオプションで実行できます。例えば、[機能] を選択し、続いて [ロケーション]、[高速道路走行] の順に選択します。
1. [追跡を開始する] ボタンをタップします。マップに追跡ポイントが表示されます。
1. アプリケーションはバックグラウンドでも位置を追跡します。そのため、アプリケーションをバックグラウンドに移行すると、バックグラウンドモードで追跡を続けるためのアクセス許可を求められます。
1. [追跡を停止する] ボタンをタップすると、追跡を停止できます。
# Android アプリケーションの作成
Amazon Location Service を使用して iOS アプリケーションを構築するには、次の手順に従います。
[GitHub](https://github.com/aws-geospatial/amazon-location-samples-android/tree/main/tracking-with-geofence-notifications) からプロジェクトファイルをクローンします。
## アプリケーション用の Amazon Location リソースを作成する
AWS アカウントの準備ができたら、Amazon Location Service リソースを生成できます。これらのリソースは、提供されたコードスニペットの実行に不可欠です。
**注記**
AWS アカウントをまだ作成していない場合は、[AWS アカウントを作成](https://portal.aws.amazon.com/billing/signup#/start/email)してください。
まず、Amazon Cognito アイデンティティプール ID を作成する必要があります。以下の手順に従ってください。
1. AWS コンソールで、Amazon Cognito サービスに移動し、左側のメニューから **ID プール**を選択し、**ID プールの作成**を選択します。
1. **[ゲストアクセス]** がオンになっていることを確認し、**[次へ]** を押して続行します。
1. 次に、新しい IAM ロールを作成するか、既存の IAM ロールを使用します。
1. アイデンティティプール名を入力し、次の手順で作成するマップとトラッカーの Amazon Location `(geo)` リソースにアイデンティティプールがアクセスできることを確認します。
1.
次に、 AWS Amazon Location コンソールでマップを作成してスタイル設定する必要があります。次の手順を使用します。
1. Amazon Location コンソールの [[マップ]](https://console.aws.amazon.com/location/maps/home) セクションに移動し、**[マップを作成]** を選択して使用可能なマップスタイルをプレビューします。
1. 新しいマップリソースに**名前**と**説明**を付けます。後からチュートリアルで使用するため、マップリソースに割り当てた名前を記録しておいてください。
1. マップスタイルを選択する際は、マップデータプロバイダーを考慮してください。詳細については、[AWS サービス利用規約](https://aws.amazon.com/service-terms)の第 82 項を参照してください。
1. [Amazon Location の利用規約](https://aws.amazon.com/service-terms/#:~:text=82.%20Amazon%20Location%20Service)に同意し、**[マップを作成]** を選択します。マップを作成したら、任意の方向にズームイン、ズームアウト、またはパンしてマップを操作できます。
Amazon Location コンソールを使用してトラッカーを作成するには
1. [Amazon Location Service コンソール](https://console.aws.amazon.com/location/)を開きます。
1. 左のナビゲーションペインから、[**トラッカー**] を選択します。
1. **トラッカーを作成**を選択します。
1. すべての必須フィールドに入力します。
1. [**位置フィルター**] で、トラッカーリソースの使用目的に最も適したオプションを選択します。位置のフィルタリングを設定しない場合、デフォルト設定は TimeBased となります。詳細については、このガイドの「トラッカー」と「Amazon Location Service トラッカー API リファレンス」の「PositionFiltering」を参照してください。
1. **[トラッカーを作成]** を選択して終了します。
## ジオフェンスコレクションを作成する
ジオフェンスコレクションを作成する際は、コンソール、API、または CLI のいずれかを使用できます。以下の手順で、各オプションについて説明します。
Amazon Location コンソールを使用してジオフェンスコレクションを作成する:
1. Amazon Location Service コンソール (https://console.aws.amazon.com/location/) を開きます。
1. 左のナビゲーションペインから、[ジオフェンスコレクション] を選択します。
1. [ジオフェンスコレクションの作成] を選択します。
1. コレクションの名前と説明を入力します。
1. [CloudWatch をターゲットとするEventBridge ルール] で、オプションのEventBridge ルールを作成して、ジオフェンスイベントへの対応を開始できます。これにより、Amazon Location は Amazon CloudWatch Logs にイベントをパブリッシュできるようになります。
1. [ジオフェンスコレクションの作成] を選択します。
Amazon Location API を使用してジオフェンスコレクションを作成する:
Amazon Location Geofences API の CreateGeofenceCollection オペレーションを使用してください。以下の例では、API リクエストを使用して `GOECOLLECTION_NAME` というジオフェンスコレクションを作成します。
```
POST /geofencing/v0/collections
Content-type: application/json
{
"CollectionName": "GOECOLLECTION_NAME",
"Description": "Geofence collection 1 for shopping center",
"Tags": {
"Tag1" : "Value1"
}
}
```
AWS CLI コマンドを使用してジオフェンスコレクションを作成します。
create-geofence-collection コマンドを使用します。以下の例では、 AWS CLI を使用して `GOECOLLECTION_NAME` というジオフェンスコレクションを作成します。
```
aws location \ create-geofence-collection \
--collection-name "GOECOLLECTION_NAME" \
--description "Shopping center geofence collection" \
--tags Tag1=Value1
```
## トラッカーをジオフェンスコレクションにリンクする
トラッカーをジオフェンスコレクションにリンクするには、コンソール、API、または CLI のいずれかを使用できます。以下の手順で、各オプションについて説明します。
Amazon Location Service コンソールを使用してトラッカーリソースをジオフェンスコレクションにリンクする:
1. Amazon Location コンソールを開きます。
1. 左のナビゲーションペインから、**[トラッカー]** を選択します。
1. **[デバイストラッカー]** で、対象トラッカーの名前リンクを選択します。
1. [**リンクされたジオフェンスコレクション**] で [**ジオフェンスコレクションをリンク**] を選択します。
1. [**リンクされたジオフェンスコレクション**] ウィンドウのドロップダウンメニューからジオフェンスコレクションを選択します。
1. [**Link (リンク)**] を選択します。
1. トラッカーリソースをリンクすると、そのリソースには[アクティブ] ステータスが割り当てられます。
Amazon Location API を使用してトラッカーリソースをジオフェンスコレクションにリンクする:
Amazon Location Trackers API の ``AsssociateTrackerConsumer オペレーションを使用してください。以下は、Amazon リソースネーム (ARN) を使用して ExampleTracker をジオフェンスコレクションにリンクする API リクエストの例です。
```
POST /tracking/v0/trackers/ExampleTracker/consumers
Content-type: application/json
{
"ConsumerArn": "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME"
}
```
AWS CLI コマンドを使用してトラッカーリソースをジオフェンスコレクションにリンクする:
`associate-tracker-consumer ` コマンドを使用します。次の例では、 を使用して AWS CLI というジオフェンスコレクションを作成します`GOECOLLECTION_NAME`。
```
aws location \
associate-tracker-consumer \
--consumer-arn "arn:aws:geo:us-west-2:123456789012:geofence-collection/GOECOLLECTION_NAME" \
--tracker-name "ExampleTracker"
```
## MQTT で AWS Lambda を使用する
Lambda 関数を作成します。
AWS IoT Core と Amazon Location Service 間の接続を作成するには、EventBridge CloudWatch イベントによって転送されたメッセージを処理するための AWS Lambda 関数が必要です。 CloudWatch この関数は、位置データを抽出し、Amazon Location Service 用にフォーマットし、Amazon Location Tracker API を通じて送信します。この関数は、 AWS Lambda コンソールから作成することも、 AWS Command Line Interface (AWS CLI) または AWS Lambda APIsを使用することもできます。コンソールを使用して Amazon Location に位置更新を公開する Lambda 関数を作成するには:
1. https://console.aws.amazon.com/lambda/ で AWS Lambda コンソールを開きます。
1. ナビゲーションペインで、[関数] を選択します。
1. 関数を作成を選択し、最初から作成するが選択されていることを確認します。
1. 次のボックスに入力します。
+ 関数名
+ **[ランタイム]** オプションで [Node.js 16.x] を選択します。
1. [関数の作成] を選択してください。
1. [コード] タブを選択してエディタを開きます。
1. index.js のプレースホルダーコードを次のように上書きします。
```
const AWS = require('aws-sdk')
const iot = new AWS.Iot();
exports.handler = function(event) {
console.log("event===>>>", JSON.stringify(event));
var param = {
endpointType: "iot:Data-ATS"
};
iot.describeEndpoint(param, function(err, data) {
if (err) {
console.log("error===>>>", err, err.stack); // an error occurred
} else {
var endp = data['endpointAddress'];
const iotdata = new AWS.IotData({endpoint: endp});
const trackerEvent = event["detail"]["EventType"];
const src = event["source"];
const time = event["time"];
const gfId = event["detail"]["GeofenceId"];
const resources = event["resources"][0];
const splitResources = resources.split(".");
const geofenceCollection = splitResources[splitResources.length - 1];
const coordinates = event["detail"]["Position"];
const deviceId = event["detail"]["DeviceId"];
console.log("deviceId===>>>", deviceId);
const msg = {
"trackerEventType" : trackerEvent,
"source" : src,
"eventTime" : time,
"geofenceId" : gfId,
"coordinates": coordinates,
"geofenceCollection": geofenceCollection
};
const params = {
topic: `${deviceId}/tracker`,
payload: JSON.stringify(msg),
qos: 0
};
iotdata.publish(params, function(err, data) {
if (err) {
console.log("error===>>>", err, err.stack); // an error occurred
} else {
console.log("Ladmbda triggered===>>>", trackerEvent); // successful response
}
});
}
});
}
```
1. [デプロイ] を選択して、関数を更新します。
1. 設定タブを選択します。
1. [トリガー] セクションで、[トリガーを追加] を選択します。
1. [ソース] フィールドで [EventBridge (CloudWatch Events)] を選択します。
1. [既存のルール] ラジオオプションを選択します。
1. 「AmazonLocationMonitor-GEOFENCECOLLECTION\$1NAME」のようなルール名を入力します。
1. [追加] ボタンをクリックします。
1. これにより、アクセス許可タブに「リソースベースのポリシーステートメント」もアタッチされます。
MQTT テストクライアント
1. [https://console.aws.amazon.com/iot/](https://console.aws.amazon.com/iot/) を開きます。
1. 左側のナビゲーションペインで、[MQTT テストクライアント] を選択します。
1. **[MQTT テストクライアント]** というセクションが表示され、そこで MQTT 接続を設定できます。
1. 必要な設定を行った後、**[接続]** ボタンをクリックして、指定したパラメータを使用して MQTT ブローカーへの接続を確立します。
1. エンドポイント値を書き留めます。
接続すると、MQTT テストクライアントインターフェイスに用意されている各入力フィールドを使用して、MQTT トピックにサブスクライブしたり、トピックにメッセージをパブリッシュしたりできます。次に、MQTT ポリシーをアタッチします。
1. 左側のメニューの **[管理]** で、**[セキュリティ]** オプションを展開し、**[ポリシー]** をクリックします。
1. **[ポリシーを作成]** ボタンをクリックします。
1. ポリシー名を入力します。
1. **[ポリシードキュメント]** で **[JSON]** タブを選択します。
1. 以下に示すポリシーをコピーして貼り付けます。ただし、すべての要素を実際の `REGION` と `ACCOUNT_ID` で更新してください。
```
{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"iot:Connect",
"iot:Publish",
"iot:Subscribe",
"iot:Receive"
],
"Resource": [
"arn:aws:iot:REGION:ACCOUNT_ID:client/${cognito-identity.amazonaws.com:sub}",
"arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}",
"arn:aws:iot:REGION:ACCOUNT_ID:topicfilter/${cognito-identity.amazonaws.com:sub}/",
"arn:aws:iot:REGION:ACCOUNT_ID:topic/${cognito-identity.amazonaws.com:sub}/tracker"
],
"Effect": "Allow"
}
]
}
```
**注記**
次の手順で使用するポリシー名とトピック名を記録します。
1. **[作成]** ボタンを選択して終了します。
前の手順が完了したら、以下のようにゲストロールのアクセス許可を更新します。
1. Amazon Cognito に移動し、アイデンティティプールを開きます。次に、[ユーザーアクセス] に進み、[ゲストロール] を選択します。
1. [アクセス許可ポリシー] をクリックして、[編集] を有効にします。
```
{
'Version': '2012-10-17 ',
'Statement': [
{
'Action': [
'geo:GetMap*',
'geo:BatchUpdateDevicePosition',
'geo:BatchEvaluateGeofences',
'iot:Subscribe',
'iot:Publish',
'iot:Connect',
'iot:Receive',
'iot:AttachPrincipalPolicy',
'iot:AttachPolicy',
'iot:DetachPrincipalPolicy',
'iot:DetachPolicy'
],
'Resource': [
'arn:aws:geo:us-east-1:{USER_ID}:map/{MAP_NAME}',
'arn:aws:geo:us-east-1:{USER_ID}:tracker/{TRACKER_NAME}',
'arn:aws:geo:us-east-1:{USER_ID}:geofence-collection/{GEOFENCE_COLLECTION_NAME}',
'arn:aws:iot:us-east-1:{USER_ID}:client/${cognito-identity.amazonaws.com:sub}',
'arn:aws:iot:us-east-1:{USER_ID}:topic/${cognito-identity.amazonaws.com:sub}',
'arn:aws:iot:us-east-1:{USER_ID}:topicfilter/${cognito-identity.amazonaws.com:sub}/*',
'arn:aws:iot:us-east-1:{USER_ID}:topic/${cognito-identity.amazonaws.com:sub}/tracker'
],
'Effect': 'Allow'
},
{
'Condition': {
'StringEquals': {
'cognito-identity.amazonaws.com:sub': '${cognito-identity.amazonaws.com:sub}'
}
},
'Action': [
'iot:AttachPolicy',
'iot:DetachPolicy',
'iot:AttachPrincipalPolicy',
'iot:DetachPrincipalPolicy'
],
'Resource': [
'*'
],
'Effect': 'Allow'
}
]
}
```
1. 上記のポリシーの変更により、必要なすべての AWS リソースがアプリケーションに対して適切に設定されるようになりました。
## サンプルアプリケーションコードを設定する
1. Android Studio を開き、**[New]**、**[Project from Version Control]** の順に選択します。
1. Android Studio の左上隅にある **[File]** メニューに移動します。
1. ドロップダウンメニューで [New] を選択します。
1. [Project from Version Control] を選択します。
1. リポジトリ URL を入力します。表示されるダイアログボックスで、「URL」とマークされたフィールドを見つけます。
1. サンプルアプリケーションの次の URL をコピーして、次のフィールドに貼り付けます。[https://github.com/aws-geospatial/amazon-location-samples-android.git](https://github.com/aws-geospatial/amazon-location-samples-android.git)
1. リポジトリをクローンするディレクトリを決定します。デフォルトのディレクトリを使用するか、カスタムの場所を選択します。
1. リポジトリ URL とディレクトリの設定が完了したら、[Clone] ボタンをクリックします。Android Studio により、指定された場所にリポジトリのクローンが作成されます。
1. アプリケーションがマシンにクローンされ、使用を開始できます。
## サンプルアプリケーションを使用する
サンプルを使用するには、以下の手順に従います。
+ **`custom.properties` を作成する**:
`custom.properties` ファイルを設定するには、以下の手順に従います。
1. 任意のテキストエディタまたは IDE を開きます。
1. 新しいファイルを作成します。
1. 次に、`custom.properties` という名前でファイルを保存します。
1. `custom.properties` を以下のコードサンプルで更新し、`MQTT_END_POINT`、`POLICY_NAME`、`GEOFENCE_COLLECTION_NAME`、`TOPIC_TRACKER` を実際の値に置き換えます。
```
MQTT_END_POINT=xxxxxxxxxxxxx-xxx.xxx.us-east-1.amazonaws.com
POLICY_NAME=xxxxxxxxx
GEOFENCE_COLLECTION_NAME=xxxxxxxxxxxxxxxxx
TOPIC_TRACKER=xxxxxxxxxx
```
1. プロジェクトをクリーンアップして再構築します。その後、プロジェクトを実行できます。
+ **サインイン**:
アプリケーションにサインインするには、以下の手順に従います。
1. **[サインイン]** ボタンを押します。
1. **アイデンティティプール ID**、**トラッカー名**、**マップ名**を指定します。
1. **[サインイン]** をもう一度押して終了します。
+ **フィルタを管理する**:
設定画面を開き、次の操作を実行します。
1. スイッチ UI を使用してフィルターのオン/オフを切り替えます。
1. 必要に応じて、時間と距離のフィルタを更新します。
+ **追跡オペレーション:**
追跡画面を開き、以下の操作を実行します。
+ フォアグラウンド、バックグラウンド、バッテリーセーバーの各モードでの追跡は、それぞれ対応するボタンを押すと、開始および停止できます。