Zenn
株式会社ログラス テックブログPublicationへの投稿
🔥

Webアプリケーションにグラフ埋め込む~Tableau Embeddedの活用法~

kakke18
2024/12/04に公開
Tableau
tech

はじめに

こんにちは、ログラスでエンジニアをしております、田中です（@kakke18_perry）。

Webアプリケーション上にあるデータ、例えばユーザーの行動ログなどをダッシュボードで視覚的に表現したいというニーズは多いのではないでしょうか。

Webアプリケーションにグラフ機能を実装する方法は複数あります。
自前で実装する、Chart.jsなどのライブラリを使用する、BIツールを組み込むなど、様々なアプローチが考えられます。

本記事では、その選択肢の一つであるTableau Embeddedを用いた実装方法について解説します。

グラフ機能実装の選択肢

Webアプリケーションにグラフ機能を実装する際、多くの開発者はChart.jsなどのライブラリを選択します。
このアプローチでは、豊富な実装例とドキュメントが存在し、基本的なグラフであれば比較的容易に実装できることが特徴です。一方で、複雑なグラフになるほど実装コストが上昇し、継続的なライブラリの更新対応も必要になります。

これに対し、BIツールを組み込むアプローチでは、ランニングコストの発生や外部サービスへの依存というデメリットはあるものの、高度なグラフ機能や分析機能をすぐに利用できるというメリットがあります。

本記事では、後者のアプローチの一つであるTableau Embeddedの活用方法について詳しく解説していきます。

Tableau Embeddedの実装方法

WebアプリケーションにTableau Embeddedを利用する場合、実装内容としては、大きく以下の2つのパートで構成されます。

  • フロントエンド: グラフの表示
  • バックエンド: データ連携

フロントエンド実装

Tableau Embeddedのグラフ表示は、画面表示についてはiframeを用いることで簡単に実現できます。以下はTableauの公式サイトで紹介されているダッシュボードを埋め込んだ例です。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau Embedded Test</title>
    <style>
        .tableau-container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        iframe {
            width: 800px;
            height: 600px;
            border: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="tableau-container">
        <iframe 
            src="https://public.tableau.com/views/VGContest_AAPLTicker_YuriFal/AAPL?:embed=y&:showVizHome=no&:host_url=https%3A%2F%2Fpublic.tableau.com%2F&:embed_code_version=3&:tabs=no&:toolbar=yes&:animate_transition=yes&:display_static_image=no&:display_spinner=no&:display_overlay=yes&:display_count=yes&:loadOrderID=0"
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

ブラウザ上での表示

バックエンド実装

フロントエンドでグラフの表示ができたら、次はTableauにWebアプリケーションのデータを連携する必要があります。Tableauは様々なデータソースコネクタをサポートしていますが、本記事ではAWS Athenaを使用した実装例を紹介します。

データ連携アーキテクチャの例

データ連携は以下の流れで実施しています。

  1. データの抽出

    • アプリケーションのデータベース（例ではRDS）からデータを定期的に抽出
    • AWS Lambda等を使用して抽出処理を自動化

  2. データの変換・保存

    • 分析に適した形式への変換（非正規化、集計など）
    • S3への保存

  3. Tableauからの参照

    • Athenaを介したS3データへのアクセス

マルチテナント環境でのアクセス制御

マルチテナントのWebアプリケーションでは、複数の顧客のデータを安全に分離する必要があります。データベース層ではPostgreSQLのRow Level Securityなどで制御可能ですが、Tableau連携時にも同様のセキュリティを確保する必要があります。

以下の3つの要素を組み合わせることで、セキュアなアクセス制御を実現することができます。

  1. IAMユーザーの分離

    • 顧客ごとに専用のIAMユーザーを作成
    • 最小権限のポリシー設定

  2. ストレージの論理分離

    • S3のディレクトリを顧客ごとに分離
    • Athenaのワークグループを顧客ごとに設定

  3. Tableauの設定

    • サイトを顧客ごとに分離
    • IAMユーザーの認証情報を使用してデータアクセス

IAM Userによる顧客ごとのアクセス制御

セキュアなアクセス制御を実現するため、Terraformを使用して以下のようなIAMポリシーを定義します。

data "aws_iam_policy_document" "tableau_user" {
  statement {
    effect  = "Allow"
    actions = [
      "s3:GetObject",
    ]
    resources = [
      "${var.bucket}/${var.tenant_id}/*",
    ]
  }
}

まとめ

本記事では、Webアプリケーションにグラフ機能を実装する方法の一つとして、Tableau Embeddedの活用方法について紹介しました。複雑なグラフ機能の実装やグラフ自体を自由にカスタマイズしたいというニーズに対しては、Tableau Embeddedは良い選択肢になるのではないかと考えています。

明日は @wooootack さんの記事です。お楽しみに！

株式会社ログラス テックブログ
株式会社ログラス テックブログPublication

株式会社ログラスは「良い景気を作ろう。」をミッションに、企業経営を推進する次世代型経営管理クラウド「Loglass 経営管理」を開発し提供しています。

Discussion