

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

# ステップ 3: ダッシュボード URL を埋め込む
<a name="embedded-dashboards-for-authenticated-users-get-step-3"></a>

**重要**  
Amazon Quick Sight には、分析を埋め込むための新しい APIs として `GenerateEmbedUrlForAnonymousUser`と があります`GenerateEmbedUrlForRegisteredUser`。  
`GetDashboardEmbedUrl` と `GetSessionEmbedUrl` APIs を使用してダッシュボードと Amazon Quick Sight コンソールを埋め込むことはできますが、最新の埋め込み機能は含まれていません。up-to-date埋め込みエクスペリエンスについては、[「Amazon Quick Sight 分析をアプリケーションに埋め込む](https://docs.aws.amazon.com/quicksight/latest/user/embedding-overview.html)」を参照してください。

次のセクションでは、[Amazon Quick Sight 埋め込み SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) (JavaScript) を使用して、ステップ 3 のダッシュボード URL をウェブサイトまたはアプリケーションページに埋め込む方法について説明します。SDK を使用すると、次のことを実行できます。
+ ダッシュボードを HTML ページに配置します。
+ ダッシュボードにパラメータを渡します。
+ アプリケーションに合わせてカスタマイズされたメッセージでエラー状態を処理します。

`GetDashboardEmbedUrl` 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"
}
```

[Amazon Quick Sight 埋め込み SDK を使用する](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk)か、この URL を iframe に追加して、このダッシュボードをウェブページに埋め込みます。固定の高さと幅の数値 (ピクセル単位) を設定した場合、Amazon Quick Sight はそれらを使用し、ウィンドウのサイズ変更に伴ってビジュアルを変更しません。相対的な高さと幅の割合を設定すると、Amazon Quick Sight はウィンドウサイズの変化に応じて変化するレスポンシブレイアウトを提供します。Amazon Quick Sight 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 Quick Sight Embedding SDK を使用して、JavaScript を使用してウェブサイトに埋め込みダッシュボードをロードします。コピーを取得するには、次のいずれかを実行します。
+ GitHub から [Amazon Quick Sight 埋め込み SDK](https://github.com/awslabs/amazon-quicksight-embedding-sdk#step-3-create-the-quicksight-session-object) をダウンロードします。このリポジトリは、Amazon Quick Sight 開発者のグループによって管理されます。
+ [https://www.npmjs.com/package/amazon-quicksight-embedding-sdk](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) から、最新の埋め込み SDK バージョンをダウンロードします。
+ JavaScript の依存関係の `npm` を使用する場合、次のコマンドを実行してダウンロードおよびインストールします。

  ```
  npm install amazon-quicksight-embedding-sdk
  ```