翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# ブランディングエディタによるマネージドログインのカスタマイズ
ブランディングエディタは、マネージドログインウェブページ用のビジュアルデザインおよび編集ツールです。Amazon Cognito コンソールに組み込まれています。ブランディングエディタでは、ログインページのプレビューから開始し、Quick Setup オプションまたは詳細ビューの詳細オプションに進むことができます。スタイルパラメータを変更してプレビューしたり、カスタム背景イメージとロゴを追加したりできます。ライトモードとダークモードを設定できます。
![\[Amazon Cognito ユーザープールのブランディングエディタビジュアルエディタのプレビュー。\]](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png)
まず、ユーザープールまたはアプリケーションクライアントに適用できるスタイルを作成します。
**ブランディングエディタの使用を開始するには**
1. [[ドメイン]](cognito-user-pools-assign-domain.md) タブから**ドメインを作成**するか、既存のドメインを更新します。**[ブランディングバージョン]** で、**[マネージドログイン]** を使用するようにドメインを設定します。
1. 既存のアプリケーションクライアントスタイルがある場合は削除します。
1. **[アプリケーションクライアント]** メニューで、アプリケーションクライアントを選択します。
1. **[マネージドログインスタイル]** で、アプリクライアントに割り当てられたスタイルを選択します。
1. **[スタイルを削除]** を選択します。[Confirm] (確認) をクリックして、選択内容を確認します。
1. ユーザープールの **[マネージドログイン]** メニューに移動します。プロンプトに従って、マネージドログインを含む[機能プラン](cognito-sign-in-feature-plans.md)を選択します (まだ選択していない場合)。変更を行わずにブランディングエディタをチェックアウトする場合は、**[この機能をプレビュー]** を選択することもできます。
1. **[スタイル]** で、**[スタイルを作成]** を選択します。
1. スタイルを割り当てるアプリケーションクライアントを選択し、**[作成]** を選択します。新しいアプリケーションクライアントを作成することもできます。
1. Amazon Cognito コンソールでブランディングエディタを起動します。
1. 編集を開始するタブを選択するか、**[エディタを起動]** を選択して [[Quick Setup]](#branding-designer-quick-setup) に移動します。以下のタブが利用可能です。
**プレビュー**
マネージドログインページで現在の選択内容がどのように表示されるかを確認します。
**基盤**
全体的なテーマを設定し、外部 ID プロバイダーへのリンクとスタイルフォームフィールドを設定します。
**コンポーネント**
ヘッダー、フッター、個々の UI 要素のスタイルを設定します。
1. 初期設定を選択するには、Quick Setup に移動します。**[設定カテゴリの変更]** を選択し、**[Quick Setup]** を選択します。**[続行]** を選択すると、ブランディングエディタが起動し、設定する一連の基本オプションが表示されます。
## テキストとローカリゼーション
ブランディングエディタでテキストを変更またはローカライズすることはできません。代わりに、ユーザーに配信する URL に `lang` クエリパラメータを追加します。このパラメータにより、マネージドログインページは利用可能な言語の 1 つにローカライズされます。詳細については、「[マネージドログインのローカリゼーション](cognito-user-pools-managed-login.md#managed-login-localization)」を参照してください。
## Quick Setup
**[ブランディングエディタを起動]** ボタンを選択すると、マネージドログイン設定のビジュアルエディタがロードされ、さまざまな主要カスタマイズオプションから選択できます。選択するに従って、Amazon Cognito はマネージドログインの変更をプレビューウィンドウに反映します。詳細設定メニューに戻るには、**[設定カテゴリの変更]** ボタンを選択します。
**全体的な外観と操作感をどのようにするか?**
マネージドログインの基本的なテーマ設定を構成します。
**Display mode (表示モード)**
マネージドログインのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。Amazon Cognito がマネージドログインをレンダリングすると、アダプティブ設定はユーザーのブラウザ設定に従います。ブラウザアダプティブモードを選択すると、ライトモードとダークモードに異なる色とロゴ画像を選択できます。
**[Spacing] (間隔)**
ページの要素間のデフォルト間隔を設定します。
**境界の半径**
要素の外側の境界について、丸みの深さを設定します。
**ページの背景をどのようにするか?**
**背景タイプ**
**[画像を表示]** チェックボックスは、背景画像を使用するか、単色の背景を設定するかを示します。
1. 画像を使用するには、**[画像を表示]** を選択し、ライトモードとダークモードの背景画像を選択します。画像でカバーされない背景領域には、ダークモードとライトモードの **[ページの背景色]** を設定することもできます。
1. 背景に単色のみを使用するには、**[画像を表示]** の選択を解除し、ライトモードとダークモードの **[ページの背景色]** を選択します。
**フォームの外観をどのようにするか?**
マネージドログインのフォーム要素の設定を行います。フォーム項目の例として、ログインプロンプトとコードプロンプトがあります。
**水平位置合わせ**
フォームフィールドの水平位置合わせを設定します。
**フォームのロゴ**
ロゴ画像の配置を設定します。
**ロゴ画像**
ライトモードとダークモードのフォーム要素に含めるロゴ画像ファイルを選択します。画像をアップロードするには、**[ロゴ画像]** ドロップダウンを選択し、**[新しいアセットを追加]** を選択してロゴファイルを追加します。
**主なブランドカラー**
ライトモードとダークモードのテーマ色を設定します。この色は、プライマリとして分類されたすべての要素に背景色として適用されます。
**ヘッダーの外観をどのようにするか?**
マネージドログインページにヘッダーを含めるかどうかを選択します。ヘッダーにはロゴ画像を含めることができます。
**ヘッダーのロゴ**
ヘッダー内のロゴ画像の位置を設定します。
**ロゴ画像**
ヘッダーに含めるロゴの位置とロゴ画像ファイルを選択します。画像をアップロードするには、**[ロゴ画像]** ドロップダウンを選択し、**[新しいアセットを追加]** を選択してロゴファイルを追加します。
**ヘッダーの背景色**
ヘッダーの背景にライトモードとダークモードの色を設定します。
## 詳細設定
詳細設定ビューでは、**[基盤]** と **[コンポーネント]** の個々のコンポーネントを変更できます。**[プレビュー]** タブには、現在のコンテキストにおけるマネージドログインのプレビューとカスタマイズが表示されます。
![\[マネージドログインコンポーネントの詳細な設定の AWS マネジメントコンソール スクリーンショット。\]](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png)
コンポーネントのビジュアルエディタに移動するには、コンポーネントのタイトルにある [編集] アイコンを選択します。テーマスタジオエディタで、**[設定カテゴリを変更]** ボタンを使用してコンポーネントを切り替えることができます。
### 基盤
**アプリスタイル**
マネージドログイン設定の基本を構成します。このカテゴリには、全体的なテーマ、テキスト間隔、ページのヘッダーとフッターの設定があります。
**Display mode (表示モード)**
マネージドログインページのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。ブラウザアダプティブモードを選択すると、ライトモードとダークモードに異なる色とロゴ画像を選択できます。
**[Spacing] (間隔)**
ページの要素間のデフォルト間隔を設定します。
**認証動作**
ユーザーを外部 ID プロバイダー (IdP) に接続するボタンのスタイルを設定します。このセクションには、マネージドログインでユーザーに E メールアドレスの入力を求め、それを [SAML ID プロバイダー識別子](cognito-user-pools-managing-saml-idp-naming.md)と照合するための **[ドメイン検索入力]** オプションが含まれています。
**フォーム動作**
入力フォームのスタイル (入力の配置、色、要素の位置合わせ) を設定します。
### コンポーネント
**ボタン**
Amazon Cognito がマネージドログインページでレンダリングするボタンのスタイル。
**ディバイダー**
入力フォームや外部プロバイダーのサインインセレクターなど、マネージドログイン要素間の分割線と境界のスタイル。
**ドロップダウン**
ドロップダウンメニューのスタイル。
**ファビコン**
Amazon Cognito がタブとブックマークアイコンに提供する画像のスタイル。
**フォーカスリング**
現在選択されている入力を示すハイライトのスタイル。
**フォームコンテナ**
フォームを囲む要素のスタイル。
**グローバルフッター**
Amazon Cognito がマネージドログインページの下部に表示するフッターのスタイル。
**グローバルヘッダー**
Amazon Cognito がマネージドログインページの上部に表示するヘッダーのスタイル。
**表示**
エラーメッセージと成功メッセージのスタイル。
**オプションコントロール**
チェックボックス、複数選択、その他の入力プロンプトのスタイル。
**ページ背景**
マネージドログインの全体的な背景のスタイル。
**入力**
フォームフィールド入力プロンプトのスタイル。
**Link**
マネージドログインページのハイパーリンクのスタイル。
**ページのテキスト**
ページ内テキストのスタイル。
**フィールドのテキスト**
フォーム入力の周囲のテキストのスタイル。
## マネージドログインのブランディングの API および SDK オペレーション
API オペレーション [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) および [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) を使用して、マネージドログインスタイルにブランディングを適用することもできます。これらのオペレーションは、別のアプリケーションクライアントやユーザープールのブランディングスタイルと同一またはわずかに変更したバージョンを作成するのに最適です。API オペレーション [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) を使用して、既存のスタイルのマネージドログインブランディングをクエリし、必要に応じて出力を変更して別のリソースに適用します。
`UpdateManagedLoginBranding` オペレーションでは、スタイルを適用する先のアプリケーションクライアントは変更されません。アプリケーションクライアントに割り当てられている既存のスタイルのみが更新されます。アプリケーションクライアントのスタイルを完全に置き換えるには、[DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html) を使用して既存のスタイルを削除し、`CreateManagedLoginBranding` を使用して新しいスタイルを割り当てます。Amazon Cognito コンソールでも同様です。既存のスタイルを削除して新しいスタイルを作成する必要があります。
API または SDK リクエストでマネージドログインのブランディングを設定するには、`Document` データ型に変換された JSON ファイルに設定を埋め込む必要があります。以下は、追加できる画像と、ブランディングスタイルを設定するリクエストをプログラムで生成するためのガイダンスです。
### 画像アセット
[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) と [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) には `Assets` パラメータが含まれています。このパラメータは、base64 でエンコードされたバイナリ形式の画像ファイルの配列です。
**注記**
ブランディングスタイルを作成または更新するプログラムリクエストは、リクエストサイズが 2 MB 以下である必要があります。リクエスト内のアセットによっては、この制限を超える場合があります。この場合、リクエストを複数の `UpdateManagedLoginBranding` リクエストに分割し、最大リクエストサイズを超えないパラメータのグループにします。これらのリクエストでは、指定していないパラメータがデフォルトに設定されることはないため、既存の設定に影響を与えずに、部分的なリクエストを送信できます。
一部のアセットは、送信できるファイルタイプに制限があります。
****
| アセット | 許可されるファイル拡張子 |
| --- | --- |
| FAVICON\$1ICO | ico |
| FAVICON\$1SVG | svg |
| EMAIL\$1GRAPHIC | png、svg、jpeg |
| SMS\$1GRAPHIC | png、svg、jpeg |
| AUTH\$1APP\$1GRAPHIC | png、svg、jpeg |
| PASSWORD\$1GRAPHIC | png、svg、jpeg |
| PASSKEY\$1GRAPHIC | png、svg、jpeg |
| PAGE\$1HEADER\$1LOGO | png、svg、jpeg |
| PAGE\$1HEADER\$1BACKGROUND | png、svg、jpeg |
| PAGE\$1FOOTER\$1LOGO | png、svg、jpeg |
| PAGE\$1FOOTER\$1BACKGROUND | png、svg、jpeg |
| PAGE\$1BACKGROUND | png、svg、jpeg |
| FORM\$1BACKGROUND | png、svg、jpeg |
| FORM\$1LOGO | png、svg、jpeg |
| IDP\$1BUTTON\$1ICON | ico、svg |
SVG タイプのファイルは、以下の属性と要素をサポートしています。
------
#### [ Attributes ]
```
accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan
```
------
#### [ Elements ]
```
svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence
```
------
### マネージドログインのブランディングオペレーション用のツール
Amazon Cognito は、マネージドログインのブランディング設定オブジェクト用のファイルを [JSON スキーマ形式](https://json-schema.org/docs)で管理します。ブランディングスタイルをプログラムで更新する方法は、次のとおりです。
**ユーザープール API でブランディングを更新するには**
1. Amazon Cognito コンソールで、ユーザープールの **[マネージドログイン]** メニューからマネージドログインのデフォルトのブランディングスタイルを作成します。それをアプリケーションクライアントに割り当てます。
1. スタイルを作成したアプリケーションクライアントの ID (例: `1example23456789`) を記録します。
1. `ReturnMergedResources` を `true` に設定して [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API リクエストを使用し、ブランディングスタイルの設定を取得します。 リクエスト本文の例を次に示します。
```
{
"ClientId": "1example23456789",
"ReturnMergedResources": true,
"UserPoolId": "us-east-1_EXAMPLE"
}
```
1. `DescribeManagedLoginBrandingByClient` の出力をカスタマイズして変更します。
1. レスポンス本文は、作成および更新オペレーションの構文に含まれない `ManagedLoginBranding` 要素で囲まれています。この JSON オブジェクトの最上位レベルを削除します。
1. 画像を置き換えるには、`Bytes` 値を、各画像ファイルの Base64 エンコードされたバイナリデータに置き換えます。
1. 設定を更新するには、`Settings` オブジェクトの出力を変更し、次回のリクエストに含めます。Amazon Cognito は、API レスポンスで受け取ったスキーマに存在しない `Settings` オブジェクトの値を無視します。
1. 更新されたレスポンス本文を [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) または [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) リクエストで使用します。このリクエストのサイズが 2 MB を超える場合は、複数のリクエストに分割します。これらのオペレーションは、特に指定しない限り、元の設定が未変更のままである `PATCH` モデルで機能します。