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

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

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 でのテーマの使用」を参照してください。Amazon Quick Sight Embedding SDK の使用の詳細については、GitHub の amazon-quicksight-embedding-sdk を参照してください。

前提条件

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

用語と概念

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

設定

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

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

設定メソッド

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

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

埋め込みダッシュボードまたはビジュアルをデフォルト以外のテーマを使用して初期化するには、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);

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

デベロッパーは、テーマオーバーライドを使用して、実行時に埋め込みダッシュボードまたはビジュアルのテーマを定義できます。これにより、ダッシュボードまたはビジュアルは、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);

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

デベロッパーは、初期化時にプリロードされる一連のダッシュボードテーマを設定できます。これは、ダークモードやライトモードなど、さまざまなビューをすばやく切り替えるのに最も役立ちます。埋め込みダッシュボードまたはビジュアルは、最大 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);