インテージテクノスフィア技術ブログ

株式会社インテージテクノスフィアの社員達がシステム開発や仕事に関する技術情報を随時掲載いたします

トップ > Tableau > 【Tableau】クラスの関係性を知る - Tabeau JS API -

【Tableau】クラスの関係性を知る - Tabeau JS API -

Tableau 開発

こんにちは、アイダです。 Tableau の開発者ツールである Tableau JS API （Tableau JavaScript API）では、クラスごとに取得できる情報が異なります。 ツールを使いこなすには、Tableau 用語とそれらの関係性 を知っておく必要があると、特に重要な３つのクラス「Viz」「Workbook」「Sheet」について投稿してくれました。それではOさん、どうぞ。

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

はじめに

こんにちは。 O です。

以前のブログで、Tableau JS API を使用し、Web アプリケーションの一部として Tableau を組み込む方法をご紹介しました。

www.intage-ts.com

さらに Tableau JS API を使いこなすには、Tableau 用語とそれらの関係性 を知っておく必要があります。 キーワードはこのあたりです。

  • Viz
  • Workbook
  • Sheet
  • Dashboard
  • Worksheet
  • Story

Tableau JS API は、各クラスで使用できるメソッド、すなわち取得できる情報が異なるので、 今回は基本となる、以下の3つのクラスを解説しようと思います。

  • Viz
  • Workbook
  • Sheet

使うもの

概要や使い方は、以前の ブログをご参考ください。

Tableau Javascript API
公式：　Tableau Javascript API Reference

クラスと関係性

クラス構造を簡潔に表したのが、以下の図です。

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

画像元）Top-Level Class Diagram

Viz クラス

Tableau 関連でよく聞くキーワード「Viz」は、ビジュアライゼーション の略です。 グラフ・数表など、「可視化」「表現」されているものをまとめて「Viz」と呼びます。

組み込みをする時に、new Tableau.Viz(...) でViz クラスを生成しているので、 Tableau JS では、Viz が一番外側で扱うクラスです。

// 描画オプション生成
const options = {
    width: containerDiv.offsetWidth,
    height: 855,
};
// Tableau呼び出し
viz = new Tableau.Viz(containerDiv, vizUrl, options);

Workbook クラス

Tableau をファイルでやり取りするとき、twb / twbx で扱いますが、 そのファイル1つ1つを ワークブック と呼びますよね？それです。

Viz クラスに対して、getWorkbook() メソッドを呼び出すと、Workbook クラスを呼び出すことが出来ます。

Workbook クラスでは、ワークブック名の取得や、現在表示されているシート（後述）の情報を取得することができます。

// ワークブック 情報を取得
const workbook =  viz.getWorkbook();
// ワークブック名を取得
const workbookName = workbook.getName();
// 現在表示されているシート（アクティブシート）の情報を取得
const activeSheet = workbook.getActiveSheet();

Sheet クラス（Abstract）

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

Tableau Desktop などで Viz を作るとき、ワークシート／ダッシュボード／ストーリーを使っていると思います。 これらすべてが、Sheet クラスだと考えてください。

厳密にいうと、Sheet 自体は Abstract Class であり、シートタイプによって Worksheet クラスになったり、Dashboard クラスになったりします。

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

ワークシート／ダッシュボード／ストーリー は、シートタイプで区別され、それぞれ使えるメソッドが異なるので注意が必要です。

シートタイプは getSheetType() メソッドで取得できるので、必要に応じてシートタイプによる分岐処理ができますね。

// ワークブック 情報を取得
const workbook =  viz.getWorkbook();
// 現在表示されているシート（アクティブシート）の情報を取得
const activeSheet = workbook.getActiveSheet();
// シートタイプを出力
console.log(activeSheet.getSheetType());        // ←　"dashboard" が出力される

クラスがなんとなく分かってきたら

Viz の説明にも書きましたが、組み込みでは new Tableau.Viz(...) でViz クラスを生成しているので、 情報を取得するには、基本的に Viz クラスを起点とします。

例えば、表示しているワークシートのシート名を取得したいならば、 Viz → Workbook → Sheet（タイプは Worksheet）と階層を辿っていく、、 という使い方をすることができます。

Sheet で使用しているデータ（Underlying Data）へもアクセスすることができるので、 Web アプリに組み込んだ Tableau から、データを取得して、そのデータを使ってWebアプリ上でなにか別のグラフを作って、、、 というようなこともできます。

（具体例な使用例がぱっと出てこないのですが、できることを知っていることが重要！）

さらに、前回紹介した イベント検知 と組み合わせて、Webアプリに組み込まれた Tableau のユーザー操作情報 なんかを取得することもできそうですね。

使い方いろいろ。

おわり

Sheet と Worksheet が同じものだと思いこんでいたため、何度もクラス迷子になった自分を供養するための記事でした。

誰かのお役に立つことを願います。