Tableauの埋め込みAPIでデータエクスポートの挙動を確認してみた

2026.02.26
こんにちは、業務効率化ソリューション部のikumiです。

今回は、Tableauの埋め込みAPIのデータエクスポート機能を試す機会があったので、その内容について記載していきます。
 検証環境Tableau Cloud
ローカルHTMLに埋め込みコードを実装
exportDataAsync APIを使用
 試してみるまずは埋め込むダッシュボードが必要になるので、Tableau Cloud上に検証用のダッシュボードをアップロードしました
今回は検証のため、ごく簡単な表のみを実装したダッシュボードを使用します

また、このダッシュボードにはユーザーフィルターが適用されているため、この後フィルターが適用されたユーザーの挙動についても確認していきます
 APIを実装まずは、Tableau側から埋め込みコードを取得します

私はHTMLやJSの知識が皆無なので、、埋め込みコードをAIに渡して、exportDataAsyncを実装したHTMLコードを作成してもらいました
<details><summary>作成してもらったコード</summary><div>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tableau データダウンロード</title>
  <script type='module' src='https://[YOUR_SERVER]/t/[YOUR_SITE]/views/[YOUR_WORKBOOK]/[YOUR_VIEW]'></script>
  <style>
    body { 
      font-family: Arial, sans-serif; 
      padding: 20px; 
      margin: 0;
    }
    button { 
      padding: 15px 30px; 
      margin: 10px 5px; 
      font-size: 18px; 
      cursor: pointer; 
      background: #0066cc; 
      color: white; 
      border: none; 
      border-radius: 5px; 
    }
    button:hover { 
      background: #0052a3; 
    }
    #status { 
      margin-top: 20px; 
      padding: 15px; 
      background: #f0f0f0; 
      border-radius: 5px; 
      white-space: pre-wrap; 
      font-family: monospace; 
      font-size: 14px;
    }
    .success { 
      color: green; 
      font-weight: bold; 
    }
    .error { 
      color: red; 
      font-weight: bold; 
    }
  </style>
</head>
<body>
  <h1>Tableau データダウンロード</h1>

  <tableau-viz id='tableau-viz' 
    src='https://[YOUR_SERVER]/t/[YOUR_SITE]/views/[YOUR_WORKBOOK]/[YOUR_VIEW]'
    width='1806' 
    height='995' 
    hide-tabs 
    toolbar='bottom'>
  </tableau-viz>

  <br>
  <button onclick="downloadAllData()">📥 全データをダウンロード</button>

  <div id="status"></div>

  <script type="module">
    window.downloadAllData = async function() {
      const status = document.getElementById('status');
      status.innerHTML = '処理中...\n';

      try {
        const viz = document.getElementById('tableau-viz');
        const workbook = viz.workbook;
        const activeSheet = workbook.activeSheet;

        status.innerHTML += `アクティブシート: ${activeSheet.name}\n`;
        status.innerHTML += `シートタイプ: ${activeSheet.sheetType}\n\n`;

        if (activeSheet.sheetType === 'dashboard') {
          status.innerHTML += 'ダッシュボード内のワークシートをエクスポート中...\n\n';

          for (const worksheet of activeSheet.worksheets) {
            status.innerHTML += `📊 ${worksheet.name} をダウンロード中...\n`;
            await viz.exportDataAsync(worksheet.name);
          }

          status.innerHTML += `\n<span class="success">✅ ${activeSheet.worksheets.length}個のワークシートのダウンロードを開始しました！</span>`;
        } else if (activeSheet.sheetType === 'worksheet') {
          status.innerHTML += `📊 ${activeSheet.name} をダウンロード中...\n`;
          await viz.exportDataAsync(activeSheet.name);
          status.innerHTML += '\n<span class="success">✅ ダウンロードを開始しました！</span>';
        } else {
          status.innerHTML += '<span class="error">❌ サポートされていないシートタイプです</span>';
        }

      } catch (error) {
        status.innerHTML += `\n<span class="error">❌ エラー: ${error.message}</span>`;
        console.error('詳細エラー:', error);
      }
    };
  </script>
</body>
</html>
</div></details>
コードを記載したHTMLファイルを保存し開くと、ログイン画面が出てきます

ログインすると、ダッシュボードを確認することができました！APIで実装したダウンロードボタンもきちんと表示されています

こうすることで、TableauのUI以外の、任意の分かりやすいダウンロードボタンを実装することができそうです
 ダウンロードしてみるつづいて、ボタンが実際に動くか検証してみます
まずは普通にダウンロードを実行してみると、想定通りにダウンロードすることができました！



今度は、フィルターを適用した状態でデータをダウンロードしてみます

そうすると、フィルターが適用された状態のデータがダウンロードされました


つづいて、ユーザーフィルターが適用されたユーザーでログインし直してみます
検証ユーザーはRegion:Centralのデータしか見ることができません

この状態でもう一度ダウンロードしてみると、こちらも想定通りRegion:Centralのみのデータがダウンロードされています

仕組みとしては、Tableauのセッション情報を引き継いだPOSTリクエストにより、表示中のフィルター状態を維持したまま、Tableau側から最新の集計データを直接抽出しているようです
 さいごに今回は非常に簡単な検証でしたが、exportDataAsync APIについて少し理解が深まりました。どなたかの参考になれば幸いです。