埋め込みコールバックアクションを使用して、アプリケーションと埋め込まれた Amazon QuickSight ダッシュボードおよびビジュアルとの間にシームレスなインタラクションを構築する

Amazon QuickSight はフルマネージドなクラウドネイティブ business intelligence (BI) サービスです。QuickSight のインターフェイス内でも、software as a service (SaaS) アプリケーションやウェブポータルに埋め込まれていても、データへの接続やインタラクティブなダッシュボードの作成、数万人のユーザーとのデータ、ダッシュボードの共有を簡単に行うことができます。QuickSight が組織全体の日々の意思決定に役立つインサイトを提供することで、エンドユーザーは、選択したアプリケーションの日常的なワークフローにシームレスに流入できる実用的なインサイトを期待しています。これにより、複数のプラットフォーム間でコンテキストを切り替えることなく、データドリブンな意思決定を行い、その決定に基づいてアクションを実行できるようになります。

QuickSight が埋め込みコールバックアクションのサポートを開始したことで、QuickSight のダッシュボード、ビジュアルを埋め込むお客様は、Embedding SDK の新機能を使用して、リーダー (閲覧者) 向けの次のようなユースケース (これらに限りません) を利用できるようになりました。

レコードへの後続の処理に用いるフラグの付与
ステークホルダーに対する重要なインサイトに関する通知の送信
書き戻しによる即時データ更新
ユーザーの操作を追跡し、設計や選択を改善する

本記事では、埋め込みコールバックアクションを使用して、アプリケーションと QuickSight の埋め込みダッシュボードおよびビジュアルとの間にシームレスなインタラクションを構築する方法を示します。

ソリューションの概要

埋め込みコールバックアクションにより、開発者はアプリケーションと QuickSight の埋め込みダッシュボードやビジュアルをより緊密に統合できます。まず、開発者は Embedding SDK の新しい関数を使用して 1 つ以上のビジュアルの上にデータポイントコールバックを登録することで、ビジュアル上でのエンドユーザーのインタラクティビティを監視するコードをアプリケーションに記述できるようになりました。登録後、リーダーが円グラフの特定のスライスや棒グラフの棒などのデータポイントをクリックすると、そのデータポイントに関連するデータの行がサードパーティーのアプリケーションに送信されます。その後、このデータをキャプチャ、処理、修正したり、アプリケーションの別の部分に渡したりすることができます。

機能の一部として追加された新しい SDK アクションとイベントは以下の通りです。これらの新しいアクションとイベントにより、アプリケーション開発者はこれらのアクション関数のいずれかを呼び出して、ダッシュボードビジュアル上のアクションを一覧表示、取得、追加、または削除できます。その後、これらのアクションが登録されると、イベントコールバックを使用して、ピボットテーブルのセル、棒グラフの棒、円グラフのスライスをクリックするなどのユーザー操作をイベントとして受信し、それらのデータポイントをキャプチャし、適切なワークフローを呼び出してこれらのデータポイントをさらに処理します。

新しい SDK アクションは次の通りです。

getSheetVisuals — 指定されたシートのビジュアルのリストを返す
getVisualActions, getActions — ダッシュボード上のビジュアルのアクションのリストを返す
addVisualActions, addActions — ダッシュボード上のビジュアル用の既存のアクションリストにアクションを追加する
removeVisualActions, removeActions — ダッシュボードのビジュアルからアクションを削除する
setVisualActions, setActions — ダッシュボード上のビジュアル用に既存のアクションを新しいアクションリストでオーバーライドする

新しい SDK イベントは次の通りです。

GET_VISUAL_ACTIONS — GetVisualAction を呼び出したときにレスポンスを受信した後に発行され、ビジュアルのカスタムアクションのリストが含まれます。
ADD_VISUAL_ACTIONS — AddVisualAction を呼び出したときにレスポンスを受信した後に発行され、ビジュアルにカスタムアクションを追加する際の成功またはエラーが含まれます。
CALLBACK_OPERATION_INVOKED — CallbackOperation によるカスタムアクションを含むビジュアルデータポイントをクリックすると表示されます。これには、データポイントとその他のイベント情報が含まれます。

これらのアクションはすべて、Set, Get, Add, Remove という形式の CRUD 操作をサポートします。これは、既存のアクションを使用したり、新しいアクションを作成したり、埋め込みダッシュボードで有効にしたくないアクションを削除したりする場合に役立ちます。

前提条件

本記事の内容は、以下の前提条件を満たす必要があります。

Enterprise Edition の QuickSight サブスクリプション
QuickSight Embedding SDK の最新バージョン

ユースケースの概要

架空の会社、AnyCompany を考えてみましょう。AnyCompany は、倉庫を管理し、業務効率を最適化できる倉庫管理システムを提供する大手フルフィルメントテクノロジー企業です。QuickSight とその埋め込み機能を使用して、データドリブンな体験をソフトウェアアプリケーションにシームレスに統合しています。これらの埋め込み機能は、QuickSight の機能をエンドユーザーにもたらし、アプリケーション上でデータを分析して操作できます。現在、AnyCompany はエンドユーザー向けにダッシュボード埋め込みを使用しており、QuickSight ダッシュボード内からのユーザーアクションとイベントに基づいてワークフローをトリガーしたいと考えています。

AnyCompany には、さまざまなワークフローに関する次の重要な要件があります。

Email – AnyCompany は、在庫管理、注文処理、出荷追跡などのさまざまなマイルストーン (データポイント) についてエンドカスタマーに最新の情報を提供するために、ダッシュボードから email をトリガーするレコードにフラグを付けたいと考えています。
書き戻し — AnyCompany は、エンドユーザーが出荷、在庫、注文処理ステータスを埋め込みダッシュボードからデータベースに更新できるメカニズムをシームレスに提供したいと考えています。
使用状況分析 — AnyCompany は、倉庫のユーザーによるクリック分析に関するインサイトを導き出し、ユーザーベースの採用率とエンゲージメントを測定して継続的な改善を図り、使用パターンに基づいて体験を向上させたいと考えています。

以下のセクションでは、各ワークフローについて詳しく説明します。

Email ワークフロー

次の図は、QuickSight Embedding SDK の新しいイベントとアクション機能を使用して email ワークフローのレコードにフラグを付ける一連の手順を示しています。

ユーザーは、埋め込みアプリケーション内からダッシュボードにアクセスします。QuickSight Embedding SDK を使用してダッシュボードを埋め込む際に、アプリケーション開発者は SetVisualActions または SetActions を使用してビジュアルにアクションを登録し、エンドユーザーからのクリックイベントを監視します。エンドユーザーがダッシュボード内のビジュアルを操作すると (例えば、‘Flag record’という名前のカスタムアクションを使用して)、これらのイベントは親のアプリケーションに送信され、CALLBACK_OPERATION_INVOKED を使用してこれらのイベントを監視することでデータポイントをキャプチャできます。この生成されたイベントのレスポンスには、すべてのイベント情報と、ユーザーがクリックしたデータポイントが含まれます。アプリケーション開発者は、発生したイベントの詳細を使用して email ワークフローをトリガーし、適切な UI を表示して email テンプレートをさらにカスタマイズできます。以下のスクリーンショットとコードスニペットは、メールワークフローで可能性を示しています。

次のコードスニペットは、アプリケーション開発者がダッシュボードをウェブアプリケーションに埋め込む際にアクションを動的に有効にする方法を示しています。この例では、テーブルビジュアルで ‘Flag Record’ アクションが有効になっています。

onMessage: async (messageEvent) => {
                        const {eventName, message} = messageEvent;
                        switch (eventName) {
                            case 'CONTENT_LOADED':
                                await visualFrame.addActions([
                                    CustomActionId: 'flag-record-action',
                                    Name: 'Flag record',
                                    Trigger: 'DATA_POINT_MENU',
                                    Status: 'ENABLED',
                                    ActionOperations: [{
                                        CallbackOperation: {
                                            EmbeddingMessage: {}
                                        }
                                    }]
                                ]);

上記のコードを使用してビジュアル上でアクションを有効にした後、ユーザーがレコードを操作し始めると、次のスクリーンショットに示すように、レコードのメニューオプションに新しく追加された “Flag record” オプションが表示されます。

ユーザーが flag record をトリガーすると、次のコードスニペットに示すように、QuickSight Embedding SDK を介してイベントを処理できます。

case 'CALLBACK_OPERATION_INVOKED':
 const { Datapoints: [Datapoint], VisualId } = message;

  const aggregatedData = Datapoint.Columns.reduce((aggregatedRawData, column, index)=> 
    {
        const columnType = Object.keys(column)[0];

        if (columnType) {
            const valueType = Object.keys(column?.[columnType])[0];

            if (valueType) {
                const columnMetadata = column[columnType][valueType]?.Column;
                const rawValue = Datapoint.RawValues[index][valueType];
                const formattedValue = Datapoint.FormattedValues[index];

                return {
                    ...aggregatedRawData,
                    [columnMetadata.ColumnName]: rawValue
                }
            }
        }
       return aggregatedRawData;
    }, {});
   // Send data to backend server to send email
    await fetch('<REPLACE_WITH_BACKEND_SERVER_ENDPOINT>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ data: aggregatedRawData })
    });

返されたデータに基づいて、次のスクリーンショットに示すように、レスポンスをさらに処理して email フローをトリガーできます。

書き戻しワークフロー

次の図は、QuickSight Embedding SDK の新しいイベントおよびアクション機能による書き戻しワークフローの一連のステップを示しています。

これは先程の例とまったく同じように機能しますが、email ワークフローをトリガーする代わりに、データを直接処理してデータベースに書き込むことができます。

コードスニペットは次の通りです。

onMessage: async (messageEvent) => {
    const {eventName, message} = messageEvent;
    switch (eventName) {
    case 'CONTENT_LOADED':
        await visualFrame.addActions([
            CustomActionId: 'write-back-action',
            Name: 'write to database',
            Trigger: 'DATA_POINT_MENU',
            Status: 'ENABLED',
            ActionOperations: [{
                CallbackOperation: {
                    EmbeddingMessage: {}
                }
            }]
        ]);
        break;
    case 'CALLBACK_OPERATION_INVOKED':
        const { Datapoints: [Datapoint], VisualId } = message;

        const aggregatedData = Datapoint.Columns.reduce((aggregatedRawData, column, index) => {
            const columnType = Object.keys(column)[0];

            if (columnType) {
                const valueType = Object.keys(column?.[columnType])[0];

                if (valueType) {
                    const columnMetadata = column[columnType][valueType]?.Column;
                    const rawValue = Datapoint.RawValues[index][valueType];
                    const formattedValue = Datapoint.FormattedValues[index];

                    return {
                        ...aggregatedRawData,
                        [columnMetadata.ColumnName]: rawValue
                    }
                }
            }

            return aggregatedRawData;
        }, {});

        // Send data to backend server to write to database
        await fetch('<REPLACE_WITH_API_ENDPOINT>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ data: aggregatedRawData })
        });

        break;
    default:
        console.warn(`Unhandled event: ${eventName}`);
        break;
    }
    }
    }

使用状況分析ワークフロー

次の図は、QuickSight Embedding SDK の新しいイベントとアクション機能を使用して使用状況分析を取得する一連の手順を示しています。

このワークフローでは、ユーザーによるビジュアル操作をすべてクリックベースで有効にし、すべてのデータポイントをユーザー ID、役割、部署などとともにデータベースに書き込むことができます。このデータをさらに分析して、エンドユーザーの採用とエンゲージメントに関するインサイトを得ることができます。さらに、このデータを使用してダッシュボードを改善したり、組織内でキャンペーンを実施したりして、認知度を高め、採用率を高めることができます。例えば、特定の部門が棒グラフを操作していて、ダッシュボードを読み込むたびに 2 つのレイヤーをドリルダウンしている場合、それらのメトリクスをトップレベルに表示することで、その部門のダッシュボードの表示を改善できます。

まとめ

埋め込みコールバックアクションは、特定のビジュアル操作をサブスクライブし、埋め込みダッシュボードでエンドユーザーによってトリガーされたイベントを監視するための方法を提供します。この投稿では、これらのアクションとイベントの応用例のさまざまなユースケースを説明しました。詳細については、「Amazon QuickSight が埋め込みコールバックアクションのサポートを開始」と「Amazon QuickSight でランタイムに埋め込みコールバックアクションを追加する」を参照してください。

ご質問やフィードバックがございましたら、コメントをお寄せください。その他のディスカッションや質問への回答を得るためのヘルプについては、QuickSight コミュニティをチェックしてください。

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

著者について

Mayank Agarwal は、AWS のクラウドネイティブなフルマネージド BI サービスである Amazon QuickSight のプロダクトマネージャーです。彼は埋め込み分析と開発者体験に焦点を当てています。彼はハンドヘルドデバイスを開発する組み込みソフトウェアエンジニアとしてキャリアをスタートさせました。QuickSight に従事する前は、Credence ID でエンジニアリングチームを率い、AWS のサービスを使用してカスタムのモバイル組み込みデバイスとウェブソリューションを開発していました。これにより、政府部門、医療、取引のセキュリティアプリケーション向けに、生体認証の登録と識別を迅速、直感的、かつ費用対効果の高い方法で行うことができます。

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

Raji Sivasubramaniam は AWS のシニアソリューションアーキテクトで、Analytics 分野にフォーカスしています。Raji は、世界中の Fortune 500 および Fortune 100 企業向けの end-to-end のエンタープライズデータ管理、ビジネスインテリジェンス、分析ソリューションの設計を専門としています。彼女は、マネージドマーケット、医師ターゲティング、患者分析など、さまざまなヘルスケアデータセットを使った統合ヘルスケアデータと分析に豊富な経験があります。

Amazon Web Services ブログ