翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# アドレスフォーム SDK
<a name="address-form-sdk"></a>

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

![オートコンプリート機能を示す Address Form SDK のデモンストレーション](http://docs.aws.amazon.com/ja_jp/location/latest/developerguide/images/address-form-demo.gif)


## 試す
<a name="address-form-try-it"></a>

### デモ
<a name="address-form-demo"></a>

完全に機能する[アドレスフォームのデモ](https://aws-geospatial.github.io/address-form-sdk-js/)をお試しください。

### 自分で構築する
<a name="address-form-builder"></a>

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

## 主な機能
<a name="address-form-features"></a>

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

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

**[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)**  
インタラクティブマップをレンダリングするためのマップタイルを取得して、アドレスの位置を視覚化し、アドレスの位置を調整します。

**[Autocomplete](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html)**  
ユーザータイプとして住所の提案をリアルタイムで提供します。

**[Suggest](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html)**  
ユーザータイプとして住所と POI の提案をリアルタイムで提供します。

**[ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html)**  
ユーザーの現在の場所に基づいて住所を自動入力することを選択した場合、ユーザーの現在の場所を最も近い既知の住所に変換します。

**[GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)**  
Autocomplete API または Suggest API の結果からアドレスを選択した後、選択したアドレスの詳細な場所情報を取得します。

## 料金
<a name="address-form-pricing"></a>

SDK は Apache-2.0 ライセンスの下で無料で[オープンソースです](https://github.com/aws-geospatial/address-form-sdk-js)。API の使用に対してのみ料金が発生します。[Amazon Location Service の料金ページ](https://aws.amazon.com/location/pricing/)を参照してください。

## 開始方法
<a name="address-form-getting-started"></a>

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

### 前提条件
<a name="address-form-prerequisites"></a>

**注記**  
Address Form SDK を使用するには、必要なアクセス許可を持つ API キーが必要です。Amazon Location Service コンソールの [Address Form SDK Builder ウィザード](https://console.aws.amazon.com/location/solution-builder/home#/address-form)を使用して、以下のアクセス許可を持つ API キーを作成するか、以下の手順に従って手動で作成します。

Address Form SDK を使用するには、API キーポリシーで次のアクションを許可する必要があります。
+ `geo-maps:GetTile` - これはマップコンポーネントを表示するときに必要です。[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html) API リファレンスを参照してください。
+ `geo-places:Autocomplete` - これは、先行入力機能に `Autocomplete`オペレーションを使用する場合に必要です。[Autocomplete](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html) API リファレンスを参照してください。
+ `geo-places:Suggest` - これは、先行入力機能に `Suggest`オペレーションを使用する場合に必要です。API リファレンスの[提案](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html)を参照してください。
+ `geo-places:ReverseGeocode` - これは、ユーザーがブラウザの位置情報 API を使用して現在の場所を指定できるようにする場合に必要です。[ReverseGeocode](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html) API リファレンスを参照してください。
+ `geo-places:GetPlace` - これは先行入力機能を使用する場合に必要です。[GetPlace](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html) API リファレンスを参照してください。

[API キーを使用して認証](https://docs.aws.amazon.com/location/latest/developerguide/using-apikeys.html)ガイドに従って、必要なアクセス許可を持つ Amazon Location Service API キーを作成します。

必要なアクセス許可を持つ [CreateKey](https://docs.aws.amazon.com/location/latest/APIReference/API_geotags_CreateKey.html) API のキーポリシーの例:

#### Address Form アクセス許可の CreateKey リクエスト
<a name="createkey-example"></a>

```
{
  "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"
    ]
  }
}
```

### インストール
<a name="address-form-installation"></a>

#### HTML/JavaScript
<a name="address-form-html-js-install"></a>

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
<a name="address-form-react-install"></a>

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

### SDK を使用する
<a name="address-form-use-sdk"></a>

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 の[意図された使用要件](https://docs.aws.amazon.com/location/latest/developerguide/places-intended-use.html)への準拠が保証されます。

------
#### [ 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>
  );
}
```

------

## サポートされている国
<a name="address-form-supported-countries"></a>

Address Form SDK は、Amazon Location Service を使用したアドレスの自動入力をグローバルにサポートしています。以下の国では、アドレスフィールド解析が完全にサポートされており、各アドレスコンポーネントがそれぞれのフィールドに入力されます。
+ オーストラリア (AU)
+ カナダ (CA)
+ フランス (FR)
+ 香港 (HK)
+ アイルランド (IE)
+ ニュージーランド (NZ)
+ フィリピン (PH)
+ シンガポール (SG)
+ 英国 (GB)
+ [米国 (US)]

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

## サポートしている AWS リージョン
<a name="address-form-supported-aws-regions"></a>

Address Form SDK および Address Form Builder ウィザードは、APIs `Current`のバージョンを使用して、Amazon Location Service が動作するすべての AWS リージョンで使用できます。[Amazon Location](https://docs.aws.amazon.com/location/latest/developerguide/location-regions.html) でサポートされているリージョンの完全なリストを表示します。

## API リファレンス
<a name="address-form-api-reference"></a>

[README API リファレンス](https://github.com/aws-geospatial/address-form-sdk-js#api-reference)を参照してください。