TableauをWebページに埋め込み（tableau webページ 埋め込み）—最短で動かす・安全に運用するための完全ガイド

WebページにTableauを埋め込みたいと思ったとき、最初にぶつかるのは「どうやってコードを書けばいいのか」「セキュリティは大丈夫なのか」といった疑問です。シンプルに貼り付けるだけで済むケースもあれば、フィルターやパラメータの連携、シングルサインオンの設定、さらにはデバイスごとの最適化まで考えなければならない場面もあります。

本記事では、Tableauの最新埋め込み方式であるEmbedding API v3を中心に、初心者でもすぐに試せる最短手順から、現場で必要とされるセキュリティ設定や表示最適化のコツまでを段階的に整理しました。実際にコピペで動くコード例を交えながら、「とりあえず表示させたい」から「本番環境で安全に運用したい」までを一気に理解できる構成になっています。

これからTableauをWebサイトや社内システムに組み込みたい方にとって、迷わず始められる実践ガイドになるはずです。

この記事でわかること

  • 最短2ステップでの埋め込み（コピペで動く手順）

  • Embedding API v3の基本（<tableau-viz>の使い方と主要属性）

  • フィルター・パラメータ連携（初期値の指定／読み書き）

  • 認証とセキュリティ（Connected Apps / EAS、ドメイン許可、サードパーティCookie）

  • レスポンシブと表示最適化（サイズ・デバイス別レイアウト・遅延読み込み）

  • 旧JavaScript APIからの移行ポイント

  • よくあるハマり／チェックリスト

本記事はTableau Cloud / Server / Publicいずれの埋め込みでも使える「最短ルート」を軸に、あとから高度化できるよう段階的に説明します。
注：Tableauの埋め込みは現在「Embedding API v3」が推奨・標準です（旧JavaScript API v2は非推奨）。 Tableau Help+1

1. まずは最短で動かす（コピペOK）

手順A：Tableau上で「共有」→「埋め込みコードをコピー」

  1. 対象のビュー（またはダッシュボード）を開く

  2. 画面上部の**Share（共有）**をクリック

  3. **Copy Embed Code（埋め込みコードをコピー）**を押して、自分のWebページのHTMLへ貼り付け
    これだけでページ内にインタラクティブなTableauを表示できます。 Tableau Help+1

Tableau Publicでも画面下部のShareから同様に埋め込みコードを取得できます。 Tableau Help+1

手順B：超ミニマムな手書き埋め込み（Embedding API v3）

以下をそのままHTMLに貼るだけでも動作します（srcは自分のビューURLに置換）。

<!-- 1) APIライブラリを読み込み（v3） -->
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>

<!-- 2) Webコンポーネントでビューを配置 -->
<tableau-viz id="tableauViz"
src="https://public.tableau.com/views/Superstore_embedded_800x800/Overview"
toolbar="bottom" hide-tabs>
</tableau-viz>

<tableau-viz>はv3の中核です。srcにビューURL、toolbarやhide-tabsなどの属性で見た目やUIを制御できます。 Tableau Help+1

2. Embedding API v3の基本：覚えるべき最小セット

2.1 これだけ知っておけばOK（属性ベスト5）

  • src：表示するビューのURL（HTTPS推奨） Tableau Help

  • toolbar："top" | "bottom" | "hidden"（ツールバーの位置/非表示） Tableau Help

  • hide-tabs：タブを隠す（存在するだけでtrue扱い） Tableau Help

  • device："default" | "desktop" | "tablet" | "phone"（ダッシュボードにデバイスレイアウトがあれば切替） Tableau Help

  • iframe-attr-loading="lazy"：遅延読み込みで初期表示を軽くする（下の例参照） Tableau Help

例：属性を足して“ほどよく最適化”する

<tableau-viz id="tableauViz"
src="https://my-server/views/my-workbook/my-view"
device="phone" toolbar="bottom" hide-tabs
iframe-attr-loading="lazy">
</tableau-viz>

（device="phone"はダッシュボード側で「デバイスレイアウト」作成済みの場合に有効です） Tableau Help+1

3. フィルターとパラメータ：初期値の付与と変更

3.1 初期フィルターはHTMLだけで設定できる

v3ではURLパラメータでのフィルター指定をやめ、<tableau-viz>の子要素<viz-filter>で指定します（値はカンマ区切り・スペースなし）。 Tableau Help+1

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

3.2 画面表示後にJavaScriptでフィルターを変更

<script type="module">
import { FilterUpdateType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js";

const viz = document.getElementById('tableauViz');
// ワークブック→アクティブシート（単一シート or ダッシュボード）
const sheet = viz.workbook.activeSheet;

// 例：ダッシュボード内の特定ワークシートを取得してフィルター
const saleMap = sheet.worksheets.find(ws => ws.name === "SaleMap");
saleMap.applyFilterAsync("State", ["Washington","Oregon"], FilterUpdateType.Replace);
</script>

（FilterUpdateTypeの列挙を使うのがポイント） Tableau Help

3.3 パラメータも同様に簡単

  • 初期値：<viz-parameter name="..." value="...">

  • 実行時変更：viz.workbook.changeParameterValueAsync(name, value)

<tableau-viz id="tableauViz" src="...">
<viz-parameter name="Base Salary" value="75000"></viz-parameter>
</tableau-viz>

<script type="module">
// 表示後に値を変える例
async function setParam() {
const viz = document.getElementById("tableauViz");
await viz.workbook.changeParameterValueAsync("Base Salary", 80000);
}
</script>

（パラメータの許容値範囲に収まる必要があります） Tableau Help

旧来のURLパラメータの多くはカスタムパラメータとして<custom-parameter name=":tooltip" value="no">のように渡せます（将来非対応の可能性あり）。 Tableau Help+1

4. 認証とセキュリティ：ここを押さえれば詰まらない

4.1 まず選ぶ：サインイン / Connected Apps / EAS

  • 直接サインイン：そのままでも動くがブラウザのサードパーティCookie許可が必要になることがある。EmbedではCookieが第三者扱いになるため。 Tableau Help+1

  • Connected Apps（Tableau Cloud/Server）：JWTを使い、token属性で安全に埋め込み。SSO連携や埋め込み先ドメイン制御との相性が良い。 Tableau Help

  • EAS（External Authorization Server）：IdPとOAuth連携し、JWTで埋め込み。 Tableau Help

JWTを渡す例（Connected Apps / EAS）

<tableau-viz id="tableauViz"
src="https://your-tableau-server/views/my-workbook/my-view"
token="＜サーバー側で発行したJWT＞">
</tableau-viz>

（scpにtableau:views:embed等のスコープを含める／エラー時ハンドリングも可能） Tableau Help

**Guestユーザー（コアライセンス）**が有効なTableau Serverでは、サインインなしで閲覧させる選択肢もあります（組織設定次第）。 Tableau Help

4.2 埋め込み許可ドメイン（Allowlist）

Tableauサイト側に埋め込みを許可するドメインの設定があり、許可されていないドメインでは表示されません。Connected Appsのドメイン許可と関係するため、運用前に両方確認しましょう。REST APIで許可設定の参照・更新も可能です。 Tableau Help

4.3 よくあるセキュリティ＆互換の落とし穴

  • HTTPS必須（混在コンテンツはブロックされる） Tableau Help

  • サードパーティCookieがブロックされる環境ではConnected Apps/EASを検討 Tableau Help+1

  • **CSP（Content-Security-Policy）**を壊さない（iframeやスクリプトの制限はCSP準拠で設定） Tableau Help

5. レイアウトとパフォーマンスのコツ

5.1 サイズとデバイス

  • device属性でレイアウト固定（phone/tablet/desktop）。

  • ダッシュボード側でデバイスレイアウトを作っておくと効果的。 Tableau Help+1

5.2 遅延読み込みで初期表示を軽く

  • iframe-attr-loading="lazy"で画面に近づくまでiframeを読み込まない。複数可視化を縦並びするページで効きます。 Tableau Help

5.3 書き出し（エクスポート）

  • APIからPDF/PowerPoint/CSV/Excel/PNGなどへエクスポート可能（ダイアログを出す／直接ダウンロードの両方対応）。 Tableau Help

6. 旧JavaScript API（v1/v2）からの移行

  • 2024年2月時点で旧JavaScript APIは非推奨となり、Embedding API v3への移行が推奨。v3では**Web Components（<tableau-viz>）**に統一され、モダンなJS設計＆機能が提供されています。 Tableau Help+1

  • 旧来のviz_v1.js・<object class='tableauViz'>・URLベースのフィルター指定は**「過去の方法」**。新規実装はv3で。 Tableau Help+1

7. 具体的なコードスニペット集

7.1 最小構成（v3 / 一発表示）

<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_embedded_800x800/Overview"
toolbar="bottom" hide-tabs>
</tableau-viz>

Tableau Help

7.2 初期フィルターとパラメータの同時指定

<tableau-viz id="viz" src="https://.../views/...">
<viz-filter field="Region" value="West,Central"></viz-filter>
<viz-parameter name="Base Salary" value="75000"></viz-parameter>
</tableau-viz>

Tableau Help+1

7.3 JSでのフィルター変更・エクスポート

<script type="module">
import { FilterUpdateType, TableauDialogType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js";
const viz = document.getElementById('viz');

// 変更（表示後）
const sheet = viz.workbook.activeSheet;
const map = sheet.worksheets.find(ws => ws.name === "SaleMap");
map.applyFilterAsync("State", ["Washington"], FilterUpdateType.Replace);

// エクスポートダイアログ（PDF）
document.getElementById('btnPDF').onclick = async () => {
await viz.displayDialogAsync(TableauDialogType.ExportPDF);
};
</script>

Tableau Help+1

8. 運用の現場で役立つチェックリスト

公開前に

  • ビューURL（src）はHTTPSか？（混在コンテンツ対策） Tableau Help

  • 埋め込み許可ドメインに本番サイトが登録されているか？（Allowlist） Tableau Help

  • シングルサインオン要件はConnected Apps / EASで満たしているか？（JWTのscp確認） Tableau Help

  • デバイスレイアウトの作成＆テスト（phone/tablet/desktop） Tableau Help

  • 重いページは**iframe-attr-loading="lazy"**で段階読み込みにする Tableau Help

トラブル時

  • ブラウザのサードパーティCookieがブロックされていないか？（サインイン失敗時の定番） Tableau Help

  • Allowlist／Connected Appsのドメイン設定は正しいか？ Tableau Help

  • 旧viz_v1.jsなどレガシーコードが混在していないか？（v3へ移行） Tableau Help+1

  • 権限（プロジェクト／ワークブック／ビュー）やライセンス（必要ならGuestの可否）を再確認 Tableau Help

9. よくある質問（簡潔版）

Q. WordPressで貼るには？
A. 「カスタムHTML」ブロックに埋め込みコードをそのまま貼るのがシンプル。Scriptをブロックする設定がある場合は管理側の許可が必要です。埋め込みコード自体はTableauのShare→Copy Embed Codeで取得します。 Tableau Help

Q. 埋め込み先で最初から「この地域だけ」を見せたい。
A. <viz-filter>で初期フィルターを指定するか、表示後にapplyFilterAsyncで差し替えます。 Tableau Help

Q. URLパラメータでフィルターしたい。
A. v3ではURLではなくコンポーネント属性（<viz-filter>）やAPIでの変更が基本です。 Tableau Help

Q. 署名付きトークンでSSOしたい。
A. Connected AppsまたはEASを使い、サーバー側で発行したJWTをtoken属性に渡します。 Tableau Help

Q. PDF/PowerPoint/CSVに出力できる？
A. できます。displayDialogAsyncでダイアログを開く／exportPDFAsyncなどで直接出力可能。 Tableau Help

10. まとめ：**「コピペ→属性→認証」**の3段階で無理なく拡張

  1. まずは動かす：Shareから埋め込みコードをコピペ、または<tableau-viz>を最低限で設置。 Tableau Help+1

  2. 表示を整える：toolbar/hide-tabs/device、<viz-filter>/<viz-parameter>で見た目と初期値を調整。 Tableau Help+2Tableau Help+2

  3. 本番を固める：Connected Apps/EASでSSO、Allowlistでドメイン制御、HTTPSと遅延読み込みで安全＆軽快に。 Tableau Help+3Tableau Help+3Tableau Help+3

新規構築・リニューアル問わず、Embedding API v3での実装が現在のベストプラクティスです。旧API（viz_v1.js等）は歴史的資産として最小限の参照に留め、今から作るならv3で始めましょう。 Tableau Help

補足：埋め込み時に役立つ公式ドキュメント（本文中で参照）

  • Embedding API v3の概要と基本サンプル：<tableau-viz>・tableau.embedding.3.latest.min.js の使い方。 Tableau Help

  • フィルター（初期/実行時）：<viz-filter>・applyFilterAsync。 Tableau Help

  • パラメータ：<viz-parameter>・changeParameterValueAsync。 Tableau Help

  • 設定できる属性一覧・サイズ・遅延読み込み。 Tableau Help

  • 認証（Connected Apps / EAS / JWT / Cookie注意点）。 Tableau Help+1

  • 埋め込み許可ドメイン（Allowlist）。 Tableau Help

  • エクスポート（PDF/PowerPoint/CSV/Excel/PNG）。 Tableau Help

  • 旧APIの非推奨と移行ガイド。 Tableau Help+1

    📩 専門コンサルタントに相談してみませんか？
    Tableauのライセンス選定や運用設計に少しでも不安がある方は、一度プロに相談してみるのがおすすめです。

    • どのライセンスを選べばいいか分からない

    • 導入したものの活用しきれていない

    • Power BIとの違いを整理したい

    当社ではTableau導入から定着・活用まで一気通貫で支援します。業種・業務フローに応じた最適設計をご提案可能です。
    ▶ 詳細なサービス内容やご相談希望の方は、専用ページをご覧ください。（クリックしてください））

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

関連記事

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

カテゴリー

アーカイブ

検索