![[アップデート] Amazon QuickSight の組み込みダッシュボードでユーザーごとの状態保持とブックマーク機能が使えるようになりました](https://devio2023-media.developers.io/wp-content/uploads/2022/08/amazon-quicksight.png)
[アップデート] Amazon QuickSight の組み込みダッシュボードでユーザーごとの状態保持とブックマーク機能が使えるようになりました
いわさです。
Amazon QuickSight では作成したダッシュボードを外部の Web アプリケーション上に組み込むことが出来ます。
組み込んだダッシュボードではリーダー向けに構築されたフィルターなどを使うことも出来ますし、操作に対する Undo/Redo の組み込み UI も提供されています。
外部組み込みの際には、匿名ユーザー向けの組み込み（generate-embed-url-for-anonymous-user）と QuickSight リーダーセッションを使った組み込み（generate-embed-url-for-registered-user）の 2 種類の方法があります。
先日のアップデートで、そのうちの QuickSight リーダーセッションを使った組み込み方法で状態保持とブックマーク機能がサポートされたとのこと。
状態保持フラグは以前 QuickSight のどこかで見たような記憶もあるのですが、アナウンスによると今回のアップデート機能のようです。（気の所為か）
この記事ではいつか作成していた以下のダッシュボードの埋め込み URL を発行して状態保持フラグの挙動を確認してみたいと思います。
また、ブックマーク機能については、どうやら今回のアップデートに併せて Embedding SDK が Version 2.2 に更新されているようで、こちらでブックマーク機能を展開することが出来るというもののようです。
こちらも試してみました。
状態保持フラグ
従来どおりgenerate-embed-url-for-registered-userで組み込み用の URL を発行するのですが、次のようにダッシュボードの構成オプションでStatePersistenceを指定します。
% cat dashboard.json
{
"AwsAccountId": "123456789012",
"UserArn": "arn:aws:quicksight:ap-northeast-1:123456789012:user/default/HogeUser1",
"ExperienceConfiguration": {
"Dashboard": {
"InitialDashboardId": "912c7f7b-94f6-46ef-844f-25aa69d6ec4e",
"FeatureConfigurations": {
"StatePersistence": {
"Enabled": true
}
}
}
}
}
% aws-v1 quicksight generate-embed-url-for-registered-user --cli-input-json file://dashboard.json
{
"Status": 200,
"EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embed/25e5a663ddb2473387ae24cceb731ad4/dashboards/912c7f7b-94f6-46ef-844f-25aa69d6ec4e?code=AYABeFP89h2Yy3kWfReYKBUbIVEAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHgeDGL3XAnX5chwrubXLtqmn-xwPT7Th-AyeZ72nfHdvwHDA3aeyTKmYsCPrF8219l2AAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMTYR8Hz1-BIjhq4byAgEQgDso3SijKT0yQaLGcG84a2SL1PK6vz7TkNu23mMiCG47G-rrYmfDqQrIWXFi7MZKNgBBhd-dL9qd6asFFgIAAAAADAAAEAAAAAAAAAAAAAAAAAAuRKd___ynUhHoHDktDaxX_____wAAAAEAAAAAAAAAAAAAAAEAAACb-odBq6m-14lfcoorUA6KityMTdB9N7Ot28L5zr-TE3dWD1UHTOIdfjFH1nNdyuxrwN2Gy7PQ0UebZXqKpAY5iskHi14h80ywN0CIXZvQ_3RBx0h-M9saQr0jFcXWeQdhn95H-TtBWuOVkukWeThVxmh-QytJy14FLYyUKw0keYrLxYk02eIORSdei9YPyeHBwnPAB2ttrd5p4LhARo5aBSbyPx3Yjq1ZnbdI&identityprovider=quicksight&isauthcode=true",
"RequestId": "83abc8fe-3e04-4951-898b-e60779f23642"
}
次のようにダッシュボードが表示されるので、フィルターを操作してみます。
そして、同じ QuickSight ユーザーを指定して URL を発行し直してみます。
URL には有効期限が 5 分のトークンが含まれており、同じユーザーでも先程発行した URL とは異なります。
% aws-v1 quicksight generate-embed-url-for-registered-user --cli-input-json file://dashboard.json
{
"Status": 200,
"EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embed/99bd0c5c73a34e12b5f4e8e6c47d06e0/dashboards/912c7f7b-94f6-46ef-844f-25aa69d6ec4e?code=AYABeEK_dnzb5PNE0GkjYN-R16wAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHgeDGL3XAnX5chwrubXLtqmn-xwPT7Th-AyeZ72nfHdvwF3K6bKfn_KKCt9M9oY9wPhAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMLk12UVO1LcigS9ThAgEQgDtCLZLEUNc5qxH1AQW3i040BhOa5Y6m3A0Pc_A1Ay7WZbhj4uEbff0j2WFEeqbrWwUeOY8IIfA6lXiLgwIAAAAADAAAEAAAAAAAAAAAAAAAAAAXhc-iqVbhGgoyZMjUF2gR_____wAAAAEAAAAAAAAAAAAAAAEAAACbAYu4Dbuxc7bBVUj94Hm8eEFLAqfBIP6yvWrMZHlFKk09Ll9UPyNQsTKRBWTkwWCFn2Zx-4mCHyt_FbazsH-kabriT8l7EAKhjq70bIus9jPhXwmmpyPl164yUR760k-_dGaqy1Ji7ECZPjvWRFK_YR_4VaCyHkgzKH12rFGlbmrV3E1DSC2Q1Lnl8RtWK3Ht_px3N2L-NoxEQ8rJtia5aGd90kkVHPKpG_gf&identityprovider=quicksight&isauthcode=true",
"RequestId": "50adcab3-76b7-472f-9cc5-e52bb5eb282a"
}
別の URL でまたアクセスしてみると、次のように前回終了した時点のフィルター状態が保持されていることがわかります。
別ユーザーのセッションでアクセス
一方で、別の先程と別の QuickSight ユーザーを指定して URL を生成してみると、フィルター状態がデフォルトの状態となっています（あるいは同一ユーザーで操作済みであれば最後にアクセスした状態）
同一ユーザーだが StatePersistence を OFF
StatePersistenceがfalseの場合は従来の挙動になります。
一度発行された URL でフィルター操作をして終了します。
その後 URL を再発行してアクセスしてもデフォルトの選択状態に戻っていました。先程と違って状態保持出来ていないですね。
ブックマーク
今回のアップデートではダッシュボードを外部埋め込みした時にも、ブックマーク機能を提供出来るようになりました。
従来 QuickSight へアクセスした際にリーダーが利用出来ていたブックマーク機能です。
先程の状態保持フラグとは別にブックマークフラグも追加されています。
{
"AwsAccountId": "123456789012",
"UserArn": "arn:aws:quicksight:ap-northeast-1:123456789012:user/default/HogeUser1",
"ExperienceConfiguration": {
"Dashboard": {
"InitialDashboardId": "912c7f7b-94f6-46ef-844f-25aa69d6ec4e",
"FeatureConfigurations": {
"StatePersistence": {
"Enabled": true
},
"Bookmarks": {
"Enabled": true
}
}
}
}
}
こちらを先程と同じように URL を生成して直接アクセスしてみたのですが、どうやら直接アクセスした場合ではこのフラグは機能しないようです。
結論としては次の QuickSight Embedding SDK でも今回のアップデートにあわせた機能オプションが追加されており、URL 生成と組み込み SDK で併せて有効化することで使うことが出来るようになったようです。
参考までに、Embedding SDK の次のコミットでサポートされました。
まずはブックマーク設定なし時の挙動を確認してみます。
次のように最低限の組み込みオプションを設定した状態でホスティングし、HTTP アクセスしてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Document</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.2.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const onloadDashboard = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext();
const frameOptions = {
url: "https://ap-northeast-1.quicksight.aws.amazon.com/embed/b9ca4fe256bf4e14a5f06c85b0d0411f/dashboards/912c7f7b-94f6-46ef-844f-25aa69d6ec4e?code=AYABeGmZAwGclujt44LdMUY2kHcAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHgeDGL3XAnX5chwrubXLtqmn-xwPT7Th-AyeZ72nfHdvwGuAqQo9pF5jY4bpvU7ML3VAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMJp-6I5xIOp7IebHMAgEQgDtBMSqBWZ5o9BGMb95gV01B-TPlSzDJCOCUd1bkyG13T3jJskVNEkD8Kpjik7LhSrI2r7KdMfeHwSebwAIAAAAADAAAEAAAAAAAAAAAAAAAAABwAmYyyctRbksHfYTHefBB_____wAAAAEAAAAAAAAAAAAAAAEAAACbdI9w6pP088SMQcVhjBSar9LGAOfsr6JXU1GFlq5Ru33CKiFGqU7Y6EKrgJmYrfwl02TgRIvls_ZjLlHimcNowNQw3Gqu5hx4Z-FGF1P0GdJZ-jLSaKhxSQd1Cxku6SPethKPQaG3bScsFPHgiH3SHSEm9WZuX0QZsmEAuuN8Otk3cgU8djPhWJbL3MoLvr8U1dSf_DPqdLXExb4w3tCBCofMx7OpFtW_pSGp&identityprovider=quicksight&isauthcode=true",
container: '#quicksight-container',
height: "500px",
width: "500px"
};
const contentOptions = {
locale: "ja-JP",
toolbarOptions: {
undoRedo: true,
reset: true
}
};
const embeddedVisualExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);
};
</script>
</head>
<body onload="onloadDashboard()">
<div id="quicksight-container"></div>
</body>
</html>
この時点では特にブックマークらしきインターフェースは見当たりませんね。
続いて、次のように toolbarOptions で bookmarks を有効にしてみます。
:
const contentOptions = {
locale: "ja-JP",
toolbarOptions: {
undoRedo: true,
reset: true,
bookmarks: true
}
};
:
今度はブックマークアイコンが表示されました。
選択してみると、右側にブックマークペインが表示されます。
デザインや利用可能な機能などは QuickSight コンソールからアクセスしてブックマーク機能を使った場合と全く同じ操作感ですね。
ここではフィルター操作を行ったいくつかのパターンをブックマーク化しておきました。
同一ユーザーを使って URL を再発行してアクセスしてみると次のように作成したブックマークが保持されています。
選択すると期待どおりのフィルター状態が展開されました。
なお、別ユーザーを使って URL を発行した場合は、先程のユーザーで作成したブックマークが表示されませんでした。
先程の状態保存機能と併せて、ブックマークデータも状態として保存されている様子です。
ちなみに、状態保持フラグを OFF でブックマーク機能だけ ON にすることは出来ません。（逆は出来る）
次のように URL 発行時にエラーとなります。
% cat dashboard.json
{
"AwsAccountId": "123456789012",
"UserArn": "arn:aws:quicksight:ap-northeast-1:123456789012:user/default/HogeUser1",
"ExperienceConfiguration": {
"Dashboard": {
"InitialDashboardId": "912c7f7b-94f6-46ef-844f-25aa69d6ec4e",
"FeatureConfigurations": {
"StatePersistence": {
"Enabled": false
},
"Bookmarks": {
"Enabled": true
}
}
}
}
}
% aws-v1 quicksight generate-embed-url-for-registered-user --cli-input-json file://dashboard.json
An error occurred (InvalidParameterValueException) when calling the GenerateEmbedUrlForRegisteredUser operation: Please make sure state persistence is not disabled when bookmarks is enabled.
さいごに
本日は Amazon QuickSight の組み込みダッシュボードでユーザーごとの状態保持とブックマーク機能が使えるようになったので使ってみました。
今回のアップデートでは主に Embedding SDK を使った組み込みを行っている場合にリーダーの利便性を向上するというピンポイントなアップデートですね。組み込み機能を使ってない人にはあまり関係のないアップデートだったかもしれないです。
ただ、2 ヶ月前 Embedding SDK の最新版を紹介したときが v2.0.0 で、それがいつのまにか v2.2.0 までアップデートされているので結構メンテナンスされている印象です。
私の周りではまだあまり見かけないのですが皆さん結構組み込み機能を使われているのでしょうか。
![[アップデート] Amazon QuickSight へロゴやテーマカラーを設定するための「ブランド管理機能」が追加されました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-19e77b9a51519e08b94d0f688c125729/4f439c75e1ee56c70e315fa46fa45f81/amazon-quicksight)
