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

# Amazon Quick Sight 埋め込みダッシュボードとビジュアルのルックアンドフィールをカスタマイズする
<a name="embedding-runtime-theming"></a>

Amazon Quick Sight Embedding SDK (バージョン 2.5.0 以降) を使用して、実行時に埋め込み Amazon Quick Sight ダッシュボードとビジュアルのテーマを変更できます。ランタイムテーマを使用すると、Software as a Service (SaaS) アプリケーションを Amazon Quick Sight 埋め込みアセットと簡単に統合できます。ランタイムテーマを使用すると、埋め込みコンテンツのテーマを、Amazon Quick Sight アセットが埋め込まれている親アプリケーションのテーマと同期できます。実行時のテーマ設定を使用して、閲覧者のためにカスタマイズオプションを追加することもできます。テーマ設定の変更は、初期化時、または埋め込みダッシュボードやビジュアルの存続期間を通じて、埋め込みアセットに適用できます。

テーマの詳細については、「[Amazon Quick Sight でのテーマの使用](themes-in-quicksight.md)」を参照してください。Amazon Quick Sight Embedding SDK の使用の詳細については、GitHub の [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk) を参照してください。

**前提条件**

開始する前に、次の前提条件を満たしていることを確認してください。
+ Amazon Quick Sight Embedding SDK バージョン 2.5.0 以降を使用している。
+ 使用するテーマにアクセスするための許可。Amazon Quick Sight のテーマにアクセス許可を付与するには、`UpdateThemePermissions`API コールを行うか、Amazon Quick Sight コンソールの分析エディタのテーマの横にある**共有**アイコンを使用します。

## 用語と概念
<a name="runtime-theming-terminology"></a>

次の用語は、埋め込みの実行時のテーマ設定を使用する場合に役立ちます。
+ テーマ – コンテンツの表示方法を変更する複数の分析とダッシュボードに適用できる設定を集めたもの。
+ ThemeConfiguration – テーマのすべての表示プロパティを含む設定オブジェクト。
+ テーマオーバーライド– コンテンツの表示方法の一部または全部の側面をオーバーライドするためにアクティブなテーマに適用される `ThemeConfiguration` オブジェクト。
+ *テーマ ARN * – Amazon Quick Sight テーマを識別する Amazon リソースネーム (ARN)。カスタムテーマ ARN の例を次に示します。

  `arn:aws:quicksight:region:account-id:theme/theme-id`

  Amazon Quick Sight が提供するスターターテーマには、テーマ ARN にリージョンがありません。スターターテーマ ARN の例を次に示します。

  `arn:aws:quicksight::aws:theme/CLASSIC`

## 設定
<a name="runtime-theming-setup"></a>

実行時のテーマ設定の使用を開始するには、次の情報を準備してください。
+ 使用するテーマのテーマ ARN。既存のテーマを選択することも、新しいテーマを作成することもできます。Amazon Quick Sight アカウントのすべてのテーマとテーマ ARNs のリストを取得するには、[ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html) API オペレーションを呼び出します。プリセット Amazon Quick Sight テーマの詳細については、「」を参照してください[Amazon Quick APIs を使用した Amazon Quick 分析のデフォルトテーマの設定](customizing-quicksight-default-theme.md)。
+ 登録済みユーザーの埋め込みを使用している場合は、使用するテーマにそのユーザーがアクセスできることを確認してください。

  匿名ユーザー埋め込みを使用している場合は、テーマ ARN のリストを `GenerateEmbedUrlForAnonymousUser` API の `AuthorizedResourceArns` パラメータに渡します。匿名ユーザーには、`AuthorizedResourceArns` パラメータにリストされているすべてのテーマへのアクセス権が付与されます。

## SDK メソッドインターフェイス
<a name="runtime-theming-sdk-interface"></a>

**設定メソッド**

次の表には、デベロッパーが実行時のテーマ設定に使用できるさまざまなセッターメソッドの説明が記載されています。


| 方法 | 説明 | 
| --- | --- | 
| `setTheme(themeArn: string)` | ダッシュボードまたはビジュアルのアクティブなテーマを別のテーマに置き換えます。適用すると、テーマのオーバーライドが削除されます。<br />テーマにアクセスできない場合、またはテーマが存在しない場合は、エラーが返されます。 | 
| `setThemeOverride(themeOverride: ThemeConfiguration)` | 現在アクティブなテーマをオーバーライドするために動的な `ThemeConfiguration` を設定します。これは、以前に設定されたテーマのオーバーライドを置き換えます。新しい `ThemeConfiguration` で指定されていない値は、現在アクティブなテーマの値にデフォルトで設定されます。<br />指定した `ThemeConfiguration` が無効な場合は、エラーが返されます。 | 

## テーマを使用した埋め込みコンテンツの初期化
<a name="runtime-theming-sdk-initialize"></a>

埋め込みダッシュボードまたはビジュアルをデフォルト以外のテーマを使用して初期化するには、`DashboardContentOptions` または `VisualContentOptions` パラメータで `themeOptions` オブジェクトを定義し、`themeOptions` 内の `themeArn` プロパティを目的のテーマ ARN に設定します。

次の例では、`MIDNIGHT` テーマを使用して埋め込みダッシュボードを初期化します。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        themeArn: "arn:aws:quicksight::aws:theme/MIDNIGHT"
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## テーマオーバーライドを使用した埋め込みコンテンツの初期化
<a name="runtime-theming-runtime-initialize-override"></a>

デベロッパーは、テーマオーバーライドを使用して、実行時に埋め込みダッシュボードまたはビジュアルのテーマを定義できます。これにより、ダッシュボードまたはビジュアルは、Amazon Quick Sight 内でテーマを事前設定することなく、サードパーティーアプリケーションからテーマを継承できます。埋め込みダッシュボードまたはビジュアルをテーマオーバーライドで初期化するには、 `DashboardContentOptions` または `VisualContentOptions` パラメータのいずれかの `themeOptions` 内の `themeOverride` プロパティを設定します。次の例では、ダッシュボードのテーマのフォントをデフォルトのフォントから `Amazon Ember` にオーバーライドします。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "themeOverride":{"Typography":{"FontFamilies":[{"FontFamily":"Comic Neue"}]}}
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## プリロードされたテーマを使用した埋め込みコンテンツの初期化
<a name="runtime-theming-runtime-initialize-preloaded"></a>

デベロッパーは、初期化時にプリロードされる一連のダッシュボードテーマを設定できます。これは、ダークモードやライトモードなど、さまざまなビューをすばやく切り替えるのに最も役立ちます。埋め込みダッシュボードまたはビジュアルは、最大 5 つのプリロードされたテーマで初期化できます。プリロードされたテーマを使用するには、最大 5 つの `themeArns` で配列内の `DashboardContentOptions` または `VisualContentOptions` の `preloadThemes` プロパティを設定します。次の例では、 `Midnight` と `Rainier` のスターターテーマをダッシュボードにプリロードします。

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "preloadThemes": ["arn:aws:quicksight::aws:theme/RAINIER", "arn:aws:quicksight::aws:theme/MIDNIGHT"]
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```