Zenn
🖼️

Tableauで作成したダッシュボードをhtmlファイルに載せて好きなデザインにする。

に公開
CSS
HTML
JavaScript
Tableau
Marp
tech

まえがき

2025年の3月にTableauのDATASaberになんとかなることができました。
ありがたいことに今年の4月から3人も弟子を持たせていただけることになり、何か出来ることはないかなと思っていたところちょうど以下のような「DATASaber認定後初めてLT会」がtechplayで行われるとのことだったのでLTさせていただきました🙌

https://techplay.jp/event/977224

DATASaberになったはいいもののTableau Publicにある世界中から公開されるようなVizを作成することができなかったのでもっとデザインに凝るためにどういう方法があるか調べてみた...というのがLTの内容でした。
今回はその中で行った「htmlファイルにTableau Publicのリンクを埋め込む」という方法についてどうやるか詳しく書いていこうと思います。

概要

Tableauでデザインを凝る...となった時にみなさん結構色々な驚くような方法をとられててただただすごいと思う反面、現状自分にその部分を突き詰める余力はあまりかけられないだろうと思っていました。
端的に言えば「コードベースのCSSとかであまり手間をかけずに(生成AIに頼って)デザインを行いたい」というのが本音でした。
ただTableau自体は基本的にはCSSを直接適用することはできません。(色々な拡張機能がありそのすべてを試せていないのでもしかしたら出来るのかもしれませんが...)

そこで三つの方法について実際に触ってみてLTしてみた...ということでした。
その方法とは、
1.Figma To Tableauを使用する。
https://www.figma.com/community/plugin/1300023354795998702/figma-to-tableau
2.カスタムテーマを使用する。(以下サイトでGUIベースでデザインを考えjsonファイルを生成可能)
https://www.ladataviz.com/tools/custom-theme
3.CSSを適用したマークダウン(html)の中にTableauの埋め込みコードを埋め込む
でした。

個人的に実務で使用するならおそらく2が一番簡単で展開もしやすい方法かなと思いました。
3の方法はLTではmarpのiframeで他のhtmlをうめこみ、htmlからtableau publicの埋め込みコードを読んでいる状態でした。(ちょっとわかりにくいですよね...)

LTでとったこの方法だと周り口説いので一枚のhtmlにまとめる方法を今回は紹介したいと思います。

スライド

https://nkwork9999.github.io/-LT-20240423tableauSlide/

成果物

https://nkwork9999.github.io/-LT-20240423tableau/

コード

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: linear-gradient(135deg, #6e5a7b, #9d50bb);
        margin: 0;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        position: relative;
      }

      .stars-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
      }

      .star {
        position: absolute;
        background-color: white;
        border-radius: 50%;
        animation: twinkle linear infinite;
        opacity: 0;
      }

      @keyframes twinkle {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
        }
      }

      .container {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05),
          inset 0 0 8px rgba(255, 255, 255, 0.02);
        padding: 30px;
        width: 90%;
        max-width: 1200px;
        margin: 20px auto;
        overflow: hidden;
        position: relative;
        z-index: 1;
      }

      .glow-effect {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.02) 0%,
          rgba(255, 255, 255, 0) 70%
        );
        pointer-events: none;
        z-index: -1;
      }

      h1 {
        color: white;
        text-align: center;
        margin-bottom: 30px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
      }

      iframe {
        width: 100%;
        height: 800px;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="stars-container" id="stars"></div>

    <div class="container">
      <div class="glow-effect"></div>
      <!-- ここにTableau Publicからの埋め込みコードを貼り付ける -->
      
    </div>

    <script>
      // Stars twinkling effect
      function createStars() {
        const starsContainer = document.getElementById("stars");
        const numberOfStars = 100;

        for (let i = 0; i < numberOfStars; i++) {
          const star = document.createElement("div");
          star.classList.add("star");

          // Random position
          const left = Math.random() * 100;
          const top = Math.random() * 100;

          // Random size (1-3px)
          const size = Math.random() * 2 + 1;

          // Random animation duration (3-8s)
          const duration = Math.random() * 5 + 3;

          // Random delay (0-5s)
          const delay = Math.random() * 5;

          star.style.left = `${left}%`;
          star.style.top = `${top}%`;
          star.style.width = `${size}px`;
          star.style.height = `${size}px`;
          star.style.animationDuration = `${duration}s`;
          star.style.animationDelay = `${delay}s`;

          starsContainer.appendChild(star);
        }
      }

      // Initialize stars when DOM is fully loaded
      document.addEventListener("DOMContentLoaded", createStars);
    </script>
  </body>
</html>

とりあえず上のコードのようなhtmlファイルを作成します。
というところにTableauからの埋め込みコードを貼り付けます。

埋め込みコードはTableau Publicの以下の共有ボタンを押してくると出てきます。
...

...いやコード長いやんと思うと思いますがほぼClaudeと作ってるので手間はあまりかかってないです。
こういうhtmlファイルを作ることでCSSとJavascriptでデザインができます。(結構無理やりですが)
Tableauのダッシュボードの背景色を透過にしたらもっと映えるかもしれませんね。

使い道

正直なところ番外編として紹介したのですが、Tableau Cloudでも同じことができそう...といった意見もLT会でもありもしかしたら使い道はあるのかもしれないなと思いました。
ただ今回はTableau Publicという(埋め込みコードも含め)公開前提のVizを共有しているので良いのですが、Tableau Cloudの埋め込みコードをhtmlに貼り付けてばら撒けてしまう...というとダメなところもあるのかもしれないなと思いました。(一応権限で弾かれるとは思うのですが、URLは漏れてしまうので)
そう言った場合はAWS S3にhtmlファイルを置いて署名付きURLで共有したり...?という方法などもあるのかもしれません。(未検証)
ただ個人で楽しむにはありかなと思います。特にMakeOverMondayなどVizを公開するようなものは一応ツールはなんでも良いということにはなっているので、こういう方法で色々やってみるのも個人的には面白そうかなと思いました。
もしよければ試してみてください🙌

Discussion