こんにちは、アイダです。AI・DXビジネス本部のKさんによる【Tableau】の連載は、学習やコミュニティの形成のお話でしたが、同部署のOさんは、技術的な内容でブログに参戦！Tableauは開発者向けのツールが提供されていますが、そのひとつを使ってWebアプリへの組み込みに挑戦しました。それではOさんどうぞ。

はじめに
やりたいこと
使うもの
- Tableau Javascript API
- tableau-api-js（npmライブラリ）
さっそく、ダッシュボードを描画する
描画オプションを見てみる
- やばい。あっちもこっちも英語だわ。
- 頑張って読む。
おわり
- 目的は達成できた、しかし

はじめに

こんにちは。Oです。

Tableau というと、Tableau Desktop や Tableau Server で、直接ダッシュボードを見るイメージが強いかなと思うのですが（私はそう思っていました）、 アプリケーションに組み込んで表示する方法もあるよ！ということを共有できたらなと思います。

※ライセンスについては別途検討が必要なので、あくまで技術的にできることの紹介です。

やりたいこと

JavaScript（React）で構成されたフロントエンドアプリケーションに、Tableauを埋め込みで描画します。

イメージ図はこんな感じ。アプリケーションの中にあるよ感を出したかっただけなので、ヘッダーやメニューバーは雰囲気です。

f:id:intage-tech:20210208093446p:plain

使うもの

Tableau Javascript API

公式：　Tableau Javascript API Reference

Webアプリに組み込むために、JS API を使用します。

Tableau からは、他にも開発者向けのツールが提供されているようです。 Data Connector でデータ取得したり、自前のサービスから hyper ファイルを出力する機能なんかもあるのですね。便利！
参考）Tableauが提供するAPI一覧（リンク先の "Developer Resources"）

tableau-api-js（npmライブラリ）

参考：https://www.npmjs.com/package/tableau-api-js

Tableau Javascript API を node で使えるようにしたライブラリが出ていたので、こちらを使いました。便利なものは使っていきましょう。

さっそく、ダッシュボードを描画する

tableau-api-js に記載されていたやり方でできました。思っていたよりかんたん！
（ダッシュボードは Tableau Public からお借りしました。）（メニューバーなんて幻想だった。）

f:id:intage-tech:20210204114918p:plain

「表示」ボタンを押すと、initViz 関数が動いて、Tableau を divタグ部分（id=vizContainer）に埋め込んでいます。

Sample Component：

import * as React from 'react';
const Tableau = require('tableau-api-js');
// Component
import { Paper, Button } from '@material-ui/core';
  
// Props
interface Props {
}
  
// Component
const TableauViewPage = (props: Props) => {
  
    const initViz = () => {
        // Tableauを埋め込む要素を取得
        const containerDiv:any = document.getElementById('vizContainer');
        // URL
        const vizUrl = 'https://public.tableau.com/shared/W2Y96S62M';   // TableauPublic からお借りしました
        // 描画オプション生成
        const options = {
            width: containerDiv.offsetWidth,
            height: 700,
        };
        // Tableau呼び出し
        new Tableau.Viz(containerDiv, vizUrl, options);
    };
  
    return (
        <main>
            <Paper>
                <Button onClick={initViz}>表示</Button>       // ボタンをクリックすると、initViz関数が呼ばれる
                <div id="vizContainer" />                 // 埋め込み先
            </Paper>
        </main>
    );
};
　　
export default TableauViewPage;