Amazon QuickSight の埋め込み機能でビジュアルだけ埋め込めるようになりました

いわさです。

QuickSight では作成したダッシュボードを外部 Web サイトへ埋め込み出来る機能があります。
埋め込みを行うためには API を使って埋め込み用の URL を発行する必要があります。

その API で本日からダッシュボードではなく、ビジュアルも指定出来るようになりました。

QuickSight では次の画像のようなダッシュボードを構成する一要素を「ビジュアル」と呼んでいます。

厳密にはシートという概念も存在しています。
ダッシュボードの中に複数のシートがあって、シートの中に複数のビジュアルが配置されています。

どのバージョンから利用出来るのか

AWS CLI ではv1.25.60から利用出来るようになっています。

• api-change:quicksight: Added a new optional property DashboardVisual under ExperienceConfiguration parameter of GenerateEmbedUrlForAnonymousUser and GenerateEmbedUrlForRegisteredUser API operations. This supports embedding of specific visuals in QuickSight dashboards.

埋め込みダッシュボード機能は匿名ユーザー用のGenerateEmbedUrlForAnonymousUserと、ユーザー ARN を指定するGenerateEmbedUrlForRegisteredUserの 2 つが用意されていて、そのどちらでも利用することが出来るようになっています。

ただし、本日時点では AWS CLI v2 ではまだ使えません。
CLI や SDK を利用する場合はバージョンにご注意ください。

ダッシュボード埋め込みの使い方

ダッシュボード埋め込みの使い方は前述の記事で行っているのですが、違いをこの記事内でわかるようにするために軽く解説します。
ダッシュボード埋め込み用の API へ以下のパラメータをexperience-configurationとして渡します。

hoge.json

{
    "Dashboard": {
        "InitialDashboardId": "23269de0-bd37-4176-b970-5089351c235f"
    }
}

そうすると、その埋め込み要素が含まれる外部から利用可能な URL が払い出されるので、通常は iframe などを使って Web サイトへ埋め込みを行います。

% aws quicksight generate-embed-url-for-registered-user --aws-account-id 123456789012 --user-arn arn:aws:quicksight:ap-northeast-1:123456789012:user/default/cm-hoge/cm-hoge --experience-configuration file://hoge.json --allowed-domains "http://localhost:5250" --profile hoge
{
    "Status": 200,
    "EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embed/a27b478eb265428f9b4fb918d0da7374/dashboards/23269de0-bd37-4176-b970-5089351c235f?code=AYABeCCbXkMkOQG4ABI0Vq7HNsAAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHh19lpIdHJLvWmpW7433A8711o_o_2vfnBuxyXbJJdfkwHs53L5sQPhiQkRlZyYHMPnAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQM2W08iEhlj8PB7X0jAgEQgDvPfU4SxTNY1R4MzhV8bYQPiQMtFQjIXK-J9ZCNXuPmCxwkYNSYa7V4kZFSrRZ59yeaS8lGnl2m_MIOiAIAAAAADAAAEAAAAAAAAAAAAAAAAAAozCVSTilfDtpv_kXQRo8m_____wAAAAEAAAAAAAAAAAAAAAEAAACbNIYTIcQPiPv7vL5rn1QKJjl9LgtUh33axAIjL3ts42ekjL3-ElrVgcTFY5rix11tyulwnkl3R7nktNmIjtByAeHCm2bDEHkyLAYSReKuExSI6pd843F1y6w9anPkag8uJe9DlsfLXjMZlZJT1jE0xD9sW-GCWoPD6KZTmXoA4-La705Ud46CTbfWizTDd8kbVzqaEsde64a4OhYOD0N2EVDe_hJ-seDjI5ev&identityprovider=quicksight&isauthcode=true",
    "RequestId": "feda10c3-c2c3-4422-8644-417eef3609e0"
}

以下は ASP.NET Core MVC のデフォルトのHome/Index.cshtmlで iframe で埋め込んだものになります。
メニューやQuickSight Hogeというタイトルテキストは Razor 側で自分で描画しているもので、QuickSight は関係のない部分です。

このように QuickSight で可視化したものを外部 Web サイトで利用することが出来る有用な機能でした。
しかし、今まではダッシュボード全体を埋め込む必要があり、一要素であるビジュアルのみを利用することは出来ませんでした。

ビジュアルを埋め込んでみる

ダッシュボードを埋め込む際には、DashboardIdが必要でした。
これは ダッシュボード表示時の URL などからもすぐ確認することが出来ました。

ビジュアルを埋め込む際には、それに加えてシートの ID とビジュアルの ID が必要です。
URL から確認は出来ませんが、GUI の場合だと以下から確認することが出来ます。

匿名ユーザー用の埋め込みコードと、個別のオブジェクトの ID を取得出来る様になっています。
匿名ユーザー用埋め込みコードについては前提として、リーダーセッションキャパシティを使う必要があります。

上記で取得した ID を使い、以下のようにexperience-configurationを構成して見ましょう。

hoge-visual.json

{
    "DashboardVisual": {
        "InitialDashboardVisualId": {
            "DashboardId": "23269de0-bd37-4176-b970-5089351c235f",
            "SheetId": "23269de0-bd37-4176-b970-5089351c235f_f89e437b-b254-45da-8772-3760051d3ce4",
            "VisualId": "23269de0-bd37-4176-b970-5089351c235f_f363c336-053e-4837-bdec-2e1f8d13c72c"
        }
    }
}

% aws-v1 quicksight generate-embed-url-for-registered-user --aws-account-id 123456789012 --user-arn arn:aws:quicksight:ap-northeast-1:123456789012:user/default/cm-hoge/cm-hoge --experience-configuration file://hoge-visual.json --allowed-domains "http://localhost:5250" "https://classmethod.jp" --profile hoge
{
    "Status": 200,
    "EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embed/25aa1c21f3404b6ab0ca78b80ae6e7e6/dashboards/23269de0-bd37-4176-b970-5089351c235f/sheets/23269de0-bd37-4176-b970-5089351c235f_f89e437b-b254-45da-8772-3760051d3ce4/visuals/23269de0-bd37-4176-b970-5089351c235f_f363c336-053e-4837-bdec-2e1f8d13c72c?code=AYABeEs0NvcKbiZBiJYYWY0vhFIAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHh19lpIdHJLvWmpW7433A8711o_o_2vfnBuxyXbJJdfkwEFX1cts10PHOo939QEcoSnAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMp8J5tdbpJZEuh-POAgEQgDtNebIySCbsnNWKvvcQuG0epAdlWJpy7OwTTBm5rH5Y5NAIMmERcQOCMQLasujzt9VSwNXnX_ROKXRZhAIAAAAADAAAEAAAAAAAAAAAAAAAAABEdUoDsU1LsIQC4C-tL84d_____wAAAAEAAAAAAAAAAAAAAAEAAACbB8Xtk1FBpVHj5VMeVq5yrnf_q0FrsPRyYWGycqaARd_jf0I1jePMt5-TaE8nDLAdfZyzuiVz0vpyj0cxfUiHUFC5cgzd3EZJRK06aThbqSubJM8mjLWByUFT63RIyKjHZ38oE9K1Lj3AsFOS__rFD3ngTXrhH_hxnX58LrpiRFhhw3z01eNHVDFG2vozcpQWGwbL65wx1XdFW-RqSeqgQSzCr5wJdTcwBIM0&identityprovider=quicksight&isauthcode=true",
    "RequestId": "ebadd654-536d-4414-8b45-3520db27c38a"
}

AWS CLI v1 だとallowed-domainsが 1 つだとエラーが出るようでしたので、クラスメソッドのホームページをダミーに追加しています。

発行された URL を先ほどのダッシュボード埋め込みのものと差し替えてみましょう。

良いですね。ビジュアルだけが表示出来ました。

さいごに

本日は Amazon QuickSight の埋め込み機能でビジュアルだけ埋め込めるようになっていたので早速使ってみました。

この機能は、小さいアップデートだからなのか AWS の最新情報サイトでもアップデートとして取り上げられていませんでした。
ただ、個人的には地味ですがなかなかアツいアップデートなのではないかなと思っています。

埋め込み用にわざわざダッシュボード作成せずに、既存のダッシュボードから必要なビジュアルだけ選択することが出来るようになりました。