Menu Close
  1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Tableau PublicのVizをiframeでブログに埋め込む方法

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

更新日:2020.04.01 作成日:2020.03.06

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をブログに貼り付けることができます。

  1. 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のリンクを貼るようにします。

参考

スポンサーリンク

Related contents

TECH

2020.05.08

Tableau Publicにデフォルト「非表示」で保存する方法

TECH

2020.05.20

イベントレポート「組織全体の分析力を上げよう〜「Viewer」を巻き込むには?〜」

TECH

2020.03.23

「DATA Saber認定制度」のふりかえり

TECH

2020.03.20

【Tableau】積み上げ棒グラフの合計値をラベル表示する方法

TECH

2020.02.27

【Tableau】カテゴリ別の上位と下位Nを表示する

TECH

2020.02.10

Tableauの「結合済みフィールド」(Combined Fields)を利用して任意のソート順を定義する

TECH

2020.01.25

データ準備におけるTableau DesktopとTableau Prep Builderの使い分け

TECH

2020.01.09

Tableauホワイトペーパーから読み解く「トラディショナルBIとモダンBIの違い」