【保存版】Tableau「埋め込み（Embedding）」完全ガイド 2025

「Webや自社プロダクトにTableauを埋め込みたい」最初の一歩は簡単ですが、本番運用で求められるのはセキュリティ（認証・権限）、ユーザー体験（SSO）、閲覧制御（RLS）、拡張（イベント・エクスポート・React連携）です。本記事は最短の実装方法 → 本番での必須設定 → ライセンスの考え方 → 便利なAPI機能 → トラブル解決まで、最新のEmbedding API v3を軸に一気通貫で解説します。

1. 埋め込みの選択肢（3レベルで把握）

レベル 目的 実装イメージ 代表ユースケース
A. かんたん埋め込み まずは表示 Share→Copy Embed Codeを貼る 社内ポータル/検証
B. Webコンポーネント UI調整・初期フィルタ <tableau-viz src="..."> をHTMLに追加 サイト内に自然に溶け込ませる
C. プログラマブル 認証・操作・イベント JS/ReactでTableauVizを制御、エクスポート等 本番アプリ・SaaS組込み

  • Aは最短、Bは現代的で柔軟、Cは本番要件対応（SSO・権限・イベント・拡張）に向きます。埋め込みのデフォルトはv3（Webコンポーネント + ES Modules）。 Tableau Help+1

2. 最短で動かす：コピペで埋め込み

**Tableau Cloud/Serverのビュー画面 →［共有（Share）］→［Copy Embed Code］**で生成されたコードをページに貼るだけ。管理者がサイト側で埋め込み可否（許可リスト）を制御している場合は、ドメイン許可が必要です。 Tableau Help

ワンポイント：埋め込みビューは元の権限に従います。アクセスできるユーザー・機能はTableau側の権限次第です。 Tableau Help

3. “いま主流”のやり方：Webコンポーネント <tableau-viz>

v3では、HTMLに1行でビジュアルを追加できます（ライブラリはESモジュール）。

<!-- ライブラリ読込（例：Public/Cloud/Serverが配信する最新版） -->
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script><!– 最小構成：ソースURLだけでOK –>
<tableau-viz id=“viz”
src=“https://public.tableau.com/views/Superstore_embedded_800x800/Overview”
toolbar=“bottom” hide-tabs>
</tableau-viz>

  • 属性で初期設定（toolbar/hide-tabs/device など）を記述。

  • CDN/Cloud/Server/Publicのいずれからでもライブラリ取得可（ES6 module）。 Tableau Help

Tip：プログラマブルに制御したい場合は、JSでnew TableauViz()を作成し、DOMへappendする方式も選べます。 Tableau Help

4. 認証・SSO（本番の最重要ポイント）

4-1. ログインを避けるには？

v3ではConnected Apps（もしくは外部認可サーバ/EAS）を使ったJWTベース認証が推奨・標準です。ユーザーにTableauログイン画面を出さず、アプリ側のSSO体験でシームレス表示が可能。JWTは**token属性**で<tableau-viz>へ渡します。 Tableau Help

<tableau-viz
src="https://online.tableau.com/t/your-site/views/your-wb/your-view"
token="＜サーバ側で発行したJWT＞">
</tableau-viz>

  • スコープ（scp）：tableau:views:embed（閲覧）等をJWTに付与。

  • **Connected Apps（Direct/OAuth2.0 Trust）**の設定手順・許可ドメイン（allowlist）は公式手順に準拠。 Tableau Help

JWTの有効期限は最大10分（exp）が要件（Cloud/EAS）。10分を超えるexpはエラーになります。 Tableau Help+2Tableau Help+2

EAS：Tableau ServerでIdPを使う場合、外部認可サーバ（EAS）と連携する選択肢もあります。どちらもJWTでscpを指定し、token属性で渡して埋め込みます。 Tableau Help

4-2. 埋め込み許可ドメイン（セキュリティ）

サイト設定で「埋め込み許可リスト（allowlist）」を制御可能。Connected Apps（Direct Trust）利用時はConnected Apps側のドメイン許可が優先されます（サイト設定の影響外）。CSPも含めクロスドメイン安全性を担保しましょう。 Tableau Help

4-3. On‑Demand Access（ODA）：Cloudで“匿名風”に見せる

Embedded AnalyticsのUsage‑Based（消費型）ライセンスを前提に、On‑Demand Accessを使うと、Tableau Cloudでもアカウント事前作成なしに埋め込み表示が可能（JWTへhttps://tableau.com/odaとhttps://tableau.com/groupsを付与）。グループ権限で閲覧範囲を制御します。 Tableau HelpTableau

5. ライセンスと“誰が見られるか”の基礎

  • 通常（Named User）：Viewer/Explorer/Creatorなどユーザー単位ライセンス。埋め込みでも元の権限に準拠。 Tableau Help+1

  • ServerのGuest（匿名）：Coreベースでのみ利用可（ユーザー課金では不可）。Guest有効時はサインインなしで埋め込んだビューを閲覧可能。CloudにはGuestはありません。 Tableau Help+1

  • Embedded Analytics / Usage‑Based：**消費量（分析インプレッション）**で課金。On‑Demand Accessと組み合わせた大規模公開に向きます。 Tableau HelpTableau

6. Row‑Level Security（RLS）を“JWTで”確実に

v3ではUser AttributesをJWTに入れ、ワークブック側で**USERATTRIBUTE() / USERATTRIBUTEINCLUDES()を使うと属性ベースでRLSを実現可能（サイト側で属性受け入れ設定の有効化**が必要）。たとえばJWTに"Region": ["West"]を含め、ビューでは
USERATTRIBUTEINCLUDES('Region', [Region]) で一致行のみ表示、といった制御ができます。 Tableau Help

注意：User AttributesはEmbeddingワークフローで有効。Cloud/Serverそれぞれの制約（Desktopプレビュー不可など）もドキュメントに明示されています。 Tableau Help

7. フィルタ・エクスポート・イベント（UXを作る道具箱）

7-1. 初期フィルタ（HTMLだけ）

<tableau-viz>の子要素に<viz-filter>を置くだけ。複数指定・カンマ区切りOK。

<tableau-viz id="viz" src="...">
<viz-filter field="Category" value="Technology"></viz-filter>
<viz-filter field="State" value="California,Oregon,Washington"></viz-filter>
</tableau-viz>

後からはapplyFilterAsync()やapplyRangeFilterAsync()を利用。セキュリティ目的の制限はRLSで——フィルタは見た目の初期値と理解しましょう。 Tableau Help

7-2. エクスポート（PNG/CSV/Excel/PDF/PPT）

ダイアログを開く（displayDialogAsync()）／直接ダウンロード（exportImageAsync()等）に対応。ボタン連携や自動出力が容易です。 Tableau Help

7-3. イベント（読み込み完了・エラー検知）

FirstInteractiveや**VizLoadError**（v3.6+）を購読して、ローディング表示やリトライを制御できます。 Tableau Help

8. 埋め込みオーサリングまで：編集・新規ワークブックを外部アプリで

  • Web編集（Embedded Web Authoring）：<tableau-authoring-viz>でその場で編集・保存が可能（権限要）。 Tableau Help

  • “空のワークブック”を埋め込む：URLにnewWorkbook / authoringNewWorkbookを使うと、新規作成フローを外部アプリ内で実現（v3.6+、2023.2+）。 Tableau Help

9. Reactで埋め込む（公式コンポーネント）

@tableau/embedding-api-react を導入。<TableauViz> / <TableauAuthoringViz> コンポーネント、hooksでイベントも簡単に扱えます。バージョンは埋め込み元のTableauに整合させましょう。 Tableau Help

import { Api, TableauViz } from '@tableau/embedding-api-react';

export default function MyViz() {
return (
<TableauViz
src=“https://public.tableau.com/views/RegionalSampleWorkbook/Storms”
toolbar=“hidden”
hideTabs
/>
);
}

10. 管理者向け：サイト設定（埋め込み許可）とCSP

  • 埋め込み許可：**2022.2+**で、全許可/許可リストのみ/禁止をREST API含めて制御可能（allowlistはCSP準拠のパターン指定に対応）。Connected Apps（Direct Trust）使用時はConnected Apps側の許可が優先。 Tableau Help

  • CSP：XSS防止のため、CSPヘッダを改変しない設計が推奨です。 Tableau Help

11. 旧来の埋め込みとの違い（v2→v3）

  • v3はWebコンポーネント（<tableau-viz>）とES Modulesが前提。Server 2022.3以降やCloudでは、デフォルトの埋め込みコードもv3ベースに更新済み。古い&:toolbar=no等のURLパラメータ直書きは非推奨（互換ドキュメントは別ページに分離）。 Tableau Help

  • APIの取得場所：Server/Cloud/Public/CDNから入手。2024.1以降はnpm配布も。 Tableau Help

12. 代表アーキテクチャ（埋め込みパターン集）

  1. 社内ポータル：AまたはBで十分。SSO済みならサインインリダイレクトで対応。第三者Cookieの影響を避けたいならConnected Apps検討。 Tableau Help

  2. 自社SaaSに顧客向け埋め込み：Connected Apps + JWT + RLS（User Attributes）が定番。ユーザー属性はアプリ側のID管理を単一の真実として渡す。 Tableau Help+1

  3. 大規模公開（匿名風）：Cloud × Usage‑Based × On‑Demand Access。JWTにoda/groupsを付与し、グループ権限で閲覧を制御。 Tableau Help

  4. 匿名公開をServerで：Coreライセンス + Guest（要セキュリティ設計）。CloudにはGuestがない点に注意。 Tableau Help+1

13. よく使うコード断片（コピペOK）

13-1. HTMLだけで初期フィルタ

<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>
<tableau-viz id="viz" src="https://public.tableau.com/views/Superstore_24/Overview" toolbar="bottom" hide-tabs>
<viz-filter field="Category" value="Technology"></viz-filter>
<viz-filter field="State" value="California,Oregon,Washington"></viz-filter>
</tableau-viz>

Tableau Help

13-2. JSでエクスポートボタン（PDF）

<script type="module">
import { TableauEventType, TableauDialogType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js";
const viz = document.querySelector('tableau-viz');
viz.addEventListener(TableauEventType.FirstInteractive, () => {
document.getElementById('export-pdf').onclick = async () => {
await viz.displayDialogAsync(TableauDialogType.ExportPDF);
};
});
</script>

Tableau Help

13-3. JWTを渡してシームレス表示（Connected Apps）

<tableau-viz id="viz"
src="https://online.tableau.com/t/your-site/views/your-wb/your-view"
token="＜バックエンドで発行したJWT＞">
</tableau-viz>

（JWTはaud="tableau",jti,exp<=10分,scp=["tableau:views:embed"]等を満たす） Tableau Help+1

14. 本番設計チェックリスト（落とし穴を避ける）

  • ドメイン許可：Connected Apps（Direct）ならアプリ側のallowlist、それ以外はサイト設定のallowlistを確認。 Tableau Help

  • JWT：expは10分以内、scpは配布先に必要な最小権限、jtiユニーク。時計ずれにも注意。 Tableau Help+1

  • RLS：User Attributesを使うならサイト設定で有効化し、ワークブック側に**USERATTRIBUTE()**を実装。 Tableau Help

  • イベント処理：FirstInteractiveでローディング終了、VizLoadErrorで再試行やログ。 Tableau Help

  • エクスポート要件：PNG/CSV/Excel/PDF/PPTの可否と上限を事前に整理。 Tableau Help

  • ライセンス：Cloudで広く配信するならUsage‑Based、Serverで匿名公開ならCore + Guestを検討。 Tableau Help+1

  • 旧パラメータ依存を排除：&:toolbar=no等の旧式設定からv3属性へ置換。 Tableau Help

15. トラブルシューティング早見表

症状 よくある原因 対処
埋め込みが真っ白 埋め込み許可リスト未設定/CSP衝突 サイト設定でallowlist設定、CSPポリシーを遵守。 Tableau Help
毎回ログイン画面 SSO未構成 / 3rdパーティCookie制約 Connected Apps/EAS + JWTでtoken渡しのフローへ。 Tableau Help
JWTエラー（期限） expが10分超/時刻ずれ exp<=10分に、サーバ時刻同期、jtiユニーク化。 Tableau Help+1
Cloudで“匿名”に見せたい Guest未対応 **Usage‑Based + On‑Demand Access（oda/groups）**で実装。 Tableau Help
Serverで匿名公開したい Named Userライセンス Core + Guestを検討（権限とデータ資格情報に注意）。 Tableau Help
初期フィルタが効かない フィールド名/大文字小文字/階層名 キャプション名で指定（YEAR(Date)等）、階層はフル名。 Tableau Help
RLSが効かない サイト側の属性設定OFF / 関数未実装 属性受け入れ有効化＋USERATTRIBUTE()を計算に追加。 Tableau Help

16. まとめ：「表示」から「運用」へ

  • 埋め込みの入口はShare→埋め込みコード、主流はv3のWebコンポーネント。 Tableau Help+1

  • 本番ではConnected Apps / EAS + JWTでSSO、サイト設定のallowlistで埋め込み先を制限。 Tableau Help+1

  • RLSはUser Attributes（JWT）＋**USERATTRIBUTE()**系で実現。 Tableau Help

  • 拡張はイベント/エクスポート/Reactで。編集や新規作成も外部アプリ内で完結できます。 Tableau Help+3Tableau Help+3Tableau Help+3

  • ライセンス設計（Named/User, Core+Guest, Usage‑Based+ODA）で配信モデルに合うコスト構造に。 Tableau Help+2Tableau Help+2

📩 専門コンサルタントに相談してみませんか？

Tableauのライセンス選定や運用設計に少しでも不安がある方は、一度プロに相談してみるのがおすすめです。

  • 「どのライセンスを選べばいいか分からない」
  • 「導入したものの活用しきれていない」
  • 「Power BIとの違いを整理したい」

こうしたお悩みに対し、当社ではTableau導入から定着・活用までを一気通貫で支援しています。業種や業務フローに応じた最適なライセンス構成と活用方法をご提案可能です。

▶ 詳細なサービス内容やご相談希望の方は、
こちらの専用ページをご覧ください。

相談は無料です。お気軽にご連絡ください。

関連記事

この記事へのコメントはありません。

カテゴリー

アーカイブ

検索