Tableau Desktopで作成したVizはTableau Publicと呼ばれるギャラリーサイトに公開できます。一度Tableau Publicに公開すればTableau Public上でのURLが発行されます。

このURLを共有すればVizの共有ができますが、Vizをブログに埋め込みたい場合はどのようにすればよいでしょうか。調べた結果を記載します。

Tableau PublicのVizをブログに埋め込む方法

やり方としては以下2通りです。

1. Tableau Publicが用意する埋め込みコードを利用する（JavaScript利用）
2. iframeでTableau Publicの埋め込みを行う

1. Tableau Publicが用意する埋め込みコードを利用する

下図のShareボタンをクリックすると埋め込みコードが発行されます。

基本的に、この埋め込みコードを利用することでVizをブログに貼り付けることができます。

2. iframeでTableau Publicの埋め込みを行う

基本的にはTableau Pubicが用意する上記埋め込みコードで問題ありません。しかし、本ブログはFull AMPで運用しているため、AMP以外のJavaScriptを利用できません。そこで、<amp-iframe>を利用してiframeで表示できるように埋め込みコードを一部変更します。

変更点

• 「リンク」で表示されているhttps://public.tableu.com/views/・・・からURLパラメタを抜き、srcに指定する
• URLパラメタとして:showVizHome=noと:embed=trueの2つを指定する

上記変更を加えた上で、通常のAMPでのiframe表示同様、必要な属性を指定します。本ブログではHugoを利用していますので、以下のShortCodesを定義しました。

Shortcodes「tableau.html」

{{ $width := .Get "width" }}
{{ $height := .Get "height" }}
{{ $src := .Get "src" }}

<amp-iframe
  width="{{$width}}"
  height="{{$height}}"
  sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
  layout="responsive"
  frameborder="0"
  src="{{$src}}?:showVizHome=no&:embed=true"
  scrolling="no" allowfullscreen>
</amp-iframe>

iframeでのTableau PubicのVizの表示

以下の通り、AMPであってもTableau PublicのVizを埋め込むことができました。Vizの表示だけでなく、操作も可能なことがわかります。

まとめ

AMPサイトであってもTableau PublicのViz埋め込みが可能ということがわかりました。 その一方で、埋め込まれたVizが見やすいかどうかについては疑問が残ります。

Tableauのビジュアライゼーションは、レスポンシブデザインとは相性が悪いです。もともと、モバイル表示用に作成したVizであればよいですが、デスクトップ表示用に作成したVizをモバイルで表示する場合は見るに耐えられません。

Tableauのダッシュボード作成のベストプラクティスにも、「Viewer（Vizを見る人）を想定して固定サイズにすべき」というものがあります。 なぜそのベストプラクティスが生まれたのかを身を以て体感しました。

ブログに埋め込むとしてもあらかじめブログ用にサイズを整えるか、キャプチャと共にTableau Publicのリンクを貼るようにします。

参考

• Tableau Public ビューを iframe に埋め込む | Tableau Software
• カスタム ビューの埋め込みコード - Tableau