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

# フレームワークの作成者向けの画像の最適化の統合
<a name="integrate-image-optimization-framework"></a>

フレームワークの作成者は、Amplify ホスティングのデプロイ仕様を使用して、Amplify の画像の最適化機能を統合できます。画像の最適化を有効にするには、画像の最適化サービスをターゲットとするルーティングルールがデプロイマニフェストに含まれている必要があります。次の例は、ルーティングルールを設定する方法を示しています。

```
// .amplify-hosting/deploy-manifest.json
 
{
  "routes": [
    {
      "path": "/images/*",
      "target": {
        "kind": "ImageOptimization",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    }
  ]
}
```

デプロイ仕様を使用した画像の最適化設定の構成の詳細については、「[Amplify ホスティングのデプロイ仕様を使用したビルド出力の設定](ssr-deployment-specification.md)」を参照してください。

## 画像の最適化 API について
<a name="understand-image-optimization-api"></a>

画像の最適化は、ルーティングルールによって定義されたパスで、Amplify アプリケーションのドメイン URL を介して実行時に呼び出すことができます。

```
GET https://{appDomainName}/{path}?{queryParams}
```

画像の最適化では、画像に対して次のルールが適用されます。
+ Amplify は、GIF、APNG、SVG 形式を最適化したり、別の形式に変換したりすることはできません。
+ `dangerouslyAllowSVG` 設定が有効になっていない限り、SVG 画像は提供されません。
+ ソース画像の幅または高さは、11 MB または 9,000 ピクセルを超えることはできません。
+ 最適化された画像のサイズ制限は 4 MB です。
+ リモート URL を使用して画像を取得するためにサポートされているプロトコルは、HTTPS のみです。

### HTTP ヘッダー
<a name="http-headers"></a>

**Accept** リクエスト HTTP ヘッダーは、クライアント (通常はウェブブラウザ) によって許可される、MIME タイプとして表現される画像形式を指定するために使用されます。画像の最適化サービスは、指定された形式への画像の変換を試みます。このヘッダーに指定された値は、形式クエリパラメータよりも優先されます。例えば、**Accept** ヘッダーの有効な値は `image/png, image/webp, */* ` です。Amplify のデプロイマニフェストで指定された形式設定により、形式がリスト内の形式に制限されます。**Accept** ヘッダーが特定の形式を要求しても、その形式が許可リストに含まれていない場合は無視されます。

### URI リクエストパラメータ
<a name="uri-request-parameters"></a>

次の表は、画像の最適化のための URI リクエストパラメータについて説明したものです。


| クエリパラメーター | タイプ | 必須 | 説明 | 例 | 
| --- | --- | --- | --- | --- | 
|  url  |  String  |  はい  |  ソース画像への相対パスまたは絶対 URL。リモート URL では、https プロトコルのみがサポートされています。値は URL エンコードされている必要があります。  |  `?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png`  | 
|  width  |  Number  |  はい  |  最適化された画像の幅 (ピクセル)。  |  `?width=800`  | 
|  height  |  Number  |  いいえ  |  最適化された画像の高さ (ピクセル)。指定しない場合、画像は幅に合わせて自動的に調整されます。  |  `?height=600`  | 
|  fit  |  列挙型の値: `cover`、`contain`、`fill`、`inside`、`outside`  |  いいえ  |  指定された幅と高さに合わせて画像のサイズを変更する方法。  |  `?width=800&height=600&fit=cover`  | 
|  position  |  列挙型の値: `center`、`top`、`right`、`bottom`、`left`  |  いいえ  |  fit が `cover` または `contain` である場合に使用される位置。  |  `?fit=contain&position=centre`  | 
|  trim  |  Number  |  いいえ  |  左上のピクセルの指定された背景色に類似した値を含むピクセルをすべてのエッジからトリミングします。  |  `?trim=50`  | 
|  拡張  |  オブジェクト  |  いいえ  |  最も近いエッジピクセルから派生した色を使用して、画像のエッジにピクセルを追加します。形式は `{top}_{right}_{bottom}_{left}` です。ここで、各値は追加するピクセル数です。  |  `?extend=10_0_5_0`  | 
|  extract  |  オブジェクト  |  いいえ  |  上、左、幅、高さで区切られた、指定された四角形に画像をトリミングします。形式は \$1left\$1\$1\$1top\$1\$1\$1width\$1\$1\$1right\$1 です。ここで、各値はトリミングするピクセル数です。  |  `?extract=10_0_5_0`  | 
|  format  |  String  |  いいえ  |  最適化された画像に必要な出力形式。  |  `?format=webp`  | 
|  quality  |  Number  |  いいえ  |  画質 (1～100)。画像の形式を変換する場合にのみ使用されます。  |  `?quality=50`  | 
|  rotate  |  Number  |  いいえ  |  指定した角度 (度) で画像を回転します。  |  `?rotate=45`  | 
|  flip  |  ブール値  |  いいえ  |  X 軸を挟んで垂直 (上下) に画像をミラーリングします。これは、回転する場合には常にその前に発生します。  |  `?flip`  | 
|  flop  |  ブール値  |  いいえ  |  Y 軸を挟んで水平 (左右) に画像をミラーリングします。これは、回転する場合には常にその前に発生します。  |  `?flop`  | 
|  sharpen  |  Number  |  いいえ  |  シャープニングにより、画像のエッジの鮮明さが向上します。有効な値は 0.000001～10 です。  |  `?sharpen=1`  | 
|  median  |  Number  |  いいえ  |  メディアンフィルターを適用します。これにより、ノイズが除去されたり、画像のエッジが滑らかになったりします。  |  `?sharpen=3`  | 
|  blur  |  Number  |  いいえ  |  指定されたシグマのガウシアンぼかしを適用します。有効な値は 0.3～1,000‬ です。  |  `?blur=20`  | 
|  gamma  |  Number  |  いいえ  |  ガンマ補正を適用して、サイズ変更された画像の知覚される明るさを改善します。値は 1.0～3.0 である必要があります。  |  `?gamma=1`  | 
|  negate  |  ブール値  |  いいえ  |  画像の色を反転します。  |  `?negate`  | 
|  normalize  |  ブール値  |  いいえ  |  ダイナミックレンジ全体をカバーするように輝度を広げることにより、画像のコントラストを上げます。  |  `?normalize`  | 
|  threshold  |  Number  |  いいえ  |  明度が指定されたしきい値よりも小さい場合、画像内のピクセルを黒のピクセルに置き換えます。または、しきい値より大きい場合は白いピクセルに置き換えます。有効な値は 0～255 です。  |  `?threshold=155`  | 
|  tint  |  String  |  いいえ  |  画像の輝度を維持しながら、指定された RGB を使用して画像に色合いを付けます。  |  `?tint=#7743CE`  | 
|  grayscale  |  ブール値  |  いいえ  |  画像をグレースケール (白黒) に変換します。  |  `?grayscale`  | 

### レスポンスステータスコード
<a name="response-status-codes"></a>

次のリストでは、画像の最適化の応答ステータスコードについて説明します。

**成功 - HTTP ステータスコード 200**  
リクエストは正常に完了しました。

**BadRequest - HTTP ステータスコード 400**  
+ 入力クエリパラメータの指定が間違っています。
+ リモート URL は `remotePatterns` の設定で許可されているものとしてリストされていません。
+ リモート URL は画像に解決されません。
+ リクエストされた幅または高さが、`sizes` の設定で許可されているものとしてリストされていません。
+ リクエストされた画像は SVG ですが、`dangerouslyAllowSvg` の設定が無効になっています。

**見つかりません - HTTP ステータスコード 404**  
ソース画像が見つかりませんでした。

**コンテンツが大きすぎます - HTTP ステータスコード 413**  
ソース画像または最適化された画像のいずれかが、最大許容サイズ (バイト) を超えています。

### 最適化された画像のキャッシュについて
<a name="image-optimization-caching"></a>

Amplify ホスティングは最適化された画像を CDN にキャッシュするため、同じクエリパラメータを使用した同じ画像に対する後続のリクエストはキャッシュから提供されます。キャッシュの存続時間 (TTL) は `Cache-Control` ヘッダーによって制御されます。次のリストでは、`Cache-Control` ヘッダーを指定するためのオプションについて説明します。
+ 画像の最適化をターゲットとするルーティングルール内で `Cache-Control` キーを使用します。
+ Amplify アプリケーションで定義されたカスタムヘッダーを使用します。
+ リモート画像の場合、リモート画像によって返された `Cache-Control` ヘッダーが準拠されます。

画像の最適化の設定で指定された `minimumCacheTTL` は、Cache-Control max-age ディレクティブの下限を定義します。例えば、リモート画像 URL が `Cache-Control s-max-age=10` で応答するが、`minimumCacheTTL` の値が 60 である場合、60 が使用されます。