ステップ 3: コンソールセッション URL を埋め込む - Amazon QuickSight

ステップ 3: コンソールセッション URL を埋め込む

重要

Amazon QuickSight には、分析を埋め込むための新しい API、GenerateEmbedUrlForAnonymousUser および GenerateEmbedUrlForRegisteredUser が用意されています。

ダッシュボードや QuickSight コンソールの埋め込みには、これまで通り GetDashboardEmbedUrl および GetSessionEmbedUrl API を使用できますが、最新の埋め込み機能は含まれていません。最新の埋め込みエクスペリエンスについては、QuickSight 分析をアプリケーションに埋め込む を参照してください。

次のセクションでは、ステップ 3 のコンソールセッション URL をウェブサイトまたはアプリケーションページに埋め込むための Amazon QuickSight embedding SDK (JavaScript) の使用方法について説明します。SDK を使用すると、次のことを実行できます。

  • コンソールセッションを HTML ページに配置します。

  • コンソールセッションにパラメータを渡します。

  • アプリケーションに合わせてカスタマイズされたメッセージでエラー状態を処理します。

GetSessionEmbedUrl API オペレーションを呼び出して URL を取得し、アプリケーションに埋め込みます。この URL は 5 分間有効で、得られたセッションは 10 時間有効です。API オペレーションは、シングルサインオンセッションを有効にする auth_code の URL を提供します。

以下に、get-dashboard-embed-url からのレスポンスの例を示します。

//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
{
     "Status": "200",
     "EmbedUrl": "https: //dashboards.example.com/embed/620bef10822743fab329fb3751187d2d...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

QuickSight Embedding SDK を使用して、または iframe にこの URL を追加して、このコンソールセッションをウェブページに埋め込めます。固定された高さと幅の数値 (ピクセル単位) を設定した場合、QuickSight はそれらを使用し、ウィンドウのサイズ変更に合わせたビジュアルの変更はしません。QuickSight が提供する高さと幅の相対的なパーセンテージを設定した場合、ウィンドウサイズの変更に応じて変更されるレスポンシブレイアウトが提供されます。Amazon QuickSight Embedding SDK を使用して、コンソールセッション内でパラメータを制御したり、ページロードの完了やエラーに関するコールバックを受け取ることもできます。

次の例は生成された URL の使用方法を示しています。このコードはアプリケーションサーバー上で生成されます。

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>

    <script src="./quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        var dashboard;

        function embedDashboard() {
            var containerDiv = document.getElementById("embeddingContainer");
            var options = {
                // replace this dummy url with the one generated via embedding API
                url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",  
                container: containerDiv,
                scrolling: "no",
                height: "700px",
                width: "1000px",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
        }
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embeddingContainer"></div>
</body>

</html>

この例を機能させるには、Amazon QuickSight Embedding SDK を使用して、JavaScript で埋め込みコンソールセッションをウェブサイトにロードします。コピーを取得するには、次のいずれかを実行します。

  • GitHub から、Amazon QuickSight embedding SDK をダウンロードします。このリポジトリは、QuickSight デベロッパーのグループによって管理されます。

  • https://www.npmjs.com/package/amazon-quicksight-embedding-sdk から、最新の埋め込み SDK バージョンをダウンロードします。

  • JavaScript の依存関係の npm を使用する場合、次のコマンドを実行してダウンロードおよびインストールします。

    npm install amazon-quicksight-embedding-sdk