翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
| 適用先: Enterprise Edition |
| 対象者: Amazon QuickSight デベロッパー |
以下のセクションで、匿名 (未登録) ユーザー向けに、Amazon QuickSight 埋め込みビジュアルを設定する方法の詳細を説明します。
ステップ 1: 許可をセットアップする
| 適用先: Enterprise Edition |
| 対象者: Amazon QuickSight デベロッパー |
次のセクションでは、バックエンドアプリケーションまたはウェブサーバーのアクセス許可を設定する方法について説明します。このタスクには IAM への管理者アクセス権が必要です。
ヴィジュアルにアクセスする各ユーザーは、Amazon QuickSight のアクセスとヴィジュアルへのアクセス許可を付与するロールを引き受けます。これを可能にするには、 AWS アカウントに IAM ロールを作成します。IAM ポリシーをロールに関連付けて、それを引き受けるすべてのユーザーにアクセス許可を付与します。
IAM ポリシーで条件を作成し、デベロッパーが GenerateEmbedUrlForAnonymousUser API オペレーションの AllowedDomains パラメータにリストできるドメインを制限できます。AllowedDomains パラメータはオプションのパラメータです。このパラメータは、デベロッパーとしてのユーザーに対し、[Manage QuickSight] (QuickSight の管理) メニューで設定されている静的ドメインを上書きするためのオプションを付与します。代わりに、生成された URL へのアクセスが可能な、ドメインもしくはサブドメインを、最大 3 つまでリストアップすることもできます。この URL は、作成した Web サイトに埋め込むことが可能です。パラメータにリストされているドメインのみが、埋め込みダッシュボードにアクセスできます。この状態にしていない場合、インターネット上の任意のドメインを AllowedDomains パラメータにリストできてしまいます。
デベロッパーがこのパラメータで使用できるドメインを制限するには、AllowedEmbeddingDomains 条件を IAM ポリシーに追加します。AllowedDomains パラメータの詳細については、「Amazon QuickSight API リファレンス」の「GenerateEmbedUrlForAnonymousUser」を参照してください。
次のサンプルポリシーで、GenerateEmbedUrlForAnonymousUser で使用するこれらの許可が付与されます。このアプローチを機能させるには、 AWS アカウントでセッションパックまたはセッションキャパシティーの料金が必要となります。これがないと、このビジュアルにユーザーがにアクセスを試みた際、エラー UnsupportedPricingPlanException が返されます。
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForAnonymousUser" ], "Resource": [ "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:namespace/{{namespace}}", "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-1}}", "arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-2}}" ], "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } } }
作成したロールへのアクセスを許可するには、アプリケーションの IAM ID に関連付けられた信頼ポリシーが必要です。つまり、ユーザーがアプリケーションにアクセスすると、アプリケーションはユーザーに代わってビジュアルを開くためのロールを引き受けます。次の例は、サンプルの信頼ポリシーを示しています。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowLambdaFunctionsToAssumeThisRole",
"Effect": "Allow",
"Principal": {
"Service": "lambda.amazonaws.com"
},
"Action": "sts:AssumeRole"
},
{
"Sid": "AllowEC2InstancesToAssumeThisRole",
"Effect": "Allow",
"Principal": {
"Service": "ec2.amazonaws.com"
},
"Action": "sts:AssumeRole"
}
]
}信頼ポリシーの詳細については、「IAM ユーザーガイド」の「IAM の一時的な認証情報」を参照してください。
ステップ 2: 認証コードがアタッチされた URL を生成する
| 適用先: Enterprise Edition |
| 対象者: Amazon QuickSight デベロッパー |
以下のセクションで、匿名の訪問者に代わって認証を行う方法と、アプリケーションサーバーから埋め込みビジュアルの URL を取得する方法について説明します。
ユーザーがアプリケーションにアクセスすると、アプリケーションはユーザーに代わって IAM ロールを引き受けます。そのユーザーがまだ存在しない場合は、アプリケーションがユーザーを QuickSight に追加します。次に、一意のロールセッション ID として識別子を渡します。
次の例では、ユーザーに代わって IAM 認証を実行します。一意のロールセッション ID として識別子を渡します。このコードはアプリケーションサーバー上で実行されます。
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.auth.AWSCredentialsProvider;
import com.amazonaws.regions.Regions;
import com.amazonaws.services.quicksight.AmazonQuickSight;
import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
import com.amazonaws.services.quicksight.model.AnonymousUserDashboardVisualEmbeddingConfiguration;
import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration;
import com.amazonaws.services.quicksight.model.DashboardVisualId;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult;
import com.amazonaws.services.quicksight.model.SessionTag;
import java.util.List;
/**
* Class to call QuickSight AWS SDK to get url for Visual embedding.
*/
public class GenerateEmbedUrlForAnonymousUserTest {
private final AmazonQuickSight quickSightClient;
public GenerateEmbedUrlForAnonymousUserTest() {
this.quickSightClient = AmazonQuickSightClientBuilder
.standard()
.withRegion(Regions.US_EAST_1.getName())
.withCredentials(new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() {
// provide actual IAM access key and secret key here
return new BasicAWSCredentials("access-key", "secret-key");
}
@Override
public void refresh() {
}
}
)
.build();
}
public String getEmbedUrl(
final String accountId, // AWS Account ID
final String namespace, // Anonymous embedding required specifying a valid namespace for which you want the enbedding URL
final List<String> authorizedResourceArns, // Dashboard arn list of dashboard visuals to embed
final String dashboardId, // Dashboard ID of the dashboard to embed
final String sheetId, // Sheet ID of the sheet to embed
final String visualId, // Visual ID of the visual to embed
final List<String> allowedDomains, // Runtime allowed domains for embedding
final List<SessionTag> sessionTags // Session tags used for row-level security
) throws Exception {
final DashboardVisualId dashboardVisual = new DashboardVisualId()
.withDashboardId(dashboardId)
.withSheetId(sheetId)
.withVisualId(visualId);
final AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
= new AnonymousUserDashboardVisualEmbeddingConfiguration()
.withInitialDashboardVisualId(dashboardVisual);
final AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
= new AnonymousUserEmbeddingExperienceConfiguration()
.withDashboardVisual(anonymousUserDashboardVisualEmbeddingConfiguration);
final GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest
= new GenerateEmbedUrlForAnonymousUserRequest()
.withAwsAccountId(accountId)
.withNamespace(namespace)
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
.withAuthorizedResourceArns(authorizedResourceArns)
.withExperienceConfiguration(anonymousUserEmbeddingExperienceConfiguration)
.withAllowedDomains(allowedDomains)
.withSessionTags(sessionTags)
.withSessionLifetimeInMinutes(600L);
final GenerateEmbedUrlForAnonymousUserResult generateEmbedUrlForAnonymousUserResult
= quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest);
return generateEmbedUrlForAnonymousUserResult.getEmbedUrl();
}
}global.fetch = require('node-fetch');
const AWS = require('aws-sdk');
function generateEmbedUrlForAnonymousUser(
accountId, // Your AWS account ID
dashboardId, // Dashboard ID to which the constructed url points
sheetId, // Sheet ID to which the constructed url points
visualId, // Visual ID to which the constructed url points
quicksightNamespace, // valid namespace where you want to do embedding
authorizedResourceArns, // dashboard arn list of dashboard visuals to embed
allowedDomains, // runtime allowed domains for embedding
sessionTags, // session tags used for row-level security
generateEmbedUrlForAnonymousUserCallback, // success callback method
errorCallback // error callback method
) {
const experienceConfiguration = {
"DashboardVisual": {
"InitialDashboardVisualId": {
"DashboardId": dashboardId,
"SheetId": sheetId,
"VisualId": visualId
}
}
};
const generateEmbedUrlForAnonymousUserParams = {
"AwsAccountId": accountId,
"Namespace": quicksightNamespace,
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
"AuthorizedResourceArns": authorizedResourceArns,
"AllowedDomains": allowedDomains,
"ExperienceConfiguration": experienceConfiguration,
"SessionTags": sessionTags,
"SessionLifetimeInMinutes": 600
};
const quicksightClient = new AWS.QuickSight({
region: process.env.AWS_REGION,
credentials: {
accessKeyId: AccessKeyId,
secretAccessKey: SecretAccessKey,
sessionToken: SessionToken,
expiration: Expiration
}
});
quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) {
if (err) {
console.log(err, err.stack);
errorCallback(err);
} else {
const result = {
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API
"Access-Control-Allow-Headers": "Content-Type"
},
"body": JSON.stringify(data),
"isBase64Encoded": false
}
generateEmbedUrlForAnonymousUserCallback(result);
}
});
}import json
import boto3
from botocore.exceptions import ClientError
import time
# Create QuickSight and STS clients
quicksightClient = boto3.client('quicksight',region_name='us-west-2')
sts = boto3.client('sts')
# Function to generate embedded URL for anonymous user
# accountId: YOUR AWS ACCOUNT ID
# quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING
# authorizedResourceArns: DASHBOARD ARN LIST TO EMBED
# allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING
# experienceConfiguration: DASHBOARD ID, SHEET ID and VISUAL ID TO WHICH THE CONSTRUCTED URL POINTS
# Example experienceConfig -> 'DashboardVisual': {
# 'InitialDashboardVisualId': {
# 'DashboardId': 'dashboardId',
# 'SheetId': 'sheetId',
# 'VisualId': 'visualId'
# }
# },
# sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY
def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, experienceConfiguration, sessionTags):
try:
response = quicksightClient.generate_embed_url_for_anonymous_user(
AwsAccountId = accountId,
Namespace = quicksightNamespace,
AuthorizedResourceArns = authorizedResourceArns,
AllowedDomains = allowedDomains,
ExperienceConfiguration = experienceConfiguration,
SessionTags = sessionTags,
SessionLifetimeInMinutes = 600
)
return {
'statusCode': 200,
'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
'body': json.dumps(response),
'isBase64Encoded': bool('false')
}
except ClientError as e:
print(e)
return "Error generating embeddedURL: " + str(e)
次の例は、埋め込みダッシュボードの URL を生成するためにアプリケーションサーバーで使用できる JavaScript (Node.js) を示しています。ダッシュボードを表示するには、ウェブサイトまたはアプリでこの URL を使用します。
const AWS = require('aws-sdk');
const https = require('https');
var quicksightClient = new AWS.Service({
apiConfig: require('./quicksight-2018-04-01.min.json'),
region: 'us-east-1',
});
quicksightClient.generateEmbedUrlForAnonymousUser({
'AwsAccountId': '111122223333',
'Namespace' : 'default',
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
'AuthorizedResourceArns': authorizedResourceArns,
'ExperienceConfiguration': {
'DashboardVisual': {
'InitialDashboardVisualId': {
'DashboardId': 'dashboard_id',
'SheetId': 'sheet_id',
'VisualId': 'visual_id'
}
}
},
'AllowedDomains': allowedDomains,
'SessionTags': sessionTags,
'SessionLifetimeInMinutes': 600
}, function(err, data) {
console.log('Errors: ');
console.log(err);
console.log('Response: ');
console.log(data);
});//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://quicksightdomain/embed/12345/dashboards/67890/sheets/12345/visuals/67890...", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
次の例は、埋め込みダッシュボードの URL を生成するためにアプリケーションサーバーで使用できる .NET/C# コードを示しています。ダッシュボードを表示するには、ウェブサイトまたはアプリでこの URL を使用します。
using System;
using Amazon.QuickSight;
using Amazon.QuickSight.Model;
namespace GenerateDashboardEmbedUrlForAnonymousUser
{
class Program
{
static void Main(string[] args)
{
var quicksightClient = new AmazonQuickSightClient(
AccessKey,
SecretAccessKey,
SessionToken,
Amazon.RegionEndpoint.USEast1);
try
{
DashboardVisualId dashboardVisual = new DashboardVisualId
{
DashboardId = "dashboard_id",
SheetId = "sheet_id",
VisualId = "visual_id"
};
AnonymousUserDashboardVisualEmbeddingConfiguration anonymousUserDashboardVisualEmbeddingConfiguration
= new AnonymousUserDashboardVisualEmbeddingConfiguration
{
InitialDashboardVisualId = dashboardVisual
};
AnonymousUserEmbeddingExperienceConfiguration anonymousUserEmbeddingExperienceConfiguration
= new AnonymousUserEmbeddingExperienceConfiguration
{
DashboardVisual = anonymousUserDashboardVisualEmbeddingConfiguration
};
Console.WriteLine(
quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest
{
AwsAccountId = "111222333444",
Namespace = default,
// authorizedResourceArns should contain ARN of dashboard used below in ExperienceConfiguration
AuthorizedResourceArns = { "dashboard_id" },
ExperienceConfiguration = anonymousUserEmbeddingExperienceConfiguration,
SessionTags = sessionTags,
SessionLifetimeInMinutes = 600,
}).Result.EmbedUrl
);
} catch (Exception ex) {
Console.WriteLine(ex.Message);
}
}
}
}ロールを引き受けるには、次のいずれかの AWS Security Token Service （AWS STS) API オペレーションを選択します。
-
AssumeRole – ロールを引き受けるために IAM ID を使用している場合は、このオペレーションを使用します。
-
AssumeRoleWithWebIdentity – ユーザーの認証にウェブ ID プロバイダーを使用している場合は、このオペレーションを使用します。
-
AssumeRoleWithSaml – ユーザーの認証に Security Assertion Markup Language (SAML) を使用している場合は、このオペレーションを使用します。
次の例は、IAM ロールを設定するための CLI コマンドを示しています。ロールは、quicksight:GenerateEmbedUrlForAnonymousUser を有効にする許可を取得する必要があります。
aws sts assume-role \ --role-arn "arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy" \ --role-session-nameanonymous caller
assume-role オペレーションは、アクセスキー、シークレットキー、およびセッショントークンの 3 つの出力パラメータを返します。
注記
AssumeRole オペレーションを呼び出すときに ExpiredToken エラーが発生した場合は、以前の SESSION TOKEN がまだ環境変数に残っている可能性があります。以下の変数を設定することで、これをオフにします。
-
AWS_ACCESS_KEY_ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
次の例は、CLI でこれら 3 つのパラメータを設定する方法を示しています。Microsoft Windows マシンを使用している場合は、export の代わりに set を使用します。
export AWS_ACCESS_KEY_ID = "access_key_from_assume_role" export AWS_SECRET_ACCESS_KEY = "secret_key_from_assume_role" export AWS_SESSION_TOKEN = "session_token_from_assume_role"
これらのコマンドを実行すると、ウェブサイトにアクセスしているユーザーのロールセッション ID が embedding_quicksight_visual_role/QuickSightEmbeddingAnonymousPolicy に設定されます。ロールセッション ID は、role-arn の役割名と role-session-name 値で構成されています。各ユーザーに一意のロールセッション ID を使用すると、各訪問ユーザーに適切なアクセス許可が設定されます。また、各セッションを別個に保ちます。ロードバランシングなどのウェブサーバーの配列を使用していて、セッションが別のサーバーに再接続されると、新しいセッションが開始されます。
ビジュアルの署名付き URL を取得するには、アプリケーションサーバーから generate-embed-url-for-anynymous-user を呼び出します。これは埋め込み可能なヴィジュアルの URL を返します。次の例で、ウェブポータルまたはアプリケーションに匿名で訪問するユーザーのサーバー側呼び出しを使用して、埋め込みビジュアルの URL を生成する方法を説明します。
aws quicksight generate-embed-url-for-anonymous-user \ --aws-account-id111122223333\ --namespacedefault-or-something-else\ --session-lifetime-in-minutes 15 \ --authorized-resource-arns '["dashboard-arn-1","dashboard-arn-2"]' \ --allowed-domains '["domain1","domain2"]' \ --session-tags '["Key":tag-key-1,"Value":tag-value-1,{"Key":tag-key-1,"Value":tag-value-1}]' \ --experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id,SheetId=sheet_id,VisualId=visual_id}}'
このオペレーションの使用に関する詳細については、GenerateEmbedUrlForAnonymousUser を参照してください。これと他の API オペレーションは、独自のコードで使用できます。
ステップ 3: ヴィジュアルの URL を埋め込む
| 適用先: Enterprise Edition |
| 対象者: Amazon QuickSight デベロッパー |
以下のセクションで、ステップ 2 のビジュアル URL を、ウェブサイトまたはアプリケーションページに埋め込むための、QuickSight Embedding SDK
-
HTML ページにビジュアルを配置します。
-
このビジュアルにパラメータを渡します。
-
アプリケーションに合わせてカスタマイズされたメッセージでエラー状態を処理します。
GenerateEmbedUrlForAnonymousUser API オペレーションを呼び出して URL を生成し、アプリケーションに埋め込みます。この URL は 5 分間有効で、得られたセッションは 10 時間有効です。API オペレーションは、シングルサインオンセッションを有効にする、認可 (auth) コード付きの URL を提供します。
以下に、generate-embed-url-for-anonymous-user からのレスポンスの例を示します。この例の quicksightdomain
//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://quicksightdomain/embed/12345/dashboards/67890/sheets/12345/visuals/67890...", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
QuickSight Embedding SDK
埋め込みビジュアルをホストするドメインは、 Amazon QuickSight サブスクリプション用に承認されたドメインのリストである許可リストに含まれている必要があります。この要件は、未承認のドメインが埋め込みのビジュアルおよびダッシュボードをホストしないようにすることで、データを保護します。埋め込みヴィジュアルのためのドメインの追加については、「QuickSight API を使用して実行時にドメインをリストに追加することを許可する」を参照してください。
次の例は生成された URL の使用方法を示しています。このコードはアプリケーションサーバーにあります。
<!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const embedVisual = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext({
onChange: (changeEvent, metadata) => {
console.log('Context received a change', changeEvent, metadata);
},
});
const frameOptions = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: '#experience-container',
height: "700px",
width: "1000px",
onChange: (changeEvent, metadata) => {
switch (changeEvent.eventName) {
case 'FRAME_MOUNTED': {
console.log("Do something when the experience frame is mounted.");
break;
}
case 'FRAME_LOADED': {
console.log("Do something when the experience frame is loaded.");
break;
}
}
},
};
const contentOptions = {
parameters: [
{
Name: 'country',
Values: ['United States'],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'CONTENT_LOADED': {
console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
break;
}
case 'ERROR_OCCURRED': {
console.log("Error occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="experience-container"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<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
から最新の QuickSight Embedding SDK バージョンをダウンロードします。 -
JavaScript の依存関係の
npmを使用する場合、次のコマンドを実行してダウンロードおよびインストールします。npm install amazon-quicksight-embedding-sdk
