ワンクリック埋め込みコードを使用した登録済みユーザー向けのダッシュボードの埋め込み - Amazon QuickSight
開始する前にステップ 1: ダッシュボードへのアクセス権を付与するステップ 2: 埋め込み先ドメインを許可リストに含めるステップ 3: 埋め込みコードを取得するステップ 4: 内部アプリケーションの HTML ページにコードを貼り付ける

ワンクリック埋め込みコードを使用した登録済みユーザー向けのダッシュボードの埋め込み

 適用先: Enterprise Edition 

QuickSight でダッシュボードを共有するときに取得する埋め込みコードを使用して、Amazon QuickSight アカウントの登録済みユーザー向けのダッシュボードを内部アプリケーションに埋め込むことができます。埋め込みコードを生成するために QuickSight の埋め込み API を実行する必要はありません。QuickSight からの埋め込みコードをコピーして、内部アプリケーションの HTML コードに貼り付けることができます。

このダッシュボードへのアクセス権を持つユーザーおよびグループ (または QuickSight アカウントの全ユーザー) が内部アプリケーションにアクセスすると、それぞれの認証情報を使用して QuickSight アカウントにサインインするように求められます。ユーザーは、認証後に内部ページ上のダッシュボードにアクセスできます。シングルサインオンが有効になっている場合は、ユーザーにサインインが再度求められることはありません。

以下のセクションでは、ダッシュボードの埋め込みコードを使用して登録済みユーザー向けのダッシュボードを埋め込む方法を説明します。

開始する前に

作業を始める前に、以下を確認してください。

  • ポップアップと iframe 間の通信を許可するため、インターネットブラウザの設定に以下のいずれかが含まれている。

    • Mozilla Broadcast Channel API のネイティブサポート。詳細については、Mozilla ドキュメントで Broadcast Channel API を参照してください。

    • IndexedDB のサポート。

    • LocalStorage のサポート。

  • インターネットブラウザの「すべての cookie をブロック」設定がオフになっている。

ステップ 1: ダッシュボードへのアクセス権を付与する

ユーザーが埋め込みダッシュボードにアクセスできるように、ダッシュボードを表示するためのアクセス権をユーザーに付与します。個々のユーザーやグループにダッシュボードへのアクセス権を付与する、またはアカウント内の全ユーザーにアクセス権を付与することができます。詳細については、「ダッシュボードに対するアクセス権の付与」を参照してください。

ステップ 2: 埋め込み先ドメインを許可リストに含める

内部アプリケーションにダッシュボードを埋め込むには、ダッシュボードの埋め込み先のドメインが QuickSight アカウントの許可リストに含まれていることを確認してください。詳細については、「埋め込みユーザーのドメインの追加」を参照してください。

ステップ 3: 埋め込みコードを取得する

以下の手順を使用して、ダッシュボードの埋め込みコードを取得します。

埋め込みコードを取得する

  1. QuickSight で公開済みのダッシュボードを開き、右上の [Share] (共有) をクリックします。次に、[Share dashboard] (ダッシュボードの共有) をクリックします。

    [ダッシュボードの共有] アイコンの画像。

  2. 開いた [Share dashboard] (ダッシュボードの共有) ページで、左上の [Copy embed code] (埋め込みコードをコピー) をクリックします。

    [埋め込みコードをコピー] アイコンの画像。

    以下のような埋め込みコードがクリップボードにコピーされます。この例の quicksightdomain は、QuickSight アカウントへのアクセスに使用する URL です。

    <iframe
    width="960"
    height="720"
    src="https://quicksightdomain/sn/embed/share/accounts/accountid/dashboards/dashboardid?directory_alias=account_directory_alias">
</iframe>

ステップ 4: 内部アプリケーションの HTML ページにコードを貼り付ける

以下の手順を使用して、埋め込みコードを内部アプリケーションの HTML ページに貼り付けます。

内部アプリケーションの HTML ページにコードを貼り付ける

  • ダッシュボードを埋め込むページの HTML コードを開き、埋め込みコードを貼り付けます。

    以下は、貼り付けた状態の例です。

    <!DOCTYPE html>
<html>
<body>

<h2>Example.com - Employee Portal</h2>
<h3>Current shipment stats</h3>
    <iframe
    width="960"
    height="720"
    src="https://us-east-2.quicksight.aws.amazon.com/sn/embed/share/accounts/accountid/dashboards/dashboardid?directory_alias=account_directory_alias">
</iframe>

</body>
</html>

例えば、ダッシュボードを内部の Google サイトのページに埋め込みたいとしましょう。Google サイトのページを開いて、埋め込みウィジェットに埋め込みコードを貼り付けることができます。

内部の Microsoft SharePoint サイトにダッシュボードを埋め込みたい場合は、新しいページを作成してから、埋め込み Web パーツに埋め込みコードを貼り付けます。