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

埋め込みダッシュボードおよびビジュアルのルックアンドフィールをカスタマイズする

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

テーマの詳細については、「Amazon でのテーマの使用 QuickSight」を参照してください。 QuickSight 埋め込み の使用の詳細についてはSDK、「」のamazon-quicksight-embedding-sdk「」を参照してください GitHub。

前提条件

開始する前に、次の前提条件を満たしていることを確認してください。

用語と概念

次の用語は、埋め込みの実行時のテーマ設定を使用する場合に役立ちます。

設定

実行時のテーマ設定の使用を開始するには、次の情報を準備してください。

SDK メソッドインターフェイス

設定メソッド

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

テーマを使用した埋め込みコンテンツの初期化

デフォルト以外のテーマで埋め込みダッシュボードまたはビジュアルを初期化するには、 DashboardContentOptionsまたは VisualContentOptionsパラメータでthemeOptionsオブジェクトを定義し、 内の themeArnプロパティthemeOptionsを目的のテーマ に設定します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);

テーマオーバーライドを使用した埋め込みコンテンツの初期化

開発者はテーマオーバーライドを使用して、実行時に埋め込みダッシュボードまたはビジュアルのテーマを定義できます。これにより、ダッシュボードまたはビジュアルは、 内でテーマを事前に設定しなくても、サードパーティーアプリケーションからテーマを継承できます QuickSight。埋め込みダッシュボードまたはビジュアルをテーマオーバーライドで初期化するには、 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);

プリロードされたテーマを使用した埋め込みコンテンツの初期化

デベロッパーは、初期化時にプリロードするダッシュボードテーマのセットを設定できます。これは、ダークモードやライトモードなど、異なるビュー間のクイックトグルに最も役立ちます。埋め込みダッシュボードまたはビジュアルは、最大 5 つのプリロードされたテーマで初期化できます。プリロードされたテーマを使用するには、 preloadThemes プロパティを DashboardContentOptionsまたは最大 5 個の 配列VisualContentOptionsで設定しますthemeArns。次の例では、 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);