ウィンドウズマックソフトウェア設定セキュリティ生産性リナックスAndroidパフォーマンス設定Apple すべて

ウェブサイトにTableauのビジュアライゼーションを埋め込む方法

編集済み 3 数か月前 によって ExtremeHow 編集チーム

タブローウェブ埋め込みデータビジュアライゼーションビジネスインテリジェンスウェブ開発統合分析ウィンドウズマックHTML

ウェブサイトにTableauのビジュアライゼーションを埋め込む方法

翻訳が更新されました 3 数か月前

Tableauのビジュアライゼーションをウェブサイトに埋め込むことは、インタラクティブなデータとダッシュボードを幅広いオーディエンスと共有するための優れた方法です。ビジネスインテリジェンスをウェブアプリケーションに統合し、ウェブサイト訪問者がウェブページから直接データを探索できるようにするのに役立ちます。このガイドでは、Tableauのビジュアライゼーションをサイトにうまく埋め込むためのさまざまな手順と要件をご紹介します。

Tableauの埋め込みオプションの理解

技術的な手順に進む前に、まず埋め込みの意味を理解することが重要です。Tableauのビジュアライゼーションを埋め込むということは、基本的にはインタラクティブなデータの一部を直接ウェブページに統合することを意味します。これは、Tableauを使用して作成したレポート、ダッシュボード、または任意の視覚データ表現にすることができます。

Tableauのビジュアライゼーションを埋め込むための主な方法は次のとおりです：

  1. Tableau Publicの使用。
  2. Tableau ServerまたはTableau Cloudの使用。
  3. Tableau JavaScript APIの使用。

Tableau Publicの使用

Tableau PublicはユーザーがTableauのビジュアライゼーションを公開できる無料のプラットフォームです。この方法を使用するには、次の手順に従いましょう：

  1. Tableau Desktopでビジュアライゼーションを作成する。
  2. それをTableau Publicに公開する。
  3. Tableau Publicから埋め込みコードを取得する。

ステップ1：Tableau Desktopでビジュアライゼーションを作成する

まずTableau Desktopで包括的なビジュアライゼーションを作成します。データがクリーンであり、ビジュアライゼーションが伝えたいストーリーを正確に反映していることを確認しましょう。ビジュアライゼーションに満足したら、公開の準備が整いました。

ステップ2：Tableau Publicに公開する

Tableau Desktopで、メニューボタン「ファイル」をクリックし、「Tableau Publicに名前を付けて保存」を選択します。Tableau Publicアカウントにログインする必要があります。アカウントがない場合は無料でサインアップする必要があります。ログインしたら、ビジュアライゼーションはTableau Publicにアップロードされます。

ステップ3：埋め込みコードを取得する

ビジュアライゼーションがTableau Publicにアップロードされたら、ウェブブラウザで開いてください。ウィンドウの下部付近にあることが多い「共有」ボタン（通常「Share」と表示される）をクリックすると、ビジュアライゼーションを共有するためのいくつかのオプションが表示されます。「埋め込みコード」オプションを選択します。これにより、ウェブサイトに挿入できるHTMLスニペットが提供されます。

<iframe src="https://public.tableau.com/views/YourViz here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

このiframeコードを、ビジュアライゼーションを表示したいウェブページのHTMLにコピー＆ペーストしてください。

Tableau ServerまたはTableau Cloudの使用

Tableau ServerまたはTableau Cloudを使用している場合、Tableau Publicよりもビジュアライゼーションへのアクセスを制御するためのオプションが増えます。これらのプラットフォームは、安全性とユーザー認証を伴う埋め込み機能を提供しますが、埋め込みの基本的な手順はほぼ同じです。

ステップ1：Tableau ServerまたはTableau Cloudへのビジュアライゼーションの公開

Tableau Desktopでビジュアライゼーションを作成し、それをTableau ServerまたはTableau Cloudに公開します。メインメニューから「サーバー」オプションを選択し、「ワークブックを公開」を選択して指示に従います。

ステップ2：埋め込みコードを取得する

ワークブックがアップロードされたら、オンラインバージョンに移動し、「共有」ボタンを探します。これにより、埋め込み用のオプションが表示されます。組織の設定によっては、埋め込みコードを取得するには管理者アクセスが必要な場合があります。

Tableau ServerまたはTableau Cloudは通常、埋め込みコードをiframeとして提供するか、JavaScript APIを使用してカスタマイズできます。Tableauが提供するiframe埋め込みコードの例は次のようになります：

<iframe src="https://<YourServerURL> /views/YourViz here" width="800" height="600" frameborder="0"></iframe>

ビジュアライゼーションを表示したいウェブサイトのHTMLにこのコードを置いてください。

Tableau JavaScript APIの使用

より高度な埋め込みニーズには、Tableau JavaScript APIがより多くの柔軟性と制御を提供します。これにより、プログラマティックにビジュアライゼーションとやり取りすることができます。

ステップ1：HTMLにTableau JavaScript APIを含める

まず、ウェブページにTableau JavaScript APIライブラリが含まれていることを確認してください。HTMLドキュメントの<head>セクションに次の行を追加します：

<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

ステップ2：ビジュアライゼーション用のコンテナを作成する

Tableauのビジュアライゼーションを保持するためにHTMLファイルにプレースホルダーやコンテナを設定します。これは通常、指定された幅と高さの<div>要素です。

<div id="tableauViz" style="width: 800px; height: 600px;"></div>

ステップ3：初期化とvisの埋め込み

JavaScriptを使用して、ページにTableauのビジュアライゼーションを初期化して埋め込むことができます。以下はスクリプトの例です：

<script type="text/javascript">
  var containerDiv = document.getElementById("tableauViz"),
      url = "https://public.tableau.com/views/YourDashboard here",
      options = {
          width: containerDiv.style.width,
          height: containerDiv.style.height,
          hidetabs: true,
          hideToolbar: true
      };

  viz = new tableau.Viz(containerDiv, url, options);
</script>

上記のスクリプトは、IDが「tableauViz」のページ上の<div>を指しており、指定されたURLからTableauのビジュアライゼーションをロードし、デフォルトのタブやツールバーを非表示にするようなカスタムオプションを適用します。

セキュリティと認証の実装

特に内部使用のためにTableauのビジュアライゼーションを埋め込む場合、データのセキュリティを確保することが重要です。Tableau ServerとTableau Cloudは、ユーザー認証および権限管理に基づく認証を提供し、認可されたユーザーのみがビジュアライゼーションにアクセスできるようにします。

検討できるセキュリティオプションには、SAML認証を使った埋め込み、Tableau Serverのログインを迂回することを可能にする信頼認証の有効化、またはOAuthの使用が含まれます。

レスポンシブデザインの対応

ウェブサイトがレスポンシブである場合、さまざまなデバイス画面に合わせて埋め込まれたビジュアライゼーションもレスポンシブにする必要があります。これを達成する一つの方法は、CSSおよびJavaScriptを介してiframeまたはコンテナdivを動的に調整することです。

レスポンシブCSSの例

<style>
  #tableauViz {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 アスペクト比 */
      position: relative;
  }
</style>

上記のCSS例は、「padding-bottom」トリックを使用して、デバイス全体でビジュアライゼーションが16:9のアスペクト比を維持することを可能にします。これはレスポンシブウェブデザインでの一般的な手法です。

最後の考え

Tableauのビジュアライゼーションをウェブサイトに埋め込むことで、貴重なインタラクティブなデータの洞察をウェブページに直接追加することができます。無料で利用できるデータにはTableau Publicを使用し、エンタープライズシナリオにはTableau ServerまたはCloudを活用し、カスタムソリューションにはJavaScript APIを使用することで、さまざまなオプションから強力なTableauビジュアライゼーションをウェブ環境に統合できます。

セキュリティ、レスポンシブデザイン、およびユーザーのニーズを慎重に検討することで、Tableauダッシュボードが有用かつ安全であることを確保できます。さまざまなアプローチを試し、あなたのユニークなニーズに最も適したソリューションを見つけてください。データ・ビジュアライゼーションを楽しんでください！

記事の内容に誤りがある場合, あなたは


コメント 



ウェブサイトにTableauのビジュアライゼーションを埋め込む方法

https://www.extremehow.com/how-to-embed-tableau-visualizations-in-a-website?ehal=ja






検索 ExtremeHow (ja)