QuickSightで作成したダッシュボードをWebサイトに埋め込んでみた

こんにちは、中根です。
AWSのBIサービスであるQuickSightでは、作成したグラフなどのダッシュボードをWebサイトに埋め込んで閲覧・分析することが可能です。

今回は、ダッシュボードの作成からWebサイトへの埋め込みまでの手順を紹介します。
QuickSightへのデータの取込については、以下の記事で紹介しています。

ダッシュボードの作成

まず、Webサイトに埋め込むためのダッシュボードを作成します。
以下のダッシュボードは、従業員情報に関するサンプルデータを使用して作成しています。
今回は、従業員数を地域別で色分けした円グラフを作成しました。

QuickSight, ダッシュボード

画面左上のフィールドリストには、取り込んだデータの項目名が表示されています。
そして、ビジュアルタイプでは作成したいグラフや表の種類を選択することができます。

上の画像のような円グラフを作成するには、画面左下のビジュアルアイプから円グラフを選択します。
画面上部のフィールドウェルのグループ/色に、地域を表す「Region」を追加することで、従業員数を地域別で色分けすることが可能です。

ダッシュボードの公開

ダッシュボードの埋め込みを行うには、作成したダッシュボードを公開する必要があります。
ダッシュボードの作成画面右上の「共有」から、「ダッシュボードの公開」をクリックすることで、ダッシュボードを公開し、埋め込みができるようになります。

QuickSight, ダッシュボードの公開

「新しいダッシュボードとして公開」の欄に、公開するダッシュボードに付ける名前を入力して、「ダッシュボードの公開」をクリックします。

QuickSight, ダッシュボードの公開

ダッシュボードの埋め込み準備

QuickSightのダッシュボードをWebサイトに埋め込むには、埋め込み先のWebサイトのドメインをQuickSight側に設定する必要があります。

QuickSightのコンソール画面右上のユーザー名をクリックし、「QuickSightの管理」を選択します。

QuickSightの管理

左のメニューから「ドメインと埋め込み」を選択し、埋め込み先のWebサイトのドメインを設定します。
（設定できるドメインはhttpsドメインのみとなっています。）

QuickSight, 埋め込みドメイン

Webサイトへの埋め込み

ここから実際にダッシュボードをWebサイトへ埋め込む手順に入ります。
今回はダッシュボードをWebサイトに埋め込む方法として、以下の2つの方法を紹介します。

  1. 　ワンクリック埋め込み
  2. 　認証コード付きURLを使用した埋め込み

ワンクリック埋め込み

ワンクリック埋め込みは、QuickSight Enterprise Editionでサポートされている機能です。
先ほど公開したダッシュボードを開いて、画面右上の共有から「ダッシュボードの共有」をクリックします。

QuickSight, ダッシュボードの共有

ダッシュボードの共有画面で、「埋め込みコードをコピー」をクリックすることでダッシュボードの埋め込み用のコードがクリップボードに保存されます。

QuickSight, 埋め込みコードをコピー

クリップボードに保存された埋め込み用コードを、HTMLに貼り付けることでダッシュボードを埋め込むことができます。

<body>
    <div class="wrapper">
        <h1 class="page-title">ワンクリック埋め込み</h1>
　　　　　　<!-- 埋め込み用コード -->
            <iframe
                width="960"
                height="720"
                src="https://ap-northeast-1.quicksight.aws.amazon.com/×××××××××××××">
　　　　　　</iframe>
    </div>
</body>

ダッシュボードを埋め込んだWebサイトにアクセスすると、QuickSightのサインイン画面が表示されるため、ユーザー名とパスワードを入力してサインインします。

QuickSight, サインイン画面

サインインに成功すると、Webサイトに埋め込まれたダッシュボードが表示されます。

Quicksight, ダッシュボードのWebサイト埋め込み

認証コード付きURLを使用した埋め込み

先ほど紹介したワンクリック埋め込みでは、ダッシュボードを表示する際にユーザー名とパスワードを入力する必要があるため、QuickSightのユーザーアカウントを所有していないと閲覧することができませんでした。
そこで、認証コード付きURLを使用した埋め込みを行うことで、ユーザー名とパスワードの入力が不要になり、ユーザーアカウントを所有していなくても閲覧が可能となります。

今回は、AWS CLIを使用して認証コード付きURLの取得を行います。
実際のコマンドは以下のようになります。

aws quicksight get-dashboard-embed-url \
  --aws-account-id アカウントID \
  --dashboard-id ダッシュボードID \
  --identity-type QUICKSIGHT \
  --user-arn arn:aws:quicksight:ap-northeast-1:×××××:user/default/×××××

[解説１] ダッシュボードID

ダッシュボードIDとは、埋め込んだWebサイトに最初に表示されるダッシュボードを表します。
ダッシュボードIDは、QuickSightの管理画面からダッシュボードを開いた際の、URLの最後の部分にあたります。

https://ap-northeast-1.quicksight.aws.amazon.com/sn/dashboards/ダッシュボードID

[解説２] 結果

結果として以下のような値が返ってきます。

{
    "Status": 200,
    "EmbaUrl": "https://ap-northeast- 1.quicksight.aws.amazon.com/embed/497abbc000984ca18c329f37dc0a115e/dashboards/××××××&identityprovider=quicksight&isauthcode=true",
    "RequestId": "82ecd56c-××××××"
}

結果に含まれる「EmbaUrl」が認証コード付きURLとなります。

続いて、取得した認証コード付きURLをHTMLに埋め込んでいきます。
先ほどのワンクリック埋め込みのURLを、取得した認証コード付きURLと入れ替えます。

<body>
    <div class="wrapper">
        <h1 class="page-title">認証コード付きURL埋め込み</h1>
            <iframe
                width="960"
                height="720"
                src="https://ap-northeast-1.quicksight.aws.amazon.com/embed/497abbc000984ca18c329f37dc0a115e/dashboards/××××××&identityprovider=quicksight&isauthcode=true">
　　　　　　</iframe>
    </div>
</body>

以下のようにダッシュボードを埋め込むことができます。

認証コード付きURL埋め込み

ユーザー名とパスワードを入力することなく、ダッシュボードが閲覧可能であることが確認できました！

さいごに

今回は、QuickSightで作成したダッシュボードをWebサイトに埋め込む手順について紹介しました。
認証コード付きURLを生成する方法として、CLIコマンド以外にもPythonやNode.js用のAPIも用意されているので、Lambdaなどを使用するという方法もあります。

AWSQuickSight

Posted by yukiteru