ダッシュボードを埋め込む

適用先: Tableau Cloud, Tableau Server

Tableau Server 2022.3 以降と Tableau Cloud の埋め込みコードは、埋め込み API v3 を使用するように変更されました。デバイス固有のレイアウトとダッシュボードのサイズ調整に関する最新情報は、埋め込み API ヘルプの「埋め込みオブジェクトとコンポーネントの構成」を参照してください。このトピックの情報は、埋め込みの以前のバージョン (Tableau JavaScript API v1 および v2 を使用) を対象としています。

埋め込みの以前のバージョンを使用したダッシュボードの埋め込み

Tableau ダッシュボードを独自の Web サイトや Wiki ページに埋め込み、iframe の画面サイズに基づいて異なるレイアウトで表示することができます。

  • 使用デバイスにかかわりなく、ユーザーに正しいレイアウトを自動表示させるには、Tableau Desktop のダッシュボードでデバイス固有のレイアウトを作成します。正確なピクセル値の代わりに iframe の幅と高さの 100% を使用してそれを実行すると、Tableau Server と Tableau Cloud は iframe のサイズに基づいて正しいレイアウトを自動的に表示します (以下参照)。
  • iframe のサイズにかかわりなく、常に特定のレイアウトを表示させるには、埋め込みコード内の device パラメーターを使用します。

以下の例では、埋め込みコードは幅 800 ピクセルで高さ 600 ピクセルのダッシュボードを表示します。正確な幅と高さの値は、ビューまたはダッシュボードの最上部の [共有] ボタンをクリックしたときに取得する既定の埋め込みコードの一部です。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' style='width: 800px; height: 600px;' >
  <object class='tableauViz' width='800' height='600' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

この例では、ダッシュボードがデバイス固有のレイアウトを使用する部分で、div クラスの style 属性が削除され、幅と高さのオブジェクト クラス値が 100% で置き換えられています。大半の場合、つまり、幅と高さが CSS 内の他の場所で制御されることがない場合は、正しいレイアウトが表示されます。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

正しいレイアウトが表示されない場合は、埋め込みに使用している HTML ページに <!DOCTYPE html> タグがあるために、ページ本文を 100% にサイズ変更できなくなっている可能性があります (詳細は後述の「スタック オーバーフロー」に関するページを参照してください(新しいウィンドウでリンクが開く))。回避策として、HTML ページの本文に以下の行を追加する方法があります。

<style>
  html, body { height: 100% }
</style>

次の例では、埋め込みダッシュボードにデバイス固有のレイアウトがあることを想定しています。device パラメーターはphoneに設定されています。これは、どのデバイスがダッシュボードを表示するかにかかわりなく、携帯電話用に作成されたレイアウトが表示されることを意味します。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host_url' value='http://mysite.myserver.com' />
  <param name='site_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales_Dashboard' />
  <param name='device' value='phone' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original_view=yes' /></object></div>

iframe ディメンションとデバイスのレイアウト

デバイスの表示するダッシュボード レイアウトは Tableau ビューが表示される iframe の極小寸法 (高さまたは幅) に基づきます。時折デスクトップ、タブレット、または携帯電話レイアウトが他の種別のデバイスに現れることがあります。例えば、デスクトップ コンピューターのディスプレイまたはブラウザー ウィンドウが小さければ、タブレット レイアウトが現れる可能性があります。

iframe の最小サイズの場合...このデバイス レイアウトは次の場合に現れます...
500 ピクセル以下携帯電話
501 ～ 800 ピクセルタブレット
800 ピクセル超Desktop

デバイス固有のレイアウトを使用してダッシュボードを作成する方法の詳細については、異なるデバイス タイプのダッシュボード レイアウトの作成を参照してください。

一番上に戻る
フィードバックをお送りいただき、ありがとうございます。フィードバックは正常に送信されました。ありがとうございます!