Amazon Web Services ブログ

Amazon QuickSight の新しいワンクリック埋め込み機能で、インタラクティブなダッシュボードをアプリやポータルに数分で埋め込む

この記事は “Embed interactive dashboards in your apps and portals in minutes with Amazon QuickSight’s new 1-click embedding feature” を翻訳したものです。

Amazon QuickSight は、フルマネージド型のクラウドネイティブビジネスインテリジェンス (BI) サービスです。QuickSightではデータへの接続、インタラクティブなダッシュボードの作成、数万人のユーザーとの共有といったことを簡単に、QuickSight アプリケーション内で直接、もしくはウェブアプリケーションやポータルに埋めんだ状態で行うことができます。

QuickSight Enterprise Edition では、ワンクリック埋め込みのサポートを開始しました。この機能により、リッチでインタラクティブなダッシュボードをアプリケーション、Wiki、ポータルに対し、埋め込み API をコールすることなく埋め込むことができるようになります。権限のあるエンドユーザーは、サーバーの導入やインフラの準備なしに、これらのダッシュボードにすぐにアクセスできます。ワンクリック埋め込みにより、エンドユーザーに対してインサイトを提供することが数分で可能になります。

この記事では、このソリューションを実装する手順、エンドユーザーエクスペリエンス、およびサンプルユースケースについて説明します。

ソリューションの概要

このソリューションを実装するために、次の手順に沿って説明します。

  1. ダッシュボードに対するアクセス権の付与 (UI または API を使用)
  2. QuickSight ダッシュボードを埋め込む先のドメインを許可リストに登録
  3. ダッシュボードの埋め込み

ステップ 1: ダッシュボードのアクセス権を付与する

QuickSight ダッシュボードを作成したら、アクセスを有効にするため、ダッシュボードを開き、右上の共有アイコンを選択し、Share dashboard を選択します。

共有画面が開きます。デフォルトでは、QuickSight のダッシュボードは誰とも共有されておらず、所有者だけがアクセスできる状態になっています。次のスクリーンショットでは、ダッシュボードは admin-user1 (ダッシュボードの所有者) と共有されています (したがってアクセス可能)。

アカウント内でこのダッシュボードを共有したい個々のユーザーまたはグループを検索できます。たとえば、次のスクリーンショットを見てください。

この例では、ダッシュボードの所有者はメールアドレスがsonで始まるユーザを検索し、3 つの選択肢がリストされました。リストされたユーザーは、アカウント内の作成者または閲覧者です。各検索結果の隣にある ADD を選択すると、ユーザーのロール (作成者または閲覧者) に基づいて、権限レベル (表示者または共同所有者) を選択し、ダッシュボードにアクセスするユーザーとして追加できます。ユーザーのロールが作成者であれば、表示者または共同所有者としてこのダッシュボードに追加することができます。表示者はダッシュボードを表示、エクスポート、印刷できます。共同所有者は、表示者が実行できるすべてのアクションに加え、ダッシュボードを編集、削除、共有したり、このダッシュボードから新しいダッシュボードを作成したりすることもできます。閲覧者は表示者としてのみ追加できます。ダッシュボードの所有者は、同様の手順でグループを検索してダッシュボードに追加することが可能です。

次のスクリーンショットは、このダッシュボードを共有するために追加した全てのユーザーを表示しています。

次のスクリーンショットに示すように、Everyone in this accountを有効にすることで、QuickSight アカウントのすべてのユーザーに対しダッシュボードへのアクセスを許可することも可能です。

このオプションを有効にすると、ダッシュボードへのアクセスを明示的に付与されていないユーザでも、Share Dashboard ページの上部にある Copy オプションで取得したリンク経由、あるいは埋め込まれたダッシュボードに対してアクセスできるようになります。このアカウント全体のダッシュボードアクセスを取り消すには、同じトグルを無効にします。

また、このオプションを有効にすると、次のスクリーンショットに示すように、所有者はすべてのユーザーの QuickSight アカウントにこのダッシュボードを表示できるようにするオプションを利用できます。このオプションを有効にすると、アカウントのすべてのユーザーの Dashboards リストにダッシュボードが表示されるようになります。これを無効にすると、リンクがある場合や埋め込まれている場合はダッシュボードにアクセスできますが、ホーム画面のダッシュボードリストには表示されなくなります。

ステップ 2: 埋め込み先のドメインを許可リストに登録する

ダッシュボードを埋め込むドメインは、QuickSight の許可リストに登録されている必要があります。手順については、埋め込みユーザー用のドメイン追加を参照してください。

ステップ 3: ダッシュボードを埋め込む

ダッシュボードへのアクセスを設定したら、Copy embed code を選択すると、そのダッシュボードの埋め込みコードがコピーされます。このコードは、内部アプリケーションに追加されるとダッシュボードを埋め込みます。

コピーされた埋め込みコードは次のコードのようになります (quicksightdomain は、QuickSight アカウントへのアクセスに使用する URL です)。

    <iframe
        width="960"
        height="720"
        src="https://quicksightdomain/sn/embed/share/accounts/
        <accountid>/dashboards/<dashboardid>">
    </iframe>

HTML ページにダッシュボードを埋め込む

ダッシュボードを HTML ページに埋め込むには、ダッシュボードを埋め込むページの HTML を開き、コピーした埋め込みコードを HTML コードに入力します。

それでは、組織における一般的な埋め込みシナリオをいくつか見てみましょう。

Google サイトにダッシュボードを埋め込む

Google サイトで内部アプリケーションを構築している場合、ダッシュボードを埋め込むには、Google サイトでページを開き、Insert そして Embed を選択します。ポップアップウィンドウが開き、URL または埋め込みコードの入力を求めるプロンプトが表示されます。Embed code を選択し、コピーした埋め込みコードをテキストボックスに入力します。

Google サイトに埋め込みをする場合には、https://googleusercontent.com(サブドメインを有効にする)、https://www.gstatic.com、https://sites.google.comの各ドメインを許可リストに登録するするようにしてください。

SharePoint サイトにダッシュボードを埋め込む

SharePoint サイト (テンプレートタイプは Publishing) を作成するときに、ダッシュボードを埋め込むことができます。New を選択して、新しいページを作成します。

Insert リボンの Embed Code を選択します。

表示されたポップアップに、コピーした埋め込みコードを挿入します。

独自の認証スキームを持つ Software as a Service (SaaS) アプリまたはポータルにダッシュボードを埋め込む場合、これらを引き続き使用して、ダッシュボードをユーザーにシームレスに提供できます。詳細については、 Embed multi-tenant dashboards in SaaS apps using Amazon QuickSight without provisioning or managing users を参照してください。

エンドユーザーエクスペリエンス

ダッシュボードをアプリケーションに埋め込むと、先の手順で有効にしたユーザーがそのダッシュボードにアクセスできるようになります。このセクションでは、QuickSight とのシングルサインオン (SSO) 統合を使用する場合と使用しない場合のユーザーエクスペリエンスについて説明します。

QuickSight で SSO 統合が有効になっている場合のエクスペリエンス

SSO が有効な場合、ユーザーがアプリケーションにアクセスすると、QuickSight にシングルサインオンされ、認証ポップアップは表示されません。ユーザーがダッシュボードにアクセスできる場合、ダッシュボードにデータが表示され、ダッシュボードを操作できます。ダッシュボードへのアクセス権がない場合は、ダッシュボードを表示する権限がないことを示すメッセージが表示されます。

次のスクリーンショットでは、ユーザーが SSO で認証され、ダッシュボードが表示されています。

Ping、Okta、Azure AD などの既存の ID プロバイダー (IdP) を使用している場合は、SP によって開始される SSO を設定できます。QuickSight で SSO を有効にする方法の詳細については、Amazon QuickSight での ID フェデレーションおよび Single Sign-On (SSO)の使用 および Amazon QuickSightのアクセスにOktaをフェデレーションする を参照してください。

QuickSight で SSO 統合が有効になっていない場合のエクスペリエンス

SSO 統合がない場合、エンドユーザーがアプリケーションにアクセスすると、QuickSight で認証するためのポップアップとともに、埋め込みダッシュボード (認証が必要な状態) が表示されます。ユーザーが QuickSight の認証情報を入力すると、ポップアップが閉じ、ダッシュボードがアプリケーション上で表示されます。ユーザーがダッシュボードにアクセスできる場合、ダッシュボードにデータが表示され、そのデータを操作できます。

次のスクリーンショットは、注文の週次出荷状況を追跡するダッシュボードを内部 SharePoint サイトに埋め込んだ例です。ユーザーは認証を求められています。

以下は認証のポップアップです。

ユースケース

このセクションでは、WonderShoes という名前の靴小売業者である小規模企業のユースケース例を紹介します。彼らは最近、テレコマース（電話チャネルでの販売）に進出し、靴の購入に関心のある顧客からの電話を受けるために社内にコールセンターを設立しました。

社内サイトにダッシュボードを埋め込んで、通話量、その他の通話関連の指標、日常業務で測定した売上指標を追跡しています。ダッシュボードを構築し、すべての内部ユーザーがこのダッシュボードにアクセスできるようにしました。ワンクリック埋め込み機能により、社内アプリケーションのページに次の埋め込みコードが埋め込まれています。

<iframe
        width="800" 
        height="600" 
        src="https://us-east-1.quicksight.thinkwithwp.com/sn/embed/share/
        accounts/ACCOUNTID/dashboards/DASHBOARDID> 
</iframe>

次のスクリーンショットは、ダッシュボードが埋め込まれた内部アプリケーションと認証プロンプトを示しています。

ユーザーが認証されると、ダッシュボードが表示されます。ユーザーが有効な認証 Cookie を使用してサイトに戻ってきた場合、再度認証が要求されず、ダッシュボードが表示されます。

この機能により、WonderShoes はダッシュボードをすばやく埋め込み、社内の全従業員が組み込みダッシュボードにアクセスできるようになりました。これにより、豊富なインサイトを収集し、データドリブンなビジネス上の意思決定を迅速に行い、新しいテレコマース事業部門を成長させることができます。

まとめ

ワンクリックのエンタープライズ埋め込みにより、企業はリッチでインタラクティブな QuickSight ダッシュボードをすばやく簡単に埋め込むことができます。これにより、ボタンをクリックするだけで、重要な指標やデータインサイトをアカウント内のすべてのユーザーと共有できます。インフラストラクチャの設定や管理は不要で、数百万人のユーザーにも対応できます。また、QuickSight は、ユーザー管理を必要とせずに SaaS アプリへの埋め込みもサポートしています。これについて詳しくは、こちらのブログ記事をお読みください。

QuickSight の埋め込み分析に関する最新情報については、Amazon QuickSight ユーザーガイドのドキュメント履歴を参照してください。

翻訳はソリューションアーキテクトの 吉成 貴裕 が担当しました。原文はこちらです。

著者について

Kareem Syed-Mohammed は Amazon QuickSight のプロダクトマネージャーです。彼は組み込み分析、API、開発者エクスペリエンスに重点を置いています。QuickSight 以前は、AWS マーケットプレイスと Amazon リテールに PM として勤務していました。Kareem は開発者としてキャリアをスタートし、その後、コールセンターテクノロジー、ExpediaのLocal Expertおよび広告でPMを務めました。彼はしばらくの間、McKinsey and Company のコンサルタントとして働いていました。

 

 

Kenz Shane は Amazon QuickSight の UI デザイナーです。製品のビジネスインテリジェンスユーザーエクスペリエンス (BIUX) チームの一員として、顧客中心のビジュアルインターフェイスの作成を専門としています。それ以前は、Dell の Experience Innovation Group に勤務し、エンタープライズグレードのユーザーインターフェイス (UI) 設計、アクセシブルなデータ視覚化、および設計システムの専門家として働いていました。Kenzは、Nordstrom、Columbia Hospitality、AIGA、Warner Bros. など、複数の業界のクライアントにアートディレクションとデザインを提供してきました。

 

Raji Sivasubramaniam は AWS のスペシャリストソリューションアーキテクトで、アナリティクスに重点を置いています。Raji は、世界中の Fortune 500 およびFortune 100 企業を対象とした、エンドツーエンドのエンタープライズデータ管理、ビジネスインテリジェンス、および分析ソリューションの設計で20年の経験があります。マネージドマーケット、医師ターゲティング、患者分析など、幅広い医療データセットとの統合医療データと分析に関する豊富な経験を持っています。余暇には、ハイキング、ヨガ、ガーデニングを楽しんでいます。

 

Srikanth Baheti は、Amazon QuickSight の専門ワールドワイドシニアソリューションアーキテクトです。彼はコンサルタントとしてキャリアをスタートさせ、複数の民間組織や政府機関で働いていました。その後、PerkinElmer Health and Sciences & eResearch Technology Inc. に勤務し、トラフィックの多いウェブアプリケーション、AWS のサービスとサーバーレスコンピューティングを使用するレポートプラットフォーム用の高度にスケーラブルで保守可能なデータパイプラインの設計と開発を担当しました。