試す主な機能料金開始方法サポートされている国サポートしている AWS リージョン API リファレンス

アドレスフォーム SDK

Address Form SDK は、スマートアドレスエントリフォームの構築を合理化します。SDK で構築されたアドレスフォームは、ユーザーが入力を開始するときに、関連するアドレスの提案を提供します。ユーザーが提案を選択すると、住所フォームには都市、州、郵便番号などのフィールドが自動的に入力されます。これにより、手動入力が最小限に抑えられ、エラーが軽減され、データ入力が高速化されます。ユーザーは、選択したアドレスをマップでプレビューし、その場所ピンを調整して特定の入口または集荷場所を示すこともできます。これにより、精度が大幅に向上します。

試す

デモ

完全に機能するアドレスフォームのデモをお試しください。

自分で構築する

Address Form SDK を使用してアドレスフォームの実装を開始する開始方法には、にジャンプします。または、この SDK を搭載し、https://console.aws.amazon.com/location/ の Amazon Location Service コンソールからアクセスできる Location Service の WYSIWYG Address Form Builder ウィザードを使用してノーコードアプローチを試してください。このインタラクティブウィザードでは、予測提案、自動フィールドポピュレーション、柔軟なレイアウトを使用してカスタマイズされたフォームを作成できます。開発者は、コードを記述せずに簡単に統合できるように、React JavaScript、React TypeScript、またはスタンドアロンの HTML/JavaScript でready-to-useパッケージをダウンロードできます。

主な機能

Address Form SDK の主な機能は次のとおりです。

アドレスと POIs、データ入力を高速化します。
より正確な結果を得るために、設定可能なプレースタイプ検索 (郵便番号、ロケールなど) を有効にします。
ユーザーを現在のエリアにすばやく集中させる自動ブラウザ位置検出を提供します。
組み込みのマップビジュアライゼーションを表示して、わかりやすくコンテキストを改善します。
システムが提供する場所を失うことなく、マップ上でアドレスの場所を調整できるため、正確性と制御性の両方が確保されます。
コーディングを必要とせず、時間と労力を節約する WYSIWYG ビルダーツールが含まれています。
typeahead APIs のデバウンスとキャッシュを実装して、パフォーマンスを最適化し、コストを削減します。
アプリケーションのブランドとユーザーエクスペリエンスに合わせてスタイルをカスタマイズできます。

次の Amazon Location Service API オペレーションを使用して、フォームに対応するアドレス情報を提供します。

GetTile: インタラクティブマップをレンダリングするためのマップタイルを取得して、アドレスの位置を視覚化し、アドレスの位置を調整します。
Autocomplete: ユーザータイプとして住所の提案をリアルタイムで提供します。
Suggest: ユーザータイプとして住所と POI の提案をリアルタイムで提供します。
ReverseGeocode: ユーザーの現在の場所に基づいて住所を自動入力することを選択した場合、ユーザーの現在の場所を最も近い既知の住所に変換します。
GetPlace: Autocomplete API または Suggest API の結果からアドレスを選択した後、選択したアドレスの詳細な場所情報を取得します。

料金

SDK は Apache-2.0 ライセンスの下で無料でオープンソースです。API の使用に対してのみ料金が発生します。Amazon Location Service の料金ページを参照してください。

開始方法

Address Form SDK は、React アプリ内またはスタンドアロンの HTML および JavaScript ページで使用できます。以下の手順に従って開始します。

前提条件

注記

Address Form SDK を使用するには、必要なアクセス許可を持つ API キーが必要です。Amazon Location Service コンソールの Address Form SDK Builder ウィザードを使用して、以下のアクセス許可を持つ API キーを作成するか、以下の手順に従って手動で作成します。

Address Form SDK を使用するには、API キーポリシーで次のアクションを許可する必要があります。

geo-maps:GetTile - これはマップコンポーネントを表示するときに必要です。GetTile API リファレンスを参照してください。
geo-places:Autocomplete - これは、先行入力機能に Autocompleteオペレーションを使用する場合に必要です。Autocomplete API リファレンスを参照してください。
geo-places:Suggest - これは、先行入力機能に Suggestオペレーションを使用する場合に必要です。API リファレンスの提案を参照してください。
geo-places:ReverseGeocode - これは、ユーザーがブラウザの位置情報 API を使用して現在の場所を指定できるようにする場合に必要です。ReverseGeocode API リファレンスを参照してください。
geo-places:GetPlace - これは先行入力機能を使用する場合に必要です。GetPlace API リファレンスを参照してください。

API キーを使用して認証ガイドに従って、必要なアクセス許可を持つ Amazon Location Service API キーを作成します。

必要なアクセス許可を持つ CreateKey API のキーポリシーの例:



{
  "KeyName": "ExampleKey",
  "ExpireTime": "YYYY-MM-DDThh:mm:ss.sss",
  "Restrictions": {
    "AllowActions": [
      "geo-maps:GetTile",
      "geo-places:Autocomplete",
      "geo-places:Suggest",
      "geo-places:GetPlace",
      "geo-places:ReverseGeocode"
    ],
    "AllowResources": [
      "arn:aws:geo-maps:<Region>::provider/default",
      "arn:aws:geo-places:<Region>::provider/default"
    ]
  }
}

インストール

HTML/JavaScript

SDK の次の CSS と JavaScript を HTML コードに含める



...
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
/>
...
</head>
...
<body>
...
<script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"></script>
</body>
...

React

npm から SDK をインストールします。 npm install @aws/address-form-sdk-js

SDK を使用する

React アプリに次のコードを追加します。API キーAMAZON_LOCATION_API_KEYでを更新し、API キーが作成されたリージョンAMAZON_LOCATION_REGIONでを更新します。フォームが送信されると、onSubmitコールバックはgetData非同期関数を提供します。この関数を intendedUse値で呼び出して、フォームデータを取得します。



onSubmit: async (getData) => {
  const data = await getData({
    intendedUse: "SingleUse", // or "Storage"
  });
};

注記

結果を保存またはキャッシュ"Storage"する必要がある場合は、を使用します。これにより、Amazon Location Service の意図された使用要件への準拠が保証されます。

HTML/JavaScript



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Address Form</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.css"
    />
  </head>
  <body>
    <form
      id="amazon-location-address-form"
      class="address-form flex-row flex-1"
    >
      <div class="flex-column">
        <input
          data-type="address-form"
          name="addressLineOne"
          data-api-name="suggest"
          data-show-current-location="true"
        />
        <input data-type="address-form" name="addressLineTwo" />
        <input data-type="address-form" name="city" />
        <input data-type="address-form" name="province" />
        <input data-type="address-form" name="postalCode" />
        <input data-type="address-form" name="country" />
        <div class="flex-row">
          <button data-type="address-form" type="submit">Submit</button>
          <button data-type="address-form" type="reset">Reset</button>
        </div>
      </div>
      <div data-type="address-form" data-map-style="Standard,Light"></div>
    </form>
    <></script>
script src="https://cdn.jsdelivr.net/npm/@aws/address-form-sdk-js/dist/standalone/address-form-sdk.umd.js"
    <script>
      AddressFormSDK.render({
        root: "#amazon-location-address-form",
        apiKey: "AMAZON_LOCATION_API_KEY",
        region: "AMAZON_LOCATION_REGION",
        showCurrentCountryResultsOnly: true,
        onSubmit: async (getData) => {
          // Get form data with intendedUse parameter
          // Use "SingleUse" for one-time display only
          // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
          const data = await getData({ intendedUse: "SingleUse" });
          console.log(data);
        },
      });
    </script>
  </body>
</html>

React



import React from 'react';
import { AddressForm, Flex } from "@aws/address-form-sdk-js";

export default function App() {
  return (
    <AddressForm
      apiKey="AMAZON_LOCATION_API_KEY"
      region="AMAZON_LOCATION_REGION"
      onSubmit={async (getData) => {
        // Get form data with intendedUse parameter
        // Use "SingleUse" for one-time display only
        // Use "Storage" if you plan to store/cache the results - makes an extra API call to grant storage rights
        const data = await getData({ intendedUse: "SingleUse" });
        console.log(data);
      }}
    >
      <Flex
        direction="row"
        flex
      >
        <Flex direction="column">
          <input
            data-api-name="autocomplete"
            data-type="address-form"
            name="addressLineOne"
            placeholder="Enter address"
          />
          <input
            data-type="address-form"
            name="addressLineTwo"
          />
          <input
            data-type="address-form"
            name="city"
            placeholder="City"
          />
          <input
            data-type="address-form"
            name="province"
            placeholder="State/Province"
          />
          <input
            data-type="address-form"
            name="postalCode"
          />
          <input
            data-type="address-form"
            name="country"
            placeholder="Country"
          />
          <Flex direction="row">
            <button address-form="submit">
              Submit
            </button>
            <button address-form="reset">
              Reset
            </button>
          </Flex>
        </Flex>
        <AddressFormMap
          mapStyle={[
            'Standard',
            'Light'
          ]}
         />
      </Flex>
    </AddressForm>
  );
}

サポートされている国

Address Form SDK は、Amazon Location Service を使用したアドレスの自動入力をグローバルにサポートしています。以下の国では、アドレスフィールド解析が完全にサポートされており、各アドレスコンポーネントがそれぞれのフィールドに入力されます。

オーストラリア (AU)
カナダ (CA)
フランス (FR)
香港 (HK)
アイルランド (IE)
ニュージーランド (NZ)
フィリピン (PH)
シンガポール (SG)
英国 (GB)
[米国 (US)]

他のすべての国はプレビューステータスです。プレビュー国では、国固有の形式を指定せずに、完全な住所が addressLineOne フィールドに表示されます。今後のリリースでは、この動作が改善され、最新バージョンの SDK を使用してこれらの改善にアクセスできます。

サポートしている AWS リージョン

Address Form SDK および Address Form Builder ウィザードは、APIs Currentのバージョンを使用して、Amazon Location Service が動作するすべての AWS リージョンで使用できます。Amazon Location でサポートされているリージョンの完全なリストを表示します。

API リファレンス

README API リファレンスを参照してください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

言語別のマップレンダリング SDK

AI と LLMs