ビューの埋め込みコードの記述
Tableau Server 2022.3 以降と Tableau Cloud の埋め込みコードは、埋め込み API v3 を使用するように変更されました。埋め込み API v3 を使用してビューを埋め込む方法についての最新情報は、埋め込み API ヘルプの「埋め込みの基礎」を参照してください。このトピックの情報は、埋め込みの以前のバージョン (Tableau JavaScript API v1 および v2 を使用) を対象としています。
独自の埋め込みコードを作成する場合は、次の 2 つの方法のどちらかを使用できます。
Tableau JavaScript を使用: この方法をお勧めします。Tableau が生成する埋め込みコードを基にして、ツールバーやタブなどを制御するオブジェクト パラメーターを追加または編集し、独自のコードを作成します。Tableau JavaScript ファイルに依存する既定の埋め込みコードは、埋め込まれた複数のビューの読み込み順序を制御する唯一の方法でもあります。
ビューの URL を指定: iframe またはイメージ タグを使用してビューを埋め込みます。ここで、ソースは、ビューで [共有]、[リンクのコピー] をクリックして取得する URL です。Web サイトで JavaScript を使用できない場合は、また、URLしか指定できない場合に、この方法を使用してください。
ビューを組み込む場合、ビューを表示する幅と高さを定義することをお勧めします。そうでない場合、クライアント ブラウザーは幅と高さを任意で取得します。
注: 埋め込みコードで Tableau Cloud のサーバー名を指定する必要がある場合 (たとえば、JavaScript API の場所をポイントするため)、URL https://online.tableau.com を指定します。
Tableau JavaScript を使用
次のコードは、パブリッシュされたビューの [共有] をクリックしたときに生成される埋め込みコードの例を示しています。host_url パラメーター内の特殊記号は URL エンコードされており、site_root パラメーターと name パラメーター内の特殊記号は HTML の数値文字参照として記述されています。
Tableau Server の例:
<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> <param name='site_root' value=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Tableau Cloud の例:
<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> <param name='site_root' value='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> </object> </div>
<script> タグのソースは、Tableau Server または Tableau Cloud の JavaScript ファイル viz_v1.js の URL です。JavaScript ファイルは、ユーザーに表示されるビューの完全な URL の構成を処理します。name および site_root オブジェクト パラメーターのみが必須のパラメーターです。それ以外のすべてのパラメーターはオプションです。
ビューの URL を指定
iframe を使用して同じビューを埋め込む例を示します。ここで、ソースは、ビューで [共有]、[リンクのコピー] をクリックして取得する URL です。
Tableau Server の例:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Tableau Cloud の例:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
embed URL パラメーターを指定する必要があります。ツールバーや元に戻すオプションなどを制御するパラメーターをオプションで含めることもできます。ビューの読み込み時に表示される特定のデータを制御するフィルターを URL に追加することもできます。
ヒント: このメソッドを使用する場合は、HTML 属性 allowfullscreen="true" を iframe 要素に追加し、ビューの全画面表示ボタンを有効にしてください。